Add aria-labels

Add aria-labels to odlux framework and apps

Issue-ID: CCSDK-2886
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: If1fdf9f8a805b567dd65bcf2cfb029b71f9235b7

5 files changed, 11 insertions, 10 deletions

diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
index 62ddeb22d..56ec8dfd0 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx
@@ -75,7 +75,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => {
   return (
     <FormControl error={error} style={style}>
       <InputLabel htmlFor={id} >{label}</InputLabel>
-      <Input id={id} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps}  />
+      <Input id={id} inputProps={{'aria-label': label+'-input'}} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps}  />
       <FormHelperText>{errorText}</FormHelperText>
     </FormControl>
   );
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
index 2fbbf956f..081ec46e8 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx
@@ -35,6 +35,7 @@ export const UiElementBoolean = (props: BooleanInputProps) => {
         ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
             <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
             <Select
+                aria-label={element.label+'-selection'}
                 required={!!element.mandatory}
                 error={mandetoryError}
                 onChange={(e) => { props.onChange(e.target.value === 'true') }}
@@ -46,8 +47,8 @@ export const UiElementBoolean = (props: BooleanInputProps) => {
                     id: `select-${element.id}`,
                 }}
             >
-                <MenuItem value={'true'}>{element.trueValue || 'True'}</MenuItem>
-                <MenuItem value={'false'}>{element.falseValue || 'False'}</MenuItem>
+                <MenuItem value={'true'} aria-label="true">{element.trueValue || 'True'}</MenuItem>
+                <MenuItem value={'false'} aria-label="false">{element.falseValue || 'False'}</MenuItem>
 
             </Select>
             <FormHelperText>{mandetoryError ? "Value is mandetory" : ""}</FormHelperText>
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
index 2760eee50..b95df1f51 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx
@@ -39,9 +39,9 @@ export const UIElementReference: React.FC<UIElementReferenceProps> = (props) =>
   return (
     <FormControl key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
       <Tooltip title={element.description || ''}>
-        <Button className={classes.button} color="secondary" disabled={props.disabled} onClick={() => {
+        <Button className={classes.button} aria-label={element.label+'-button'} color="secondary" disabled={props.disabled} onClick={() => {
           props.onOpenReference(element);
-        }}>{element.label}</Button>
+        }}>{`${element.label}`}</Button>
       </Tooltip>
     </FormControl>
   );
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
index 278605144..530b0be9b 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx
@@ -19,7 +19,7 @@
 import * as React from 'react';
 import { BaseProps } from './baseProps';
 import { ViewElementSelection } from '../models/uiModels'
-import { FormControl, InputLabel, Select, FormHelperText, MenuItem } from '@material-ui/core';
+import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@material-ui/core';
 
 type selectionProps = BaseProps;
 
@@ -37,20 +37,20 @@ export const UiElementSelection = (props: selectionProps) => {
         ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}>
             <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel>
             <Select
-                title={(element.options.find(o => o.key === value.toString().toLowerCase()) || { description: undefined }).description}
                 required={!!element.mandatory}
                 error={!!error}
                 onChange={(e) => { props.onChange(e.target.value as string) }}
                 readOnly={props.readOnly}
                 disabled={props.disabled}
                 value={value.toString().toLowerCase()}
+                aria-label={element.label+'-selection'}
                 inputProps={{
                     name: element.id,
                     id: `select-${element.id}`,
                 }}
             >
           {element.options.map(option => (
-            <MenuItem key={option.key} title={option.description || ''} value={option.key}>{option.key}</MenuItem>
+            <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem>
           ))}
             </Select>
             <FormHelperText>{error}</FormHelperText>
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx
index 503133b0f..5d849986d 100644
--- a/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx
+++ b/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx
@@ -55,8 +55,8 @@ class NetworkElementSelectorComponent extends React.Component<NetworkElementSele
   render() {
     return (
       <ConnectedElementTable stickyHeader onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${row.nodeId}`) }} columns={[
-        { property: "nodeId", title: "Name", type: ColumnType.text },
-        { property: "isRequired", title: "Required ?", type: ColumnType.boolean },
+        { property: "nodeId", title: "Node Name", type: ColumnType.text },
+        { property: "isRequired", title: "Required", type: ColumnType.boolean },
         { property: "host", title: "Host", type: ColumnType.text },
         { property: "port", title: "Port", type: ColumnType.numeric },
         { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },