Accessibility fixes.

fortanix · Jan 21, 2025 · 55e750b · 55e750b
1 parent cc28239
commit 55e750b
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 16 deletions.
diff --git a/src/components/actions/Button/Button.module.scss b/src/components/actions/Button/Button.module.scss
@@ -32,7 +32,7 @@
     align-items: center;
     gap: 0.3ch;
 
-    @include bk.font(bk.$font-family-display, bk.$font-weight-medium);
+    @include bk.font(bk.$font-family-display, bk.$font-weight-semibold);
     /* letter-spacing: 0.1ch; */
     text-transform: uppercase;
 

diff --git a/src/components/containers/Banner/Banner.tsx b/src/components/containers/Banner/Banner.tsx
@@ -149,7 +149,7 @@ export const Banner = Object.assign(
         )}
       >
         {/* Apply `bk-theme--light` on all children (but not the box itself). */}
-        <header className={cx('bk-theme--light', cl['bk-banner__header'])}>
+        <div className={cx('bk-theme--light', cl['bk-banner__header'])}>
           <div className={cx(cl['bk-banner__header__text'])}>
             <strong className={cx(cl['bk-banner__title'])}>
               <BannerVariantIcon variant={variant} className={cx(cl['bk-banner__title__icon'])}/>
@@ -174,7 +174,7 @@ export const Banner = Object.assign(
               </ActionIcon>
             }
           </div>
-        </header>
+        </div>
 
         {!compact && children &&
           <article className={cx('bk-body-text', 'bk-theme--light', cl['bk-banner__message'])}>{children}</article>

diff --git a/src/components/forms/controls/Checkbox/Checkbox.stories.tsx b/src/components/forms/controls/Checkbox/Checkbox.stories.tsx
@@ -22,7 +22,9 @@ export default {
   tags: ['autodocs'],
   argTypes: {
   },
-  args: {},
+  args: {
+    'aria-label': 'Test checkbox',
+  },
   decorators: [
     Story => <form onSubmit={event => { event.preventDefault(); }}><Story/></form>,
   ],

diff --git a/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx b/src/components/forms/controls/DateTimePicker/DateTimePicker.tsx
@@ -60,12 +60,14 @@ export const DateTimePicker = (props: DateTimePickerProps) => {
       )}
     >
       <DatePicker
+        aria-label="Date input"
         selected={date}
         onChange={onChange}
         dateFormat={dateFormat}
         placeholderText={placeholderText}
       />
       <TimePicker
+        aria-label="Time input"
         time={time}
         onUpdate={onTimeUpdate}
         className={cx(cl['bk-date-time-picker--time-picker'])}

diff --git a/src/components/forms/controls/Radio/Radio.stories.tsx b/src/components/forms/controls/Radio/Radio.stories.tsx
@@ -22,7 +22,9 @@ export default {
   tags: ['autodocs'],
   argTypes: {
   },
-  args: {},
+  args: {
+    'aria-label': 'Test radio button',
+  },
   decorators: [
     Story => <form onSubmit={event => { event.preventDefault(); }}><Story/></form>,
   ],

diff --git a/src/components/forms/controls/Switch/Switch.stories.tsx b/src/components/forms/controls/Switch/Switch.stories.tsx
@@ -17,6 +17,7 @@ export default {
   tags: ['autodocs'],
   argTypes: {},
   args: {
+    'aria-label': 'Test switch',
     defaultChecked: true,
   },
   decorators: [

diff --git a/src/components/forms/controls/TimePicker/TimePicker.stories.tsx b/src/components/forms/controls/TimePicker/TimePicker.stories.tsx
@@ -33,7 +33,7 @@ export const TimePickerStory: Story = {
 
     return (
       <div>
-        <TimePicker time={time} onUpdate={setTime}/>
+        <TimePicker aria-label="Example time picker" time={time} onUpdate={setTime}/>
         <p>
           The selected time is: {time.hours}:{time.minutes}
         </p>

diff --git a/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx b/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
@@ -14,6 +14,7 @@ import { DropdownMenuContext, type OptionDef, Option, Action, DropdownMenu } fro
 
 export type AnchorRenderArgs = {
   props: (userProps?: undefined | React.HTMLProps<Element>) => Record<string, unknown>,
+  open: boolean,
   state: DropdownMenuContext,
 };
 export type DropdownMenuProviderProps = Omit<ComponentProps<typeof DropdownMenu>, 'children'> & {
@@ -54,6 +55,7 @@ export const DropdownMenuProvider = Object.assign(
       getReferenceProps,
       getFloatingProps,
       getItemProps,
+      isOpen,
       setIsOpen,
     } = useFloatingElement({
       placement: placement,
@@ -98,7 +100,7 @@ export const DropdownMenuProvider = Object.assign(
       };
 
       if (typeof children === 'function') {
-        return children({ props: anchorProps, state: context });
+        return children({ props: anchorProps, open: isOpen, state: context });
       }
 
       // If a render prop is not used, try to attach it to the element directly.

diff --git a/src/components/tables/DataTable/pagination/Pagination.tsx b/src/components/tables/DataTable/pagination/Pagination.tsx
@@ -46,6 +46,7 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => {
         <Button
           unstyled
           nonactive={!table.canPreviousPage}
+          aria-label="Go to first page"
           className={cx(cl['pager__nav'])}
           onPress={() => {
             table.gotoPage(0)
@@ -58,6 +59,7 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => {
           <Button
             unstyled
             nonactive={!table.canPreviousPage}
+            aria-label="Go to previous page"
             className={cx(cl['pager__nav'])}
             onPress={() => {
               table.previousPage();
@@ -70,6 +72,7 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => {
           <Input
             type="number"
             className={cx(cl['pagination__page-input'])}
+            aria-label={`Current page: ${pageIndexIndicator}`}
             value={pageIndexIndicator}
             max={table.pageCount}
             onChange={(event) => setPageIndexIndicator(Number.parseInt(event.target.value))}
@@ -86,6 +89,7 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => {
           <Button
             unstyled
             nonactive={!table.canNextPage}
+            aria-label="Go to next page"
             className={cx(cl['pager__nav'])}
             onPress={() => {
               table.nextPage();
@@ -98,6 +102,7 @@ export const Pagination = ({ pageSizeOptions }: PaginationProps) => {
         <Button
           unstyled
           nonactive={!table.canNextPage}
+          aria-label="Go to last page"
           className={cx(cl['pager__nav'])}
           onPress={() => {
             table.gotoPage(table.pageCount - 1)

diff --git a/src/components/tables/DataTable/pagination/PaginationSizeSelector.module.scss b/src/components/tables/DataTable/pagination/PaginationSizeSelector.module.scss
@@ -14,9 +14,15 @@
     align-items: center;
     gap: bk.$spacing-1;
 
-    .page-size-selector__button {
+    .page-size-selector__trigger {
       color: bk.$theme-pagination-text-default;
       padding: 0;
+
+      &.page-size-selector__trigger--open {
+        .page-size-selector__trigger__icon {
+          rotate: 0.5turn;
+        }
+      }
     }
 
     .page-size-selector__dropdown {

diff --git a/src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx b/src/components/tables/DataTable/pagination/PaginationSizeSelector.tsx
@@ -43,14 +43,18 @@ export const PaginationSizeSelector = (props: PaginationSizeSelectorProps) => {
           />
         ))}
       >
-        {({ props }) => (
+        {({ props, open }) => (
           <Button
             variant="tertiary"
             {...props()}
-            className={cx(cl['page-size-selector__button'])}
+            aria-label={`${table.state.pageSize} rows per page`}
+            className={cx(
+              cl['page-size-selector__trigger'],
+              { [cl['page-size-selector__trigger--open']]: open },
+            )}
           >
             {table.state.pageSize}
-            <Icon icon="caret-down"/>
+            <Icon icon="caret-down" className={cx(cl['page-size-selector__trigger__icon'])}/>
           </Button>
         )}
       </DropdownMenuProvider>

diff --git a/src/components/tables/DataTable/pagination/PaginationStream.module.scss b/src/components/tables/DataTable/pagination/PaginationStream.module.scss
@@ -30,9 +30,10 @@
         padding-right: 0;
 
         display: flex;
+        font-weight: bk.$font-weight-regular;
 
         &:global(.nonactive) {
-          opacity: 0.4;
+          opacity: 0.6;
         }
 
         &.pager__nav--first { --keep: ; }

diff --git a/src/components/tables/DataTable/pagination/PaginationStream.tsx b/src/components/tables/DataTable/pagination/PaginationStream.tsx
@@ -23,9 +23,10 @@ export const PaginationStreamPager = ({ pageSizeOptions }: PaginationStreamPager
   return (
     <div className={cx(cl['pagination__pager'])}>
       <Button unstyled
+        aria-label="First page"
         className={cx(cl['pager__nav'], cl['pager__nav--first'])}
-        onPress={() => { table.gotoPage(0); }}
         nonactive={!table.canPreviousPage}
+        onPress={() => { table.gotoPage(0); }}
       >
         <Icon icon="page-backward"/>
       </Button>

diff --git a/src/components/tables/DataTable/plugins/useRowSelectColumn.tsx b/src/components/tables/DataTable/plugins/useRowSelectColumn.tsx
@@ -19,13 +19,13 @@ export const useRowSelectColumn = <D extends object>(hooks: ReactTable.Hooks<D>)
       Header: ({ getToggleAllPageRowsSelectedProps }) => {
         const { checked, onChange } = getToggleAllPageRowsSelectedProps();
         return (
-          <Checkbox checked={checked} onChange={onChange}/>
+          <Checkbox aria-label="Select all rows" checked={checked} onChange={onChange}/>
         );
       },
       Cell: ({ row }: ReactTable.CellProps<D, null>) => {
         const { checked, onChange } = row.getToggleRowSelectedProps();
         return (
-          <Checkbox checked={checked} onChange={onChange}/>
+          <Checkbox aria-label="Select row" checked={checked} onChange={onChange}/>
         );
       },
     },

diff --git a/src/layouts/AppLayout/Header/Header.tsx b/src/layouts/AppLayout/Header/Header.tsx
@@ -18,7 +18,9 @@ export type HeaderProps = React.PropsWithChildren<ComponentProps<'header'> & {
 export const Header = ({ children, unstyled, ...propsRest }: HeaderProps) => {
   return (
     <header
-      role="banner"
+      // Note: `<header>` has an implicit default role of "banner", if it is not inside a `<section>` element
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
+      //role="banner"
       {...propsRest}
       className={cx(
         'bk',