aboutsummaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps
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
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')
-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
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx4
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx6
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx14
-rw-r--r--sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx6
-rw-r--r--sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx2
-rw-r--r--sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx16
-rw-r--r--sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx14
-rw-r--r--sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx2
-rw-r--r--sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx2
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx8
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx17
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx14
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx12
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx2
-rw-r--r--sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx18
26 files changed, 87 insertions, 83 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 },
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
index 96f6c8a6b..f2fd2937d 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx
@@ -42,9 +42,9 @@ class ConnectionStatusLogComponent extends React.Component<ConnectionStatusLogCo
render(): JSX.Element {
return (
<ConnectionStatusTable stickyHeader tableId="connection-status-table" columns={[
- { property: "timestamp", title: "Time", type: ColumnType.text },
+ { property: "timestamp", title: "Timestamp", type: ColumnType.text },
{ property: "nodeId", title: "Node Name", type: ColumnType.text },
- { property: "status", title: "Connection status", type: ColumnType.text },
+ { property: "status", title: "Connection Status", type: ColumnType.text },
]} idProperty="id" {...this.props.connectionStatusLogActions} {...this.props.connectionStatusLogProperties} >
</ConnectionStatusTable>
);
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
index 3b4cf3bb5..97e6647cf 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx
@@ -192,11 +192,11 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme
{setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="password" label="Password" aria-label="password" type="password" fullWidth value={this.state.password} onChange={(event) => { this.setState({ password: event.target.value }); }} /> || null}
<FormControl fullWidth disabled={!setting.enableUsernameEditor}>
<InputLabel htmlFor="active">Required</InputLabel>
- <Select value={this.state.isRequired || false} onChange={(event) => {
+ <Select aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => {
this.setState({ isRequired: event.target.value as any as boolean });
}} inputProps={{ name: 'required', id: 'required' }} fullWidth >
- <MenuItem value={true as any as string} >True</MenuItem>
- <MenuItem value={false as any as string} >False</MenuItem>
+ <MenuItem value={true as any as string} aria-label="true">True</MenuItem>
+ <MenuItem value={false as any as string} aria-label="false">False</MenuItem>
</Select>
</FormControl>
</DialogContent>
diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
index ea9d419ec..df8515e58 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx
@@ -56,7 +56,7 @@ const settings: { [key: string]: DialogSettings } = {
[InfoNetworkElementDialogMode.InfoNetworkElement]: {
dialogTitle: "Yang capabilities of the network element",
dialogDescription: "Available capabilities of the network element",
- cancelButtonText: "Cancel",
+ cancelButtonText: "OK",
}
}
@@ -97,6 +97,8 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme
}
});
+ yangCapabilities = yangCapabilities.sort((a,b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1);
+
return (
<Dialog open={this.props.mode !== InfoNetworkElementDialogMode.None}>
<DialogTitle id="form-dialog-title">{setting.dialogTitle}</DialogTitle>
@@ -104,7 +106,7 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme
<DialogContentText>
{setting.dialogDescription + " " + this.state.nodeId}
</DialogContentText>
- <Table >
+ <Table aria-label="yang-capabilities-table">
<TableHead>
<TableRow>
<TableCell align="right">S.No</TableCell>
@@ -114,17 +116,17 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme
</TableHead>
<TableBody>
{yangCapabilities.map((yang, index) => (
- <TableRow>
+ <TableRow aria-label="yang-capabilities-row">
<TableCell>{index + 1}</TableCell>
- <TableCell>{yang.module}</TableCell>
- <TableCell>{yang.revision}</TableCell>
+ <TableCell aria-label="yang-module"><a href={`/yang-schema/${yang.module}`} target={"_blank"}> {yang.module} </a></TableCell>
+ <TableCell aria-label="yang-revision">{yang.revision}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</DialogContent>
<DialogActions>
- <Button onClick={(event) => {
+ <Button aria-label="ok-button" onClick={(event) => {
this.onCancel();
event.preventDefault();
event.stopPropagation();
diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
index 86861fabb..1fa5e1909 100644
--- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
+++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx
@@ -105,9 +105,9 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp
return (
<>
<AppBar position="static">
- <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example">
- <Tab aria-lablel="network-elements-list-tab" label="Network Elements" value="NetworkElements" />
- <Tab aria-lablel="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" />
+ <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs">
+ <Tab aria-label="network-elements-list-tab" label="Network Elements" value="NetworkElements" />
+ <Tab aria-label="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" />
</Tabs>
</AppBar>
{activePanelId === 'NetworkElements'
diff --git a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx
index aa9027206..3d81e4e46 100644
--- a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx
+++ b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx
@@ -39,7 +39,7 @@ let initalSorted = false;
class EventLogComponent extends React.Component<Connect<typeof mapProps, typeof mapDispatch>> {
render() {
- return <EventLogTable stickyHeader title="Event Log" idProperty="_id" columns={[
+ return <EventLogTable stickyHeader title="Event Log" tableId="event-log-table" idProperty="_id" columns={[
{ property: "nodeId", title: "Node Name" },
{ property: "counter", title: "Counter" },
{ property: "timestamp", title: "Timestamp" },
diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
index 7c29fec56..2c167c5b2 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
+++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
@@ -137,16 +137,16 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
return (
<>
<AppBar position="static" >
- <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="fault tabs">
+ <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="fault-tabs">
<Tab aria-label="current-problem-list-tab" label="Current Problem List" value="CurrentProblem" />
<Tab aria-label="alarm-notifications-list-tab" label={`Alarm Notifications (${this.props.faultNotifications.faults.length})`} value="AlarmNotifications" />
<Tab aria-label="alarm-log-tab" label="Alarm Log" value="AlarmLog" />
</Tabs>
</AppBar>
{
- activePanelId === 'CurrentProblem' && <FaultTable stickyHeader idProperty={'id'} customActionButtons={customAction} columns={[
+ activePanelId === 'CurrentProblem' && <FaultTable stickyHeader tableId="current-problems-table" idProperty={'id'} customActionButtons={customAction} columns={[
{ property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
- { property: "timestamp", type: ColumnType.text, title: "Time Stamp" },
+ { property: "timestamp", type: ColumnType.text, title: "Timestamp" },
{ property: "nodeId", title: "Node Name", type: ColumnType.text },
{ property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
{ property: "objectId", title: "Object Id", type: ColumnType.text },
@@ -156,9 +156,9 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
}
{activePanelId === 'AlarmNotifications' &&
- <FaultAlarmNotificationTable stickyHeader rows={this.props.faultNotifications.faults} asynchronus columns={[
+ <FaultAlarmNotificationTable tableId="alarm-notifications-table" stickyHeader rows={this.props.faultNotifications.faults} asynchronus columns={[
{ property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
- { property: "timeStamp", title: "Time Stamp" },
+ { property: "timeStamp", title: "Timestamp" },
{ property: "nodeName", title: "Node Name" },
{ property: "counter", title: "Count", width: "100px", type: ColumnType.numeric },
{ property: "objectId", title: "Object Id" },
@@ -168,9 +168,11 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
}
- {activePanelId === 'AlarmLog' && <FaultTable stickyHeader idProperty={'id'} columns={[
+ {activePanelId === 'AlarmLog' &&
+ <FaultTable stickyHeader idProperty={'id'} tableId="alarm-log-table"
+ columns={[
{ property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
- { property: "timestamp", title: "Time Stamp" },
+ { property: "timestamp", title: "Timestamp" },
{ property: "nodeId", title: "Node Name" },
{ property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
{ property: "objectId", title: "Object Id" },
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
index 14792df5b..f5ada22ab 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
@@ -115,9 +115,9 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
return (
<>
<AppBar position="static">
- <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example">
- <Tab label="Table View" value="InventoryElementsTable" />
- <Tab label="Tree view" value="TreeviewTable" />
+ <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs">
+ <Tab label="Table View" value="InventoryElementsTable" aria-label="table-tab" />
+ <Tab label="Tree view" value="TreeviewTable" aria-label="treeview-tab" />
</Tabs>
</AppBar>
@@ -125,7 +125,7 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
activePanelId === "InventoryElementsTable" &&
- <InventoryTable stickyHeader title="Inventory" idProperty="_id" columns={[
+ <InventoryTable stickyHeader title="Inventory" idProperty="_id" tableId="inventory-table" columns={[
{ property: "nodeId", title: "Node Name" },
{ property: "manufacturerIdentifier", title: "Manufacturer" },
{ property: "parentUuid", title: "Parent" },
@@ -149,9 +149,9 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
{
activePanelId === "TreeviewTable" &&
- <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 },
+ <ConnectedElementTable stickyHeader tableId="treeview-networkelement-selection-table" onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${row.nodeId}`) }} columns={[
+ { 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 },
diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
index 5f2c61080..5ba82abe7 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx
@@ -112,7 +112,7 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie
}}
onItemClick={(elm) => selectTreeNode(elm.value)} />
<div className={classes.details}>{
- selectedNode && renderObject(selectedNode) || null
+ selectedNode && renderObject(selectedNode, "tree-view") || null
}</div>
</div>
);
diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
index f087ed2e4..f52d46d81 100644
--- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
+++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx
@@ -116,7 +116,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP
const now = new Date().valueOf();
return (
<>
- <MaintenenceEntriesTable stickyHeader title={"Maintenance"} customActionButtons={[addMaintenenceEntryAction]} columns={
+ <MaintenenceEntriesTable stickyHeader tableId="maintenance-table" title={"Maintenance"} customActionButtons={[addMaintenenceEntryAction]} columns={
[
{ property: "nodeId", title: "Node Name", type: ColumnType.text },
{
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
index 0c9f6034f..a8f73f35c 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
@@ -82,10 +82,10 @@ const LinkDetails: React.FunctionComponent<props> = (props) => {
return (<div style={{ paddingLeft: "15px", paddingRight: "15px", paddingTop: "0px", display: 'flex', flexDirection: 'column' }}>
<h2>{props.link.name}</h2>
- <TextField aria-label="operator" disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" />
- <TextField aria-label="type" disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" />
- <TextField aria-label="planned-distance-in-km" disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" />
- <TextField aria-label="calculated-distance-in-km" disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" />
+ <TextField inputProps={{ 'aria-label': 'operator' }} disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" />
+ <TextField inputProps={{ 'aria-label': 'type' }} disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" />
+ <TextField inputProps={{ 'aria-label': 'planned-distance-in-km' }} disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" />
+ <TextField inputProps={{ 'aria-label': 'calculated-distance-in-km' }} disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" />
<AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}>
<Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography>
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
index 92643d0c4..613166116 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
@@ -41,7 +41,6 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
const [height, setHeight] = React.useState(330);
const handleResize = () =>{
- //console.log("resize")
const el = document.getElementById('site-details-panel')?.getBoundingClientRect();
const el2 = document.getElementById('site-tabs')?.getBoundingClientRect();
@@ -81,28 +80,28 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
<h2 >{props.site.name}</h2>
{
props.site.operator !== '' && props.site.operator !== null ?
- <TextField aria-label="operator" disabled={true} value={props.site.operator} label="Operator" /> :
- <TextField aria-label="operator" disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} />
+ <TextField inputProps={{ 'aria-label': 'operator' }} disabled={true} value={props.site.operator} label="Operator" /> :
+ <TextField inputProps={{ 'aria-label': 'operator' }} disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} />
}
{
props.site.type !== undefined && props.site.type.length > 0 &&
- <TextField aria-label="type" disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
+ <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} />
}
{
props.site.address !== undefined && props.site.address.length > 0 &&
- <TextField aria-label="adress" disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} />
+ <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} />
}
{
props.site.heighAGLInMeters !== undefined && props.site.heighAGLInMeters > 0 &&
- <TextField aria-label="amsl-in-meters" disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} />
+ <TextField inputProps={{ 'aria-label': 'amsl-in-meters' }} disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} />
}
{
props.site.antennaHeightAGLInMeters !== undefined && props.site.antennaHeightAGLInMeters > 0 &&
- <TextField aria-label="antenna-above-ground-in-meters" disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} />
+ <TextField inputProps={{ 'aria-label': 'antenna-above-ground-in-meters' }} disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} />
}
- <TextField aria-label="latitude" style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" />
- <TextField aria-label="longitude" style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" />
+ <TextField inputProps={{ 'aria-label': 'latitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" />
+ <TextField inputProps={{ 'aria-label': 'longitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" />
<AppBar position="static" style={{ marginTop: "5px", background: '#2E3B55' }}>
<Tabs id="site-tabs" value={value} onChange={onHandleTabChange} aria-label="simple tabs example">
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
index f0a93f565..17b1374b8 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx
@@ -90,7 +90,7 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp
<>
<ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
{lineChart(chartPagedData)}
- <AdaptiveModulationTable stickyHeader idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} />
+ <AdaptiveModulationTable stickyHeader idProperty={"_id"} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} />
</ToggleContainer>
</>
);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
index e5f540e19..e7583de12 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx
@@ -44,22 +44,22 @@ const ChartFilter: React.FunctionComponent<filterProps> = (props) => {
{
props.isVisible &&
<div className={classes.filterContainer}>
- <TextField className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{
+ <TextField inputProps={{'aria-label': 'radio-signal-filter'}} className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{
shrink: true,
}} />
- <TextField className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{
+ <TextField inputProps={{'aria-label': 'scanner-id-filter'}} className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{
shrink: true,
}} />
- <TextField className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{
+ <TextField inputProps={{'aria-label': 'end-time-filter'}} className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{
shrink: true,
}} />
<FormControl>
<InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel>
- <Select labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
- <MenuItem value={undefined}>None</MenuItem>
- <MenuItem value={"true"}>true</MenuItem>
- <MenuItem value={"false"}>false</MenuItem>
+ <Select aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}>
+ <MenuItem value={undefined} aria-label="none">None</MenuItem>
+ <MenuItem value={"true"} aria-label="true">true</MenuItem>
+ <MenuItem value={"false"} aria-label="false">false</MenuItem>
</Select>
</FormControl>
</ div>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
index 60051d03e..14cc02d6d 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx
@@ -93,7 +93,7 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri
<>
<ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
{lineChart(chartPagedData)}
- <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} />
+ <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} tableId="cross-polar-discrimination-table" columns={cpdColumns} {...properties} {...actions} />
</ToggleContainer>
</>
);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
index b0aebd208..61b781384 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx
@@ -58,15 +58,15 @@ export const LtpSelection = (props: LtpSelectionProps) => {
<span>
Select LTP
</span>
- <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} >
- <MenuItem value={"-1"}><em>--Select--</em></MenuItem>
+ <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" >
+ <MenuItem value={"-1"} aria-label="none"><em>--Select--</em></MenuItem>
{props.availableLtps.map(ltp =>
- (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))}
+ (<MenuItem value={ltp.key} key={ltp.key} aria-label={ltp.key}>{ltp.key}</MenuItem>))}
</Select>
<span> Time-Period </span>
- <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} >
- <MenuItem value={"15min"}>15min</MenuItem>
- <MenuItem value={"24hours"}>24hours</MenuItem>
+ <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection">
+ <MenuItem value={"15min"} aria-label="15minutes">15min</MenuItem>
+ <MenuItem value={"24hours"} aria-label="24hours">24hours</MenuItem>
</Select>
</FormControl>
{
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
index 28352cd31..62090245a 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx
@@ -85,7 +85,7 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP
<>
<ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}>
{lineChart(chartPagedData)}
- <PerformanceDataTable stickyHeader idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} />
+ <PerformanceDataTable stickyHeader idProperty={"_id"} tableId="perfromance-data-table" columns={performanceColumns} {...properties} {...actions} />
</ToggleContainer>
</>
);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
index 720fb946e..8dc92b8ac 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx
@@ -92,7 +92,7 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{
<>
<ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
{lineChart(chartPagedData)}
- <ReceiveLevelTable stickyHeader idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} />
+ <ReceiveLevelTable stickyHeader idProperty={"_id"} tableId="receive-level-table" columns={receiveLevelColumns} {...properties} {...actions} />
</ToggleContainer>
</>
);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
index 4b34019ae..ee7fe34aa 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx
@@ -91,7 +91,7 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference
<>
<ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
{lineChart(chartPagedData)}
- <SignalToInterferenceTable stickyHeader idProperty={"_id"} columns={sinrColumns} {...properties} {...actions}
+ <SignalToInterferenceTable stickyHeader idProperty={"_id"} tableId="signal-to-interference-table" columns={sinrColumns} {...properties} {...actions}
/>
</ToggleContainer>
</>
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
index 2484a8cfb..31e1d363f 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx
@@ -93,7 +93,7 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{
<ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}>
{lineChart(chartPagedData)}
- <TemperatureTable stickyHeader idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} />
+ <TemperatureTable stickyHeader idProperty={"_id"} tableId="temperature-table" columns={temperatureColumns} {...properties} {...actions} />
</ToggleContainer>
</>
);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
index e44ffe077..97a35da0a 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx
@@ -94,7 +94,7 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon
<>
<ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} >
{lineChart(chartPagedData)}
- <TransmissionPowerTable stickyHeader idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} />
+ <TransmissionPowerTable stickyHeader idProperty={"_id"} tableId="transmission-power-table" columns={transmissionColumns} {...properties} {...actions} />
</ToggleContainer>
</>
);
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
index f19058cf2..a0df93fe1 100644
--- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
+++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx
@@ -223,7 +223,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
if (nodeId === "") {
return (
<>
- <NetworkElementTable defaultSortColumn={"nodeId"} defaultSortOrder="asc" stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus
+ <NetworkElementTable tableId="performance-data-element-selection-table" defaultSortColumn={"nodeId"} defaultSortOrder="asc" stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus
onHandleClick={(event, rowData) => { this.handleNetworkElementSelect(rowData.nodeId) }} columns={
[{ property: "nodeId", title: "Node Name" }]
} />
@@ -245,14 +245,14 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp
<>
<AppBar position="static" >
- <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance data tabs">
- <Tab label="Performance Data" value="PerformanceData" />
- <Tab label="Receive Level" value="ReceiveLevel" />
- <Tab label="Transmission Power" value="TransmissionPower" />
- <Tab label="Adaptive Modulation" value="AdaptiveModulation" />
- <Tab label="Temperature" value="Temperature" />
- <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" />
- <Tab label="Cross Polar Discrimination" value="CPD" />
+ <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance-data-tabs">
+ <Tab label="Performance Data" value="PerformanceData" aria-label="performance-data" />
+ <Tab label="Receive Level" value="ReceiveLevel" aria-label="receive-level" />
+ <Tab label="Transmission Power" value="TransmissionPower" aria-label="transmission-power" />
+ <Tab label="Adaptive Modulation" value="AdaptiveModulation" aria-label="adaptive-modulation" />
+ <Tab label="Temperature" value="Temperature" aria-label="temperature" />
+ <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" aria-label="snir" />
+ <Tab label="Cross Polar Discrimination" value="CPD" aria-label="cross-polar-discrimination" />
</Tabs>
</AppBar>
{