chore(multiple components): updated arialabel on unsupported divs

[thatblindgeye]

What: Closes #5897

Wizard examples

Will open up codemod issues for the below depending on if there are any changes made.

• Alert: Re-implemented the fix from chore: fix various a11y violations in examples (2) #7604 - was considering having roles of region/alert/status added depending on use case (region for static alerts on page load, alert/status for alerts that dynamically render), but something like that may depend on how we intend for Alert and Alert Group to be used, i.e. Alerts should always go in an Alert Group or not
• Wizard / Wizard Next: added logic to conditionally render aria labeling attributes only if a scrollbar is present (and add 'role="region"` if the Wizard body is a div)
• Menu / MenuList: Removed the arialabel from Menu and added it to MenuList
• MenuItem: Conditionally applied arialabel to either the internal li or Component element, depending on if hasCheckbox is true
• PageGroup / PageNavigation updated logic so arialabel only applies when hasOverflowScroll is true
  • For PageNavigation, it might make sense to remove/deprecate aria-label and hasOverflowScroll and instead have the overflow styling applied directly to the Nav component. Right now with this setup, the "Group section" Page example has some extraneous focus happening. In a vertical nav with scrollbar the focus should end up within the scrollable region via nav items in order to scroll via keyboard
• ProgressStep (in ProgressStepper component): made the aria-labelledby apply only when popoverRender is passed

Additional issues:

[patternfly-build]

Preview: https://patternfly-react-pr-8649.surge.sh

A11y report: https://patternfly-react-pr-8649-a11y.surge.sh

[nicolethoen]

@jeffpuzzo @thatblindgeye
I thought I was losing my mind, but the kitchen sink example you updated in this PR, it's no longer in the docs anymore, right? Though It is referenced from the Custom Footer example.

[thatblindgeye]

@nicolethoen Ah yeah that's true. As a quick fix I can delete the KitchenSink example and remove the link reference to it. If we want to go another route (add back in KitchenSink?) I'd be happy to go with that, though.

[jpuzz0]

@nicolethoen Ah yeah that's true. As a quick fix I can delete the KitchenSink example and remove the link reference to it. If we want to go another route (add back in KitchenSink?) I'd be happy to go with that, though.

It looks like KitchenSink was maybe added back as a part of a rebase of v5. @thatblindgeye It should be removed. Also, I had this change locally, which I think you could make here to cut ties with it altogether (in the Next wizard's markdown for examples):

[nicolethoen]

is there any reason we should be demonstrating this feature somewhere in the examples since the kitchen sink example is gone? Or will documentation like props descriptions and the accessibility docs be enough?

[thatblindgeye]

is there any reason we should be demonstrating this feature somewhere in the examples since the kitchen sink example is gone? Or will documentation like props descriptions and the accessibility docs be enough?

@nicolethoen The description + future a11y docs should cover it, but I updated the basic examples for Wizard/Wizard Next to create that scrollbar for the first step since it doesn't hurt to showcase.

[jessiehuff]

LGTM! Thanks for answering all my questions offline. :) I also tested the Alert specifically in JAWS because I know it can be finicky. It seemed to work ok. I could also test the AlertGroup or any of the other components if we're worried about them.