From c6f98d59285656f179eea80662e86f7cf5329e59 Mon Sep 17 00:00:00 2001
From: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Date: Mon, 30 Nov 2020 18:51:52 +0100
Subject: 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
---
 .../apps/connectApp/src/components/connectionStatusLog.tsx |  4 ++--
 .../connectApp/src/components/editNetworkElementDialog.tsx |  6 +++---
 .../connectApp/src/components/infoNetworkElementDialog.tsx | 14 ++++++++------
 sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx    |  6 +++---
 4 files changed, 16 insertions(+), 14 deletions(-)

(limited to 'sdnr/wt/odlux/apps/connectApp')

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'
-- 
cgit 1.2.3-korg