feat: filter accessible #123

Kuechlin · Dec 6, 2022 · 9c9958e · 9c9958e
1 parent 68f53c7
commit 9c9958e
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 7 deletions.
diff --git a/src/ColumnFilter.tsx b/src/ColumnFilter.tsx
@@ -67,8 +67,15 @@ export const ColumnFilter = ({ column, className, color }: ColumnFilterProps) =>
             <Element filter={state.value} onFilterChange={change} />
 
             <Group position="apart">
-              <Button children={<X />} color="gray" onClick={clear} compact type="reset" />
-              <Button children={<Check />} onClick={save} compact variant="outline" type="submit" />
+              <Button children={<X />} color="gray" onClick={clear} compact type="reset" aria-label="Reste Filter" />
+              <Button
+                children={<Check />}
+                onClick={save}
+                compact
+                variant="outline"
+                type="submit"
+                aria-label="Save Filter"
+              />
             </Group>
           </Stack>
         )}

diff --git a/src/filters/booleanFilter.tsx b/src/filters/booleanFilter.tsx
@@ -78,9 +78,9 @@ export const createBooleanFilter = ({
       <>
         {title && <Text>{title}</Text>}
         {variant === 'segmented' ? (
-          <BooleanSegmentedInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} />
+          <BooleanSegmentedInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} aria-label="Filter value" />
         ) : (
-          <BooleanRadioInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} />
+          <BooleanRadioInput trueLabel={trueLabel} falseLabel={falseLabel} {...props} aria-label="Filter value" />
         )}
       </>
     );

diff --git a/src/filters/dateFilter.tsx b/src/filters/dateFilter.tsx
@@ -1,9 +1,9 @@
 import { Checkbox, Select, Text } from '@mantine/core';
-import { DatePicker, DateRangePicker, DateRangePickerValue, TimeInput, TimeRangeInput } from '@mantine/dates';
+import { DatePicker, DateRangePicker, TimeInput, TimeRangeInput } from '@mantine/dates';
 import dayjs from 'dayjs';
-import { Filter } from 'tabler-icons-react';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import { Filter } from 'tabler-icons-react';
 import { DataGridFilterFn, DataGridFilterProps } from '../types';
 
 dayjs.extend(isSameOrBefore);
@@ -185,6 +185,7 @@ export const createDateFilter = ({
             value={filter.op || DateFilterOperator.Equals}
             onChange={(op: DateFilterOperator) => onFilterChange({ ...filter, op })}
             withinPortal
+            aria-label="Filter Operator select"
           />
         )}
 
@@ -201,6 +202,7 @@ export const createDateFilter = ({
               placeholder={placeholder}
               onFilterChange={onFilterChange}
               withTime={filter.withTime ?? false}
+              aria-label="Filter value"
             />
           </>
         ) : (
@@ -209,6 +211,7 @@ export const createDateFilter = ({
             placeholder={placeholder}
             onFilterChange={onFilterChange}
             withTime={filter.withTime ?? false}
+            aria-label="Filter value"
           />
         )}
       </>

diff --git a/src/filters/numberFilter.tsx b/src/filters/numberFilter.tsx
@@ -105,6 +105,7 @@ export const createNumberFilter = ({
             value={filter.op || NumberFilterOperator.Equals}
             onChange={handleFilterChange}
             withinPortal
+            aria-label="Filter Operator select"
           />
         )}
 
@@ -120,6 +121,7 @@ export const createNumberFilter = ({
             placeholder={placeholder}
             rightSection={isBetweenFilter(filter.op) ? null : <Filter size={20} />}
             hideControls
+            aria-label="Filter value"
           />
           {isBetweenFilter(filter.op) && (
             <NumberInput
@@ -132,6 +134,7 @@ export const createNumberFilter = ({
               }
               placeholder={placeholder}
               hideControls
+              aria-label="Filter value"
             />
           )}
         </Group>

diff --git a/src/filters/stringFilter.tsx b/src/filters/stringFilter.tsx
@@ -69,6 +69,7 @@ export const createStringFilter = ({
             value={filter.op || StringFilterOperator.Includes}
             onChange={(op) => onFilterChange({ ...filter, op: op as StringFilterOperator })}
             withinPortal
+            aria-label="Filter Operator select"
           />
         )}
 
@@ -77,6 +78,7 @@ export const createStringFilter = ({
           onChange={(e) => onFilterChange({ ...filter, value: e.target.value })}
           placeholder={placeholder}
           rightSection={<Filter size={20} />}
+          aria-label="Filter value"
         />
       </>
     );