diff options
author | 2020-11-30 18:51:52 +0100 | |
---|---|---|
committer | 2020-11-30 18:55:38 +0100 | |
commit | c6f98d59285656f179eea80662e86f7cf5329e59 (patch) | |
tree | 384d7bcb8061cea40599f45874a51e6f11a1759c /sdnr/wt/odlux/apps/connectApp/src/components | |
parent | f88794b887842911b30a75afc53f87f660d1c1e7 (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/connectApp/src/components')
3 files changed, 13 insertions, 11 deletions
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(); |