Consent Manager & Toggle a11y fixes

[RubenSandwich]

🎟️ Asana Tasks

• [TF VPAT A11Y] Cookie manager modal does not respond to the ESC key
• [TF VPAT A11Y] Cookie manager modal has multiple banner landmarks
• [TF VPAT A11Y] Consent manager - Indistinguishable “see more” buttons
• [TF VPAT A11Y] Switch toggles missing accessible name
• [TF VPAT A11Y] Switches missing keyboard interactions

Description

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

Testing 🚀

1. Load up dev-portal
2. Update @hashicorp/react-consent-manager to this branch:

   npm install 'https://gitpkg.now.sh/hashicorp/react-components/packages/consent-manager?rn/fix/consent-manager-a11y-fixes'

3. Start dev-portal in an incognito window (so you can open the consent manager)
4. Test the following
   1. esc closes the modal
   2. tab is "focus trapped" in the modal and will not exit it
   3. The more/less and toggle buttons now have accessible names
   4. The toggle button responds to both space and enter
   5. The modal no longer has any <header> tags within it

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-components	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 18, 2024 6:30pm

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: bf4220ce338261a1f8baa8b03c2a09b8be6c06ea

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

| Name | Type | | -------------------------------- | ----- | | @hashicorp/react-consent-manager | Patch | | @hashicorp/react-toggle | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR