Merge pull request #1030 from hashicorp/rn/fix/consent-manager-a11y-fixes

Consent Manager & Toggle a11y fixes

Author: RubenSandwich

.changeset/big-beds-promise.md

@@ -0,0 +1,11 @@
+---
+"@hashicorp/react-consent-manager": patch
+"@hashicorp/react-toggle": patch
+---
+
+Fix a variety of accessiblity issuies around the consent manager.
+- Toggles missing accessible names
+- see more/less button missing accessible name
+- allowing ESC to close the dialog
+- removing unneeded headers
+- trapping focus inside consent manager dialog

packages/consent-manager/components/dialog.js

@@ -8,7 +8,7 @@
   Managing preferences dialog
 */
 
-import { Component } from 'react'
+import { Component, createRef } from 'react'
 import getIntegrations from '../util/integrations'
 import Button from '@hashicorp/react-button'
 import Toggle from '@hashicorp/react-toggle'
@@ -33,6 +33,7 @@ export default class ConsentPreferences extends Component {
 
     this.handleFold = this.handleFold.bind(this)
     this.getCategoryToggle = this.getCategoryToggle.bind(this)
+    this.dialogRef = createRef()
   }
 
   componentDidMount() {
@@ -44,6 +45,12 @@ export default class ConsentPreferences extends Component {
     ).then((groupedIntegrations) => {
       this.setState({ groupedIntegrations })
     })
+
+    this.dialogRef.current?.showModal()
+  }
+
+  componentWillUnmount() {
+    this.dialogRef.current?.close()
   }
 
   // Handler for when user toggles a category or individual integration
@@ -106,11 +113,16 @@ export default class ConsentPreferences extends Component {
   // Build each individual category and integration row
   buildCategory(items, name) {
     const categoryItems = items.map((item) => {
+      const categoryItemTitleID = `consent-manager-categoryItemTitle-${item.name}`
+
       return (
         <div className={s.categoryItem} key={item.name}>
-          <header className={s.categoryItemHeader}>
-            <h4 className={s.categoryItemTitle}>{item.name}</h4>
+          <div className={s.categoryItemHeader}>
+            <h4 id={categoryItemTitleID} className={s.categoryItemTitle}>
+              {item.name}
+            </h4>
             <Toggle
+              ariaLabelledBy={categoryItemTitleID}
               onChange={this.handleToggle.bind(this, item.name, item.origin)}
               enabled={Boolean(
                 this.state.consent.loadAll ||
@@ -119,18 +131,24 @@ export default class ConsentPreferences extends Component {
                     this.state.consent[item.origin][item.name])
               )}
             />
-          </header>
+          </div>
           <p className={s.categoryItemDescription}>{item.description}</p>
         </div>
       )
     })
 
+    const categoryHeaderTitleID = `consent-manager-categoryHeaderTitle-${name}`
+    const categoryListID = `consent-manager-categoryHeaderTitle-${name}-list`
+
     return (
       <div className={s.category} key={name}>
-        <header className={s.categoryHeader}>
-          <h3 className={s.categoryHeaderTitle}>{name}</h3>
+        <div className={s.categoryHeader}>
+          <h3 id={categoryHeaderTitleID} className={s.categoryHeaderTitle}>
+            {name}
+          </h3>
           {!this.state.showCategories[name] && (
             <Toggle
+              ariaLabelledBy={categoryHeaderTitleID}
               onChange={this.handleToggle.bind(this, name, 'categories')}
               enabled={
                 this.state.consent.loadAll || this.getCategoryToggle(name)
@@ -145,14 +163,20 @@ export default class ConsentPreferences extends Component {
               this.handleFold(name)
             }}
             aria-label={
-              this.state.showCategories[name] ? 'See less' : 'See more'
+              this.state.showCategories[name]
+                ? `See less in ${name}`
+                : `See more in ${name}`
+            }
+            aria-expanded={this.state.showCategories[name] ? `true` : `false`}
+            aria-controls={
+              this.state.showCategories[name] ? categoryListID : null
             }
           >
             <IconArrowDown24 />
           </button>
-        </header>
+        </div>
         {this.state.showCategories[name] && (
-          <div className={s.categoryFold}>
+          <div className={s.categoryFold} id={categoryListID}>
             <p className={s.categoryFoldDescription}>
               {this.state.categories[name]}
             </p>
@@ -173,12 +197,19 @@ export default class ConsentPreferences extends Component {
     })
 
     return (
-      <div className={s.root} data-testid="consent-mgr-dialog">
+      <dialog
+        aria-labelledby="consent-mgr-dialog-title"
+        className={s.root}
+        data-testid="consent-mgr-dialog"
+        ref={this.dialogRef}
+      >
         {/* Manage preferences dialog */}
         <div className={s.visibleDialog}>
-          <header className={s.dialogHeader}>
-            <h2 className={s.dialogHeaderTitle}>Manage cookies</h2>
-          </header>
+          <div className={s.dialogHeader}>
+            <h2 id="consent-mgr-dialog-title" className={s.dialogHeaderTitle}>
+              Manage cookies
+            </h2>
+          </div>
           <div className={s.dialogBody}>
             <p className={s.dialogBodyIntro}>
               HashiCorp uses data collected by cookies and JavaScript libraries
@@ -224,6 +255,7 @@ export default class ConsentPreferences extends Component {
               }}
             />
             <Button
+              autoFocus
               className={s.saveButton}
               title="Accept all"
               onClick={() => {
@@ -232,7 +264,7 @@ export default class ConsentPreferences extends Component {
             />
           </div>
         </div>
-      </div>
+      </dialog>
     )
   }
 }

packages/consent-manager/components/dialog.module.css

@@ -13,6 +13,7 @@
   justify-content: center;
   align-items: center;
   z-index: 10;
+  background-color: transparent;
 }
 
 .flexCenteredRow {

packages/consent-manager/index.test.js

@@ -82,6 +82,12 @@ const defaultProps = {
   container: '#consent-manager',
 }
 
+beforeAll(() => {
+  HTMLDialogElement.prototype.show = jest.fn()
+  HTMLDialogElement.prototype.showModal = jest.fn()
+  HTMLDialogElement.prototype.close = jest.fn()
+})
+
 test('shows the banner if the forceShow prop is true', () => {
   const { default: ConsentManager } = require('./')
   render(<ConsentManager {...defaultProps} forceShow={true} />)

packages/consent-manager/index.tsx

@@ -52,6 +52,13 @@ export default function ConsentManager(props: ConsentManagerProps) {
     if (props.forceShow) return true
   })
 
+	const closeDialog = () => {
+		document.body.classList.remove('g-noscroll')
+		setShowDialog(false)
+		setShowBanner(false)
+		setPreferences(loadPreferences() ?? {})
+	}
+
   const hasEmptyPreferencesOrVersionMismatch =
     Object.keys(preferences).length === 0 ||
     preferences.version !== props.version
@@ -70,11 +77,7 @@ export default function ConsentManager(props: ConsentManagerProps) {
         return
       }
 
-      // Close all dialogs
-      document.body.classList.remove('g-noscroll')
-      setShowDialog(false)
-      setShowBanner(false)
-      setPreferences(loadPreferences() ?? {})
+      closeDialog()
     },
     [props.version]
   )
@@ -115,6 +118,20 @@ export default function ConsentManager(props: ConsentManagerProps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps -- We only want to run this check once
   }, [])
 
+  const escFunction = useCallback((event) => {
+    if (showDialog && event.key === "Escape") {
+			closeDialog()
+    }
+  }, [showDialog])
+
+  useEffect(() => {
+    document.addEventListener("keydown", escFunction, false)
+
+    return () => {
+      document.removeEventListener("keydown", escFunction, false)
+    }
+  }, [escFunction])
+
   const filteredAdditionalServices = props.additionalServices?.filter(
     (service) => service.shouldLoad === undefined || service.shouldLoad()
   )

packages/toggle/index.js

@@ -10,8 +10,9 @@ import s from './style.module.css'
 export default function Toggle({
   appearance = 'light',
   enabled,
-  onChange = () => {},
+  onChange = () => { },
   disabled = false,
+  ariaLabelledBy,
 }) {
   const [enabledState, setEnabledState] = useState(enabled || false)
 
@@ -30,6 +31,13 @@ export default function Toggle({
     onChange(event.currentTarget.checked)
   }
 
+  const handleKey = (event) => {
+    if (event.key === 'Enter') {
+      setEnabledState(!event.currentTarget.checked)
+      onChange(!event.currentTarget.checked)
+    }
+  }
+
   return (
     <label
       className={classNames(
@@ -40,10 +48,12 @@ export default function Toggle({
       )}
     >
       <input
+        aria-labelledby={ariaLabelledBy}
         type="checkbox"
         role="switch"
         checked={enabledState}
         onChange={handleChange}
+        onKeyDown={handleKey}
         className={s.toggleInput}
         disabled={disabled}
         data-testid="react-toggle"