Focus moves inside of collapsed accordion

[starryeyez024]

Description of the issue

When the keyboard is used to move the focus through a webpage, the focus should not move onto links which are hidden from view.

Expected behavior

The pfe-accordion has collapsed panels which contain links, and so the focus should only move to each heading (and past the hidden links), unless the panel is expanded & visible.

Impacted component(s)

• pfe-accordion

Steps to reproduce

1. Go to https://patternflyelements.com/components/accordion/
2. Click on the Accordion heading at the top of the page (to skip the nav)
3. Hit the tab key several times.
4. Notice that the first accordion header is focused, and then the next time you hit the tab key the focus disappears. This is because it's focused on a link within the first panel. When you hit tab again, the focus will move to the second accordion header.

Screenshots

(the link in the bottom left is an empty anchor link within the hidden panel)

[kelsS]

Hi @heyMP @starryeyez024 @kylebuch8, I am bumping up the priority of this issue. It is causing problems with the new Product Index Page and rendering the component unusable for assistive tech and keyboard navigating.

[bennypowers]

wai-aria example accordion: https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html

Key	Function
Space or Enter	When focus is on the accordion header of a collapsed section, expands the section.
Tab	Moves focus to the next focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab	Moves focus to the previous focusable element. All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow	When focus is on an accordion header, moves focus to the next accordion header. When focus is on last accordion header, moves focus to first accordion header.
Up Arrow	When focus is on an accordion header, moves focus to the previous accordion header. When focus is on first accordion header, moves focus to last accordion header.
Home	When focus is on an accordion header, moves focus to the first accordion header.
End	When focus is on an accordion header, moves focus to the last accordion header.

I'm going to see about putting together some unit tests in #1804, maybe we can solve this there

[kelsS]

@kylebuch8, @bennypowers fixed this issue in ticket 1804.

[bennypowers]

Fixed in 2.0