feat: improved accessebillity qb core filters

Solved: ARIA IDs are not unique Solved: Form elements do not have associated labels Solved: attributes on active, focusable elements are not unique
zimmerman-team · Nov 5, 2020 · 8792b75 · 8792b75
1 parent 95e520a
commit 8792b75
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 12 deletions.
diff --git a/src/app/components/common/FieldInputLabel/index.tsx b/src/app/components/common/FieldInputLabel/index.tsx
@@ -4,6 +4,7 @@ import InputLabel from '@material-ui/core/InputLabel';
 
 type Props = {
   label?: string;
+  for: string;
 };
 
 const BaseInputLabel = styled((props) => <InputLabel {...props} />)`

diff --git a/src/app/components/inputs/selects/AsyncSelect/index.tsx b/src/app/components/inputs/selects/AsyncSelect/index.tsx
@@ -49,8 +49,9 @@ async function loadOptions(search, loadedOptions, { page }, pivot) {
 export const AsyncSelect = (props: any) => {
   return (
     <>
-      <FieldInputLabel label={props.label} />
+      <FieldInputLabel for={props.label} label={props.label} />
       <AsyncPaginate
+        id={props.label}
         defaultOptions
         {...props}
         components={{
@@ -67,7 +68,7 @@ export const AsyncSelect = (props: any) => {
         }}
       />
       <HelperBlock>
-        {props.helperText && <FieldInputLabel label={props.helperText} />}
+        {props.helperText && <FieldInputLabel for="" label={props.helperText} />}
         {props.helperTextLink && props.helperTextUrl && (
           <a
             target="_blank"

diff --git a/src/app/components/inputs/selects/ConnectedSelect/index.tsx b/src/app/components/inputs/selects/ConnectedSelect/index.tsx
@@ -41,8 +41,9 @@ export const ConnectedSelect = (props: any) => {
       `}
       data-cy={props.data_cy}
     >
-      <FieldInputLabel label={props.label} data-cy={'select-field-label'} />
+      <FieldInputLabel for={props.label} label={props.label} data-cy={'select-field-label'} />
       <Select
+        id={props.label}
         data-cy={'select'}
         components={{
           MultiValueRemove,
@@ -57,6 +58,7 @@ export const ConnectedSelect = (props: any) => {
       <HelperBlock data-cy={'select-field-help'}>
         {props.helperText && (
           <FieldInputLabel
+            for=""
             label={props.helperText}
             css="color: #717172 !important; font-weight: 300 !important;"
           />

diff --git a/src/app/components/inputs/selects/MultiSelect/index.tsx b/src/app/components/inputs/selects/MultiSelect/index.tsx
@@ -60,7 +60,7 @@ export const MultiSelect = (props: MultiSelectProps) => {
         <>
           <Grid container spacing={2}>
             <Grid item>
-              <FieldInputLabel label={props.label} />
+              <FieldInputLabel for={props.label} label={props.label} />
             </Grid>
             {props.tip && (
               <Grid item>
@@ -72,6 +72,7 @@ export const MultiSelect = (props: MultiSelectProps) => {
       )}
 
       <BaseSelect
+        id={props.label}
         multiple
         value={data}
         onChange={handleChange}

diff --git a/src/app/components/inputs/selects/MultiSelectChip/index.tsx b/src/app/components/inputs/selects/MultiSelectChip/index.tsx
@@ -18,6 +18,7 @@ import { TooltipButton } from 'app/components/inputs/buttons/TooltipButton';
 import { BaseHelperText } from 'app/components/inputs/selects/common/BaseHelperText';
 
 type MultiSelectChipProps = {
+  id?: string;
   label?: string;
   helperText?: string;
   helperTextLink?: string;
@@ -134,7 +135,7 @@ export const MultiSelectChip = (props: MultiSelectChipProps) => {
       {props.label && (
         <Grid container spacing={2}>
           <Grid item>
-            <FieldInputLabel label={props.label} />
+            <FieldInputLabel for={props.label} label={props.label} />
           </Grid>
           {props.tooltip && (
             <Grid item>
@@ -144,7 +145,7 @@ export const MultiSelectChip = (props: MultiSelectChipProps) => {
         </Grid>
       )}
 
-      <Component classes={classes} components={components} isMulti {...props} />
+      <Component id={props.label} classes={classes} components={components} isMulti {...props} />
       <BaseHelperText
         helperText={props.helperText}
         linkText={props.helperTextLink}

diff --git a/src/app/components/inputs/selects/SimpleSelect/index.tsx b/src/app/components/inputs/selects/SimpleSelect/index.tsx
@@ -11,6 +11,7 @@ import './style.css';
 import { BaseHelperText } from '../common/BaseHelperText';
 
 type SimpleSelectProps = {
+  id?: string;
   label?: string;
   helperText?: string;
   helperTextLink?: string;
@@ -64,7 +65,7 @@ export const SimpleSelect = (props: SimpleSelectProps) => {
       {props.label && (
         <Grid container spacing={2}>
           <Grid item>
-            <FieldInputLabel label={props.label} />
+            <FieldInputLabel for={props.label} label={props.label} />
           </Grid>
           {props.tip && (
             <Grid item>
@@ -74,6 +75,7 @@ export const SimpleSelect = (props: SimpleSelectProps) => {
         </Grid>
       )}
       <BaseSelect
+        id={props.label}
         value={values}
         onChange={handleChange}
         MenuProps={{

diff --git a/src/app/components/inputs/selects/common/BaseSelect/index.tsx b/src/app/components/inputs/selects/common/BaseSelect/index.tsx
@@ -5,6 +5,7 @@ import { Spacing } from 'app/theme';
 import { BaseInput } from 'app/components/inputs/selects/common/BaseInput';
 
 type SelectProps = {
+  id: string;
   children?: ReactNode;
   value?: string | number | string[];
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;

diff --git a/src/app/components/inputs/textinputs/DateInputField/index.tsx b/src/app/components/inputs/textinputs/DateInputField/index.tsx
@@ -63,11 +63,11 @@ export const DateField = (props) => {
   return (
     <>
       <Header>
-        <FieldInputLabel label={props.label} />
+        <FieldInputLabel for={props.label} label={props.label} />
         {props.tip && <TooltipButton tip={props.tip} />}
       </Header>
       <BaseComponent
-        id="date"
+        id={props.label}
         label={props.label}
         type="date"
         value={props.value}

diff --git a/src/app/components/inputs/textinputs/IconTextInputFIeld/index.tsx b/src/app/components/inputs/textinputs/IconTextInputFIeld/index.tsx
@@ -18,10 +18,11 @@ type Props = {
 const IconTextInput = (props: Props) => {
   return (
     <>
-      <FieldInputLabel label={props.label} />
+      <FieldInputLabel for={props.label} label={props.label} />
       <FieldBackdrop>
         <Box marginLeft={Spacing.inputSideSpacing} width="100%">
           <SearchInputField
+            id={props.label}
             onChange={props.onChange}
             placeholder={props.placeholder}
             valueStr={props.value as string}

diff --git a/src/app/components/inputs/textinputs/SearchInputField/index.tsx b/src/app/components/inputs/textinputs/SearchInputField/index.tsx
@@ -7,6 +7,7 @@ import ChipInput from 'material-ui-chip-input';
 import { styles } from 'app/components/inputs/textinputs/SearchInputField/styles';
 
 type Props = {
+  id: string;
   valueStr: string;
   onChange: Function;
   placeholder: string;
@@ -51,6 +52,7 @@ export const SearchInputField = (props: Props) => {
 
   return (
     <ChipInput
+      id={props.id}
       fullWidth
       value={chips}
       disableUnderline

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -36,7 +36,6 @@ function App() {
       <Container maxWidth="lg">
         <div
           css={`
-            border: 1px solid red;
             display: flex;
             flex-direction: column;
             justify-content: center;

diff --git a/src/app/modules/querybuilder-module/common/NavigationButton.tsx b/src/app/modules/querybuilder-module/common/NavigationButton.tsx
@@ -11,7 +11,7 @@ export const NavigationButton = (props: NavButtonModel) => {
   return (
     <NavLink
       to={props.path}
-      id="navlink"
+      id={props.label}
       css={`
           display: flex;
           align-items: center;