From 96d32fbfa1c0dcda85db3d06edaff36267023cfa Mon Sep 17 00:00:00 2001
From: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Date: Tue, 3 Aug 2021 11:08:00 +0200
Subject: Add aria-labels to odlux tables

Add aria-labels to all table action buttons

Issue-ID: CCSDK-3396
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I1c3922c1d195727265882d3e3362607ab558d603
---
 .../odlux/framework/src/components/material-table/index.tsx  |  4 ++--
 .../framework/src/components/material-table/tableToolbar.tsx | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'sdnr/wt/odlux/framework/src/components/material-table')

diff --git a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
index c74fd1a38..9155f38ec 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -159,7 +159,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
   enableSelection?: boolean;
   disableSorting?: boolean;
   disableFilter?: boolean;
-  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void, disabled?: boolean }[];
+  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
   onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
   createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr">>>[];
 };
@@ -253,8 +253,8 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
               {rows // may need ordering here
                 .map((entry: TData & { [RowDisabled]?: boolean, [kex: string]: any }, index) => {
                   const entryId = getId(entry);
-                  const isSelected = this.isSelected(entryId);
                   const contextMenu = (this.props.createContextMenu && this.state.contextMenuInfo.index === index && this.props.createContextMenu(entry)) || null;
+                  const isSelected = this.isSelected(entryId) || this.state.contextMenuInfo.index === index;
                   return (
                     <TableRowExt
                       hover
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
index f7de0a062..4ad6422dc 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -67,7 +67,7 @@ interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
   numSelected: number | null;
   title?: string;
   tableId?: string;
-  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void, disabled?: boolean }[];
+  customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, ariaLabel: string, onClick: () => void, disabled?: boolean }[];
   onToggleFilter: () => void;
   onExportToCsv: () => void;
 }
@@ -91,7 +91,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
   render() {
     const { numSelected, classes } = this.props;
     const open = !!this.state.anchorEl;
-    const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId + '-' : '';
+    const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId : 'table';
     return (
       <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
         <div className={classes.title}>
@@ -110,7 +110,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
           {this.props.customActionButtons
             ? this.props.customActionButtons.map((action, ind) => (
               <Tooltip key={`custom-action-${ind}`} title={action.tooltip || ''}>
-                <IconButton disabled={action.disabled} aria-label={buttonPrefix + `custom-action-${ind}`} onClick={() => action.onClick()}>
+                <IconButton disabled={action.disabled} aria-label={`${buttonPrefix}-${action.ariaLabel}-button`} onClick={() => action.onClick()}>
                   <action.icon />
                 </IconButton>
               </Tooltip>
@@ -118,20 +118,20 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
             : null}
           {numSelected && numSelected > 0 ? (
             <Tooltip title="Delete">
-              <IconButton aria-label={buttonPrefix + "delete"}>
+              <IconButton aria-label={`${buttonPrefix}-delete-button`}>
                 <DeleteIcon />
               </IconButton>
             </Tooltip>
           ) : (
               <Tooltip title="Filter list">
-                <IconButton aria-label={buttonPrefix + "filter-list"} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
+                <IconButton aria-label={`${buttonPrefix}-filter-list-button`} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
                   <FilterListIcon />
                 </IconButton>
               </Tooltip>
             )}
           <Tooltip title="Actions">
             <IconButton color="inherit"
-            aria-label={buttonPrefix +"additional-actions-button"}
+            aria-label={`${buttonPrefix}-additional-actions-button`}
               aria-owns={open ? 'menu-appbar' : undefined}
               aria-haspopup="true"
               onClick={this.handleMenu} >
-- 
cgit 1.2.3-korg