fix(accordion): keyboard a11y

[bennypowers]

Adds unit tests for keyboard accessibility fixes in <pfe-accordion>

Related issues

• (Focus moves inside of collapsed accordion #1779)

Preview

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

• Link

What has changed and why

• use delegatesFocus when attaching <pfe-accordion-header> shadowroot
• unit tests for wai-aria practices

Testing instructions

• Test case 1

  1. npm run test -- --watch --group default --files elements/pfe-accordion/test/pfe-accordion.spec.ts

• Test case 2

  1. npm start
  2. Manual keyboard testing according to wai aria best practices

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!

[bennypowers]

paging @kelsS This PR attempts to fix accordion keyboard a11y within the pfe rewrite, #1804

To try it out for yourself, first ensure you have the prerequisites (nvm recommended) clone the pfe repo

git clone [email protected]:patternfly/patternfly-elements.git

then setup the node version with nvm use and install dependencies

npm ci

run the unit tests on the accordion with

npm run test -- --watch --group default --files elements/pfe-accordion/**/*.spec.ts

run the development server

npm start

I was able to get some of the tests passing with minimal code changes. I have some questions about behaviour before I continue implementing fixes:

1. on the WAI-ARIA practices page (linked above) accordion is specified to close other panels, meaning only 1 panel is ever supposed to be open. Our accordion doesn't work like that, is that intended behaviour?

[bennypowers]

Note to reviewers: at the target branch gets updated, a github action workflow tries (and fails) to update this branch. That makes it hard to find the relevant changes, so I'm linking to the test cases for keyboard accessibility here:

https://github.com/patternfly/patternfly-elements/blob/feat/pfe-accordion-keyboard-a11y/elements/pfe-accordion/test/pfe-accordion.spec.ts#L452-L904

I've also changed this to a draft so it doesn't get merged until it's been reviewed

[bennypowers]

@markcaron helped me understand the authoring practices

Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.

That means our implementation is fine. I'll update my tests

[bennypowers]

I'm going to merge this into #1804 now, further review should proceed there