diff options
author | Aijana Schumann <aijana.schumann@highstreet-technologies.com> | 2021-08-03 11:08:00 +0200 |
---|---|---|
committer | Aijana Schumann <aijana.schumann@highstreet-technologies.com> | 2021-08-03 11:08:00 +0200 |
commit | 96d32fbfa1c0dcda85db3d06edaff36267023cfa (patch) | |
tree | 12ad8b4632923e1b738a0b7d36eed03e76c294ae /sdnr/wt/odlux/framework/src/components/material-table | |
parent | cef88ce423c3c974caf52cb81702e25807885cd3 (diff) |
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
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-table')
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/material-table/index.tsx | 4 | ||||
-rw-r--r-- | sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx | 12 |
2 files changed, 8 insertions, 8 deletions
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} > |