summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-08-03 11:08:00 +0200
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2021-08-03 11:08:00 +0200
commit96d32fbfa1c0dcda85db3d06edaff36267023cfa (patch)
tree12ad8b4632923e1b738a0b7d36eed03e76c294ae /sdnr/wt/odlux/framework/src/components
parentcef88ce423c3c974caf52cb81702e25807885cd3 (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')
-rw-r--r--sdnr/wt/odlux/framework/src/components/errorDisplay.tsx1
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx4
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx12
-rw-r--r--sdnr/wt/odlux/framework/src/components/navigationMenu.tsx38
4 files changed, 31 insertions, 24 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
index 1060d4b6d..b2a1f1f20 100644
--- a/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
+++ b/sdnr/wt/odlux/framework/src/components/errorDisplay.tsx
@@ -82,6 +82,7 @@ class ErrorDisplayComponent extends React.Component<ErrorDisplayProps> {
render(): JSX.Element {
const { classes, state } = this.props;
const errorInfo = state.framework.applicationState.errors.length && state.framework.applicationState.errors[state.framework.applicationState.errors.length - 1];
+
return (
<Modal className={classes.modal}
aria-labelledby="simple-modal-title"
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} >
diff --git a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
index 437ba1b3a..b65eb29e2 100644
--- a/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
+++ b/sdnr/wt/odlux/framework/src/components/navigationMenu.tsx
@@ -87,9 +87,10 @@ const styles = (theme: Theme) => createStyles({
const tabletWidthBreakpoint = 768;
export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, dispatch }: WithStyles<typeof styles> & Connect & Connect) => {
- const { user } = state.framework.authenticationState
- const isOpen = state.framework.applicationState.isMenuOpen
- const closedByUser = state.framework.applicationState.isMenuClosedByUser
+ const { user } = state.framework.authenticationState;
+ const isOpen = state.framework.applicationState.isMenuOpen;
+ const closedByUser = state.framework.applicationState.isMenuClosedByUser;
+ const transportUrl = state.framework.applicationState.transportpceUrl;
const [responsive, setResponsive] = React.useState(false);
@@ -139,20 +140,25 @@ export const NavigationMenu = withStyles(styles)(connect()(({ classes, state, di
) || null;
}) || null;
- const transportPCELink = <ListItemLink
- key={"transportPCE"}
- to={window.localStorage.getItem(transportPCEUrl)!}
- primary={"TransportPCE"}
- icon={<FontAwesomeIcon icon={faProjectDiagram}/>}
- external/>;
-
- const linkFound = menuItems.find(obj=>obj.key === "linkCalculation");
- if(linkFound){
- const index = menuItems.indexOf(linkFound);
- menuItems.splice(index+1,0,transportPCELink);
- }else{
- menuItems.push(transportPCELink);
+ if(transportUrl.length>0){
+
+ const transportPCELink = <ListItemLink
+ key={"transportPCE"}
+ to={transportUrl}
+ primary={"TransportPCE"}
+ icon={<FontAwesomeIcon icon={faProjectDiagram} />}
+ external />;
+
+ const linkFound = menuItems.find(obj => obj.key === "linkCalculation");
+
+ if (linkFound) {
+ const index = menuItems.indexOf(linkFound);
+ menuItems.splice(index + 1, 0, transportPCELink);
+ } else {
+ menuItems.push(transportPCELink);
+ }
}
+
return (
<Drawer