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

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();