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

2 files changed, 8 insertions, 8 deletions

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