summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components
diff options
context:
space:
mode:
authorAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-11-30 18:51:52 +0100
committerAijana Schumann <aijana.schumann@highstreet-technologies.com>2020-11-30 18:55:38 +0100
commitc6f98d59285656f179eea80662e86f7cf5329e59 (patch)
tree384d7bcb8061cea40599f45874a51e6f11a1759c /sdnr/wt/odlux/framework/src/components
parentf88794b887842911b30a75afc53f87f660d1c1e7 (diff)
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
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components')
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/index.tsx9
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx4
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx3
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx9
-rw-r--r--sdnr/wt/odlux/framework/src/components/objectDump/index.tsx56
5 files changed, 58 insertions, 23 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 c5be81914..f6d0b0d47 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/index.tsx
@@ -118,7 +118,7 @@ type MaterialTableComponentBaseProps<TData> = WithStyles<typeof styles> & {
disableFilter?: boolean;
customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
onHandleClick?(event: React.MouseEvent<HTMLTableRowElement>, rowData: TData): void;
- createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr" >>>[];
+ createContextMenu?: (row: TData) => React.ReactElement<MenuItemProps | DividerTypeMap<{}, "hr">, React.ComponentType<MenuItemProps | DividerTypeMap<{}, "hr">>>[];
};
type MaterialTableComponentPropsWithRows<TData = {}> = MaterialTableComponentBaseProps<TData> & { rows: TData[]; asynchronus?: boolean; };
@@ -162,7 +162,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
const rowsPerPage = isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.rowsPerPage || 10 : 10;
this.state = {
- contextMenuInfo: {index : -1 },
+ contextMenuInfo: { index: -1 },
filter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.filter || {} : {},
showFilter: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.showFilter : false,
loading: isMaterialTableComponentPropsWithRowsAndRequestData(this.props) ? this.props.loading : false,
@@ -234,7 +234,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
}}
role="checkbox"
aria-checked={isSelected}
- aria-label={`${(this.props.tableId ? this.props.tableId : 'table')}-row`}
+ aria-label="table-row"
tabIndex={-1}
key={entryId}
selected={isSelected}
@@ -250,7 +250,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
col => {
const style = col.width ? { width: col.width } : {};
return (
- <TableCell key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} style={style}>
+ <TableCell aria-label={col.title? col.title.toLowerCase().replace(/\s/g, "-") : col.property.toLowerCase().replace(/\s/g, "-")} key={col.property} align={col.type === ColumnType.numeric && !col.align ? "right" : col.align} style={style}>
{col.type === ColumnType.custom && col.customControl
? <col.customControl className={col.className} style={col.style} rowData={entry} />
: col.type === ColumnType.boolean
@@ -283,6 +283,7 @@ class MaterialTableComponent<TData extends {} = {}> extends React.Component<Mate
count={rowCount}
rowsPerPage={rowsPerPage}
page={page}
+ aria-label="table-pagination-footer"
backIconButtonProps={{
'aria-label': 'previous-page',
}}
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
index 76f778eb4..5aefac445 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -73,14 +73,14 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
{col.disableFilter || (col.type === ColumnType.custom)
? null
: (col.type === ColumnType.boolean)
- ? <Select className={classes.input} aria-label={col.title ? (col.title as string).toLowerCase() + ' filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
+ ? <Select className={classes.input} aria-label={col.title ? (col.title as string).toLowerCase().replace(/\s/g, "-") + '-filter' : `${ind + 1}-filter`} value={filter[col.property] !== undefined ? filter[col.property] : ''} onChange={this.createFilterHandler(col.property)} inputProps={{ name: `${col.property}-bool`, id: `${col.property}-bool` }} >
<MenuItem value={undefined} aria-label="none-value" >
<em>None</em>
</MenuItem>
<MenuItem aria-label="true-value" value={true as any as string}>{col.labels ? col.labels["true"] : "true"}</MenuItem>
<MenuItem aria-label="false-value" value={false as any as string}>{col.labels ? col.labels["false"] : "false"}</MenuItem>
</Select>
- : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? (col.title as string).toLowerCase() + ' filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
+ : <Input className={classes.input} inputProps={{ 'aria-label': col.title ? (col.title as string).toLowerCase().replace(/\s/g, "-") + '-filter' : `${ind + 1}-filter` }} value={filter[col.property] || ''} onChange={this.createFilterHandler(col.property)} />}
</TableCell>
);
}, this)}
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 59dc49c50..96bcbf375 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -130,6 +130,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
)}
<Tooltip title="Actions">
<IconButton color="inherit"
+ aria-label={buttonPrefix +"additional-actions-button"}
aria-owns={open ? 'menu-appbar' : undefined}
aria-haspopup="true"
onClick={this.handleMenu} >
@@ -138,7 +139,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
</Tooltip>
<Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} >
- <MenuItem onClick={this.props.onExportToCsv}>Export as CSV</MenuItem>
+ <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem>
</Menu>
</div>
</Toolbar>
diff --git a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
index adf0b8e5a..e62b42472 100644
--- a/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-ui/treeView.tsx
@@ -18,7 +18,7 @@
import * as React from 'react';
import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
-import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit } from '@material-ui/core';
+import { List, ListItem, TextField, ListItemText, ListItemIcon, WithTheme, withTheme, Omit, Typography } from '@material-ui/core';
import { SvgIconProps } from '@material-ui/core/SvgIcon';
import FileIcon from '@material-ui/icons/InsertDriveFile';
@@ -62,7 +62,7 @@ type TreeViewComponentState<TData = { }> = {
expandedItems: ExternalTreeItem<TData>[];
/** The index of the active iten or undefined if no item is active. */
activeItem?: ExternalTreeItem<TData>;
- /** The search term or undefined if search is corrently not active. */
+ /** The search term or undefined if search is currently not active. */
searchTerm?: string;
searchTermValue?: string;
}
@@ -153,7 +153,8 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
return (
<div className={this.props.className ? `${this.props.classes.root} ${this.props.className}` : this.props.classes.root} style={this.props.style}>
{children}
- {enableSearchBar && <TextField label={"Search"} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null}
+ {enableSearchBar && <TextField label={"Search"} inputProps={{'aria-label': 'treeview-searchfield'}} fullWidth={true} className={this.props.classes.search} value={searchTermValue} onKeyDown={this.onSearchKeyDown} onChange={this.onChangeSearchText} /> || null}
+ {enableSearchBar && (searchTerm === undefined || searchTerm.length===0 )&& <Typography style={{marginTop:'10px'}}>Please search for an inventory identifier or use *.</Typography>}
<List>
{this.renderItems(items, searchTerm && searchTerm.toLowerCase())}
</List>
@@ -216,7 +217,7 @@ class TreeViewComponent<TData = { }> extends React.Component<TreeViewComponentPr
return ((searchTerm && (matchIndex > -1 || expanded || (!isTreeViewComponentWithExternalStateProps(this.props) && item.isMatch || depth === 1)) || !searchTerm || forceRender)
? (
- <ListItem key={`tree-list-${this.itemIndex++}`} style={styles.item} onClick={handleClickCreator(false)} button >
+ <ListItem key={`tree-list-${this.itemIndex++}`} aria-label="tree-view-item" style={styles.item} onClick={handleClickCreator(false)} button >
{ // display the left icon
(this.props.useFolderIcons && <ListItemIcon>{isFolder ? <FolderIcon /> : <FileIcon />}</ListItemIcon>) ||
diff --git a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
index d449f5cd3..d2de7cc02 100644
--- a/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
+++ b/sdnr/wt/odlux/framework/src/components/objectDump/index.tsx
@@ -70,20 +70,50 @@ const useSimpleTableStyles = makeStyles({
color: "white",
padding: "5px",
backgroundColor: "#cccccc",
+
},
td: {
verticalAlign: "top",
padding: "0.5rem 1rem",
- borderBottom: "2px solid #DDD"
+ border: "2px solid #DDD"
},
object: {
},
objectTh: {
- backgroundColor: "#4444cc",
+ backgroundColor: "#cccccc",
},
objectTd: {
padding: "0.5rem 1rem",
- borderBottom: "2px solid #DDD"
+ border: "2px solid #DDD"
+ },
+ chevron: {
+ '&:before': {
+ borderStyle: 'solid',
+ borderWidth: '0.25em 0.25em 0 0',
+ content: '\'\'',
+ display: 'inline-block',
+ height: '0.45em',
+ left: '0.15em',
+ position: 'relative',
+ top: '0.15em',
+ transform: 'rotate(-45deg)',
+ transition: 'all 0.3s',
+ verticalAlign: 'top',
+ width: '0.45em',
+ }
+
+ },
+ right: {
+ '&:before': {
+ left: '0',
+ transform: 'rotate(45deg)',
+ }
+ },
+ bottom: {
+ '&:before': {
+ left: '0',
+ transform: 'rotate(135deg)',
+ }
},
});
@@ -93,6 +123,7 @@ type SimpleTableProps = {
label?: JSX.Element | string | null;
cols?: number;
expand?: boolean;
+ ariaLabel?: string;
}
const SimpleTable: React.FC<SimpleTableProps> = (props) => {
@@ -110,11 +141,11 @@ const SimpleTable: React.FC<SimpleTableProps> = (props) => {
};
return (
- <table className={`${classes.root} ${classes.table}`}>
+ <table className={`${classes.root} ${classes.table}`} aria-label={props.ariaLabel? props.ariaLabel+'-table' : 'table'}>
{label && (<thead>
- <tr>
+ <tr aria-label={props.ariaLabel? props.ariaLabel+'-title-row' : 'title row'}>
<th className={`${classes.th} ${classes.label} ${classNameTh ? classNameTh : ''}`} colSpan={cols} onClick={handleClick}>
- {label}
+ <span className={`${classes.chevron} ${isExpanded ? classes.bottom : classes.right }`}></span> { label }
</th>
</tr>
</thead>) || null
@@ -130,6 +161,7 @@ type ObjectRendererProps = {
label?: JSX.Element | string | null;
expand?: boolean;
object: { [key: string]: any };
+ ariaLabel?: string;
};
const ObjectRenderer: React.FC<ObjectRendererProps> = (props) => {
@@ -137,13 +169,13 @@ const ObjectRenderer: React.FC<ObjectRendererProps> = (props) => {
const classes = useSimpleTableStyles();
return (
- <SimpleTable classNameTh={classes.objectTh} label={getTypeName(object) || label} expand={expand}>
+ <SimpleTable ariaLabel={props.ariaLabel} classNameTh={classes.objectTh} label={getTypeName(object) || label} expand={expand}>
{
Object.keys(object).map(key => {
return (
- <tr key={String(key)}>
- <td className={`${classes.td} ${classes.objectTd}`}>{String(key)} </td>
- <td className={`${classes.td}`}>{renderObject(object[key])}</td>
+ <tr key={String(key)} aria-label={props.ariaLabel? props.ariaLabel+'-row': 'row'}>
+ <td className={`${classes.td} ${classes.objectTd}`} aria-label="object-title">{String(key)} </td>
+ <td className={`${classes.td}`} aria-label="object-details">{renderObject(object[key], "sub-element")}</td>
</tr>
);
})
@@ -165,9 +197,9 @@ const ArrayRenderer: React.FC<ArrayRendererProps> = (props) => {
return null;
};
-export const renderObject = (object: any): JSX.Element | string => {
+export const renderObject = (object: any, ariaLabel?: string): JSX.Element | string => {
if (isString(object) || isNumber(object) || isBoolean(object)) {
return String(object);
}
- return <ObjectRenderer object={object} />;
+ return <ObjectRenderer object={object} ariaLabel={ariaLabel} />;
};