Add aria-labels

[ccsdk/features.git] / sdnr / wt / odlux / framework / src / components / material-table / tableFilter.tsx

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 e21855a..5aefac4 100644 (file)
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableFilter.tsx
@@ -1,3 +1,20 @@
+/**
+ * ============LICENSE_START========================================================================
+ * ONAP : ccsdk feature sdnr wt odlux
+ * =================================================================================================
+ * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
+ * =================================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * ============LICENSE_END==========================================================================
+ */
 
 import * as React from 'react';
 import { ColumnModel, ColumnType } from './columnModel';
@@ -16,8 +33,11 @@ const styles = (theme: Theme) => createStyles({
     flexWrap: 'wrap',
   },
   input: {
-    margin: theme.spacing.unit,
+    margin: theme.spacing(1),
   },
+  numberInput: {
+    float: "right"
+  }
 });
 
 interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
@@ -28,7 +48,7 @@ interface IEnhancedTableFilterComponentProps extends WithStyles<typeof styles> {
 }
 
 class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterComponentProps> {
-  createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement|HTMLSelectElement|HTMLTextAreaElement>) => {
+  createFilterHandler = (property: string) => (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
     this.props.onFilterChanged && this.props.onFilterChanged(property, event.target.value);
   };
 
@@ -36,33 +56,34 @@ class EnhancedTableFilterComponent extends React.Component<IEnhancedTableFilterC
     const { columns, filter, classes } = this.props;
     return (
       <TableRow>
-         { this.props.enableSelection
-           ? <TableCell padding="checkbox" style={ { width: "50px" } }>
-             </TableCell>
-           : null
-         }
-        { columns.map(col => {
+        {this.props.enableSelection
+          ? <TableCell padding="checkbox" style={{ width: "50px" }}>
+          </TableCell>
+          : null
+        }
+        {columns.map((col, ind) => {
           const style = col.width ? { width: col.width } : {};
           return (
             <TableCell
-              key={ col.property }
-              padding={ col.disablePadding ? 'none' : 'default' }
-              style={ style }
+              className={col.type === ColumnType.numeric ? classes.numberInput : ''}
+              key={col.property}
+              padding={col.disablePadding ? 'none' : 'default'}
+              style={style}
             >
-              { col.disableFilter || (col.type === ColumnType.custom)
+              {col.disableFilter || (col.type === ColumnType.custom)
                 ? null
                 : (col.type === ColumnType.boolean)
-                  ? <Select className={classes.input} 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}>
+                  ? <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 value={true as any as string}>{ col.labels ? col.labels["true"]:"true"}</MenuItem>
-                    <MenuItem value={false as any as string}>{ col.labels ? col.labels["false"] : "false"}</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': '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) }
+        }, this)}
       </TableRow>
     );
   }