a11y: UILD-455: Improve WCAG 2.1 AA compliance for Authority lookup c…

…omponent (#56)
folio-org · Dec 16, 2024 · 0911aaf · 0911aaf
1 parent a4c7a4c
commit 0911aaf
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 9 deletions.
diff --git a/src/common/styles/common.scss b/src/common/styles/common.scss
@@ -8,7 +8,7 @@ $blue-700: #255096;
 $blue-600: #2d62b7;
 $blue-800: #1d3f75;
 $gray-200: #d7d8da;
-$gray-400: #8d9095;
+$gray-400: #727272;
 $gray-600: #3d3f42;
 $blue-100: #d8e3f5;
 $blue-400: #6591d9;

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -9,5 +9,9 @@ type ButtonGroupProps = {
 };
 
 export const ButtonGroup = ({ className, fullWidth, children }: ButtonGroupProps) => {
-  return <div className={classNames('button-group', { 'full-width': fullWidth }, className)}>{children}</div>;
+  return (
+    <div role="tablist" className={classNames('button-group', { 'full-width': fullWidth }, className)}>
+      {children}
+    </div>
+  );
 };
diff --git a/src/components/ComplexLookupField/ComplexLookupField.tsx b/src/components/ComplexLookupField/ComplexLookupField.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { IS_EMBEDDED_MODE } from '@common/constants/build.constants';
 import { VALUE_DIVIDER } from '@common/constants/complexLookup.constants';
@@ -20,6 +20,7 @@ interface Props {
 }
 
 export const ComplexLookupField: FC<Props> = ({ value = undefined, id, entry, onChange }) => {
+  const { formatMessage } = useIntl();
   const { layout, htmlId } = entry;
   const lookupConfig = COMPLEX_LOOKUPS_CONFIG[layout?.api as string];
   const buttonConfigLabel = lookupConfig?.labels?.button;
@@ -54,6 +55,7 @@ export const ComplexLookupField: FC<Props> = ({ value = undefined, id, entry, on
                     onClick={() => handleDelete(id)}
                     className="complex-lookup-selected-delete"
                     data-testid="complex-lookup-selected-delete"
+                    aria-label={formatMessage({ id: 'ld.aria.edit.removeComplexLookupFieldValue' })}
                   >
                     <CloseIcon />
                   </button>

diff --git a/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx b/src/components/ComplexLookupField/MarcPreviewComplexLookup.tsx
@@ -19,7 +19,13 @@ export const MarcPreviewComplexLookup: FC<MarcPreviewComplexLookupProps> = ({ on
   const { complexValue: marcPreviewData, metadata: marcPreviewMetadata } = useMarcPreviewState();
 
   const renderCloseButton = () => (
-    <Button data-testid="nav-close-button" type={ButtonType.Icon} onClick={onClose} className="nav-close">
+    <Button
+      ariaLabel={formatMessage({ id: 'ld.aria.complexLookup.marcPreview.close' })}
+      data-testid="nav-close-button"
+      type={ButtonType.Icon}
+      onClick={onClose}
+      className="nav-close"
+    >
       <Times16 />
     </Button>
   );
@@ -60,7 +66,7 @@ export const MarcPreviewComplexLookup: FC<MarcPreviewComplexLookupProps> = ({ on
               </Button>
             </div>
           </SearchControlPane>
-          <div className="marc-preview-content">
+          <div className="marc-preview-content" tabIndex={0}>
             <div className="marc-preview-content-title">
               <FormattedMessage id="ld.marcAuthorityRecord" />
             </div>

diff --git a/src/components/DropdownField/DropdownField.tsx b/src/components/DropdownField/DropdownField.tsx
@@ -42,7 +42,7 @@ export const DropdownField: FC<IDropdownField> = ({
       disabled={isDisabled}
       className="edit-section-field-input dropdown-field"
       data-testid={testId}
-      ariaLabelledby={htmlId}
+      ariaLabelledBy={htmlId}
     />
   );
 };
diff --git a/src/components/Table/TableFlex.tsx b/src/components/Table/TableFlex.tsx
@@ -59,9 +59,9 @@ export const TableFlex = ({ header, data, className, onRowClick, onHeaderCellCli
   };
 
   return (
-    <div data-testid="table" className={classNames(table, tableFlex, className)}>
-      <div ref={tableHeadElemRef} className={tableHead}>
-        <div ref={tableHeadRowElemRef} className={tableRow}>
+    <div role="table" data-testid="table" className={classNames(table, tableFlex, className)}>
+      <div role="rowgroup" ref={tableHeadElemRef} className={tableHead}>
+        <div role="row" ref={tableHeadRowElemRef} className={tableRow}>
           {sortedHeaderEntries.map(([key, { label, className, ...rest }]) => (
             <div
               key={key}
@@ -105,6 +105,7 @@ export const TableFlex = ({ header, data, className, onRowClick, onHeaderCellCli
                       className={classNames('table-cell', className, headerClassName)}
                       data-testid={key}
                       key={key}
+                      role="cell"
                       {...rest}
                     >
                       <div className="table-cell-content">{(children || label) ?? ''}</div>

diff --git a/translations/ui-linked-data/en.json b/translations/ui-linked-data/en.json
@@ -187,6 +187,7 @@
   "ld.searchQueryWouldBeHere": "{query} would be here",
   "ld.continue": "Continue",
   "ld.aria.modal.close": "Close {modalKind} modal",
+  "ld.aria.complexLookup.marcPreview.close": "Close lookup MARC preview section",
   "ld.aria.advancedSearch.queryInput": "Advanced search row query input",
   "ld.aria.advancedSearch.operator": "Advanced search row operator",
   "ld.aria.advancedSearch.qualifier": "Advanced search row qualifier",
@@ -197,6 +198,7 @@
   "ld.aria.edit.close": "Close edit page",
   "ld.aria.edit.deleteComponent": "Delete component",
   "ld.aria.edit.duplicateComponent": "Duplicate component",
+  "ld.aria.edit.removeComplexLookupFieldValue": "Remove complex lookup field value",
   "ld.aria.resourcePreview.close": "Close resource preview pane",
   "ld.aria.externalResourcePreview.close": "Close external resource preview page",
   "ld.aria.marcAuthorityPreview.close": "Close MARC authority preview",