fix: pfe-accordion - fixing issues with accessibility when opening and closing panels (#1813)

[kylebuch8]

Fixes #1813

Fixed issues with panels expanding when headers received focus on keyboard interactions.

Preview

Link(s) to demo page(s) where this element can be viewed:

• Link

What has changed and why

Added the appropriate aria attributes and tabindex attribute to accordion panels when they are collapsed and removed those attributes when the accordion panels are expanded. Also removed the expand method call in the keyboard events section to prevent accordion panels from opening when navigating the accordion with a keyboard.

Testing instructions

1. Go to the accordion demo page
2. Activate an accordion header
3. Expect the associated panel to not have an aria-hidden attribute and a tabindex attribute
4. Deactivate the same accordion header
5. Expect the associated panel to have an aria-hidden="true" attribute and a tabindex="-1"

Browser requirements

Your component should work in all of the following environments:

• Latest 2 versions of Edge
• Internet Explorer 11 (should be useable, not pixel perfect)
• Latest 2 versions of Firefox (one on Mac OS, one of Windows OS)
• Firefox 78 (or latest version for Red Hat Enterprise Linux distribution)
• Latest 2 versions of Chrome (one on Mac OS, one of Windows OS)
• Latest 2 versions of Safari
• Android mobile device (such as the Galaxy S9)
• Apple mobile device (such as the iPhone X)
• Apple tablet device (such as the iPhone Pro)

Ready-for-merge Checklist

• Expected files: all files in this pull request are related to one request or issue (no stragglers or scope-creep).
• Tests have been updated to cover these changes.
• Browser testing passed.
• Changelog updated.
• Documentation (README.md, WHY.md, etc.) updated or added.
• Link to the demo recording:
• Approved by designer.

Merging

Please squash when merging and ensure your commit message uses conventional commit formatting.

Be sure to share your updates with the [email protected] mailing list!

[changeset-bot]

⚠️ No Changeset found

Latest commit: 83336d5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

[netlify]

✔️ Deploy Preview for patternfly-elements ready!

🔨 Explore the source changes: f616e07

🔍 Inspect the deploy log: https://app.netlify.com/sites/patternfly-elements/deploys/61f1bdff5309920007bb2493

😎 Browse the preview: https://deploy-preview-1856--patternfly-elements.netlify.app

[netlify]

✔️ Deploy Preview for patternfly-elements ready!

🔨 Explore the source changes: 83336d5

🔍 Inspect the deploy log: https://app.netlify.com/sites/patternfly-elements/deploys/61f98e6722e4ed0008153203

😎 Browse the preview: https://deploy-preview-1856--patternfly-elements.netlify.app

[kelsS]

LGTM