aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/configurationApp/src
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-11-30 18:51:52 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-11-30 18:55:38 +0100
commitc6f98d59285656f179eea80662e86f7cf5329e59 (patch)
tree384d7bcb8061cea40599f45874a51e6f11a1759c /sdnr/wt/odlux/apps/configurationApp/src
parentf88794b887842911b30a75afc53f87f660d1c1e7 (diff)
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
Diffstat (limited to 'sdnr/wt/odlux/apps/configurationApp/src')
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx2
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx5
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx4
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx6
-rw-r--r--sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx4
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 },