patternfly-elements icon indicating copy to clipboard operation
patternfly-elements copied to clipboard

Published 20 hours ago • verified publisher icon patternfly

[fix] pfe-modal accessibility

Open starryeyez024 opened this issue 4 years ago • 5 comments

  1. The focus does not stay inside the modal
  2. The focus skips the close button

starryeyez024 avatar Aug 26 '19 22:08 starryeyez024

@starryeyez024 - Which version of Firefox are you using? I'm not seeing this issue in Firefox 68.

kylebuch8 avatar Aug 27 '19 13:08 kylebuch8

@starryeyez024 and @kylebuch8, I also don't experience the issues stated here. However, this brings up a couple other issues.

  • The aria-labelledby attribute on the dialog isn't receiving the ID of the heading properly (it's "undefined").
  • The tabindex of the dialog/modal should be -1 instead of 0. This allows for programmatic focus only, and removes the "wrapper" from the normal tab order. PF4 does this much like the majority of the recommended patterns.
  • We should consider/discuss the possibility of allowing the tab focus to travel to the address bar as a future improvement. This hasn't been widely accepted yet (at least to my knowledge), but I've seen a few recommendations here, and I'd like to test this idea at some point.

markcaron avatar Aug 27 '19 14:08 markcaron

Hmm, its FF 65 Quantum, maybe that's why. I updated the title of this issue to simply modal + accessibility so we can address the issues @markcaron brought up.

starryeyez024 avatar Aug 27 '19 14:08 starryeyez024

  • [x] The aria-labelledby attribute on the dialog isn't receiving the ID of the heading properly (it's "undefined").
  • [ ] The tabindex of the dialog/modal should be -1 instead of 0. This allows for programmatic focus only, and removes the "wrapper" from the normal tab order. PF4 does this much like the majority of the recommended patterns. (PR #1735)

We should consider/discuss the possibility of allowing the tab focus to travel to the address bar as a future improvement. This hasn't been widely accepted yet (at least to my knowledge), but I've seen a few recommendations here, and I'd like to test this idea at some point.

Are there any actionable items we can address now or does this require a new issue and further discussion?

castastrophe avatar Jul 30 '21 00:07 castastrophe

I think this is solved in pfe 2.0 but would appreciate some more 👀 on it:

https://patternflyelements.org/components/modal/demo/

bennypowers avatar Feb 23 '22 22:02 bennypowers