fix: combobox hidden labels and help text describededby attribute and…

… fix token list (#3462) * chore: disable a11y on full composition stories, fix token list * fix(combobox): conditional aria attributes and visually hidden label * chore: changeset --------- Co-authored-by: Shadi <TheSisb@users.noreply.github.com>
twilio-labs · Aug 31, 2023 · f6320be · f6320be
1 parent 6670026
commit f6320be
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 5 deletions.
diff --git a/.changeset/cold-zoos-reflect.md b/.changeset/cold-zoos-reflect.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/combobox': patch
+'@twilio-paste/core': patch
+---
+
+[combobox]: improve the way combobox handles hidden labels and conditional help text related aria attributes for improved accessibility
diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json
@@ -207,6 +207,7 @@
   "ProductSwitcherItem": "@twilio-paste/core/product-switcher",
   "useProductSwitcherState": "@twilio-paste/core/product-switcher",
   "ProgressBar": "@twilio-paste/core/progress-bar",
+  "ProgressBarLabel": "@twilio-paste/core/progress-bar",
   "ProgressStepComplete": "@twilio-paste/core/progress-steps",
   "ProgressStepCurrent": "@twilio-paste/core/progress-steps",
   "ProgressStepError": "@twilio-paste/core/progress-steps",

diff --git a/packages/paste-core/components/combobox/src/helpers.tsx b/packages/paste-core/components/combobox/src/helpers.tsx
@@ -1,6 +1,7 @@
 import type {HelpTextVariants} from '@twilio-paste/help-text';
 import type {InputVariants} from '@twilio-paste/input';
 import groupBy from 'lodash/groupBy';
+import type {BoxStyleProps} from '@twilio-paste/box';
 
 import type {Item} from './types';
 
@@ -39,3 +40,14 @@ export const getHelpTextVariant = (variant: InputVariants, hasError: boolean | u
   }
   return 'default';
 };
+
+export const visuallyHiddenStyles: BoxStyleProps = {
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: 'spaceNegative10',
+  overflow: 'hidden',
+  padding: 'space0',
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: '1px',
+};
diff --git a/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx b/packages/paste-core/components/combobox/src/singleselect/Combobox.tsx
@@ -19,6 +19,7 @@ import {ComboboxItems} from '../ComboboxItems';
 import type {ComboboxProps} from '../types';
 import {extractPropsFromState} from './extractPropsFromState';
 import {ListBoxPositioner} from '../ListboxPositioner';
+import {visuallyHiddenStyles} from '../helpers';
 
 const getHelpTextVariant = (variant: InputVariants, hasError: boolean | undefined): HelpTextVariants => {
   if (hasError && variant === 'inverse') {
@@ -145,11 +146,11 @@ const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
 
     return (
       <Box position="relative" element={`${element}_WRAPPER`}>
-        {!hideVisibleLabel && (
+        <Box {...(hideVisibleLabel && {...visuallyHiddenStyles})}>
           <Label disabled={disabled} required={required} variant={variant} {...getLabelProps()}>
             {labelText}
           </Label>
-        )}
+        </Box>
         <InputBox
           disabled={disabled}
           element={element}
@@ -166,8 +167,7 @@ const Combobox = React.forwardRef<HTMLInputElement, ComboboxProps>(
               {...getInputProps({disabled, required, ref, ...props})}
               {...(!autocomplete ? {onChange: (event: React.ChangeEvent) => event.preventDefault()} : undefined)}
               autocomplete={autocomplete}
-              aria-describedby={helpTextId}
-              aria-label={hideVisibleLabel ? labelText : null}
+              aria-describedby={helpText != null ? helpTextId : null}
               element={`${element}_ELEMENT`}
             />
             {!autocomplete && (

diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -220,7 +220,7 @@ export const TokensList = (): JSX.Element => {
                   {sentenceCase(tokenCategory)}
                 </AnchoredHeading>
                 {sectionIntro}
-                <Box marginBottom="space130" data-cy="tokens-table-container">
+                <Box as="ul" padding="space0" marginBottom="space130" data-cy="tokens-table-container">
                   {categoryTokens ? (
                     categoryTokens.map(({name, value, altValue, comment}) => (
                       <TokenCard