fix(DescriptionList): allow help text button popover to open via keyboard #11546
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Preview: https://patternfly-react-pr-11546.surge.sh A11y report: https://patternfly-react-pr-11546-a11y.surge.sh |
thatblindgeye
approved these changes
Feb 19, 2025
There was a problem hiding this comment.
Works great! Not using an actual button element should be fine now since we're covering the logic for keyboard handling.
Would you mind opening a followup to add a Cypress test to check that help text can be triggered via mouse and keyboard? Unless you want to take a stab at it here, just not sure how involved it'll be in Cypress.
|
Opening a followup for now, I don't think this PR needs to wait for the test to go in at least. |
mfrances17
approved these changes
Feb 20, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What: Closes #10846
The issue is due to the help text button actually being a
spanwithrole="button"/tab-index="0", which doesn't have keyboard interaction automatically like a button element does. The popover uses a click event to trigger.This could also be solved by changing the element to a button, but I couldn't get the styling to work out, and I'm not sure it's valid HTML to nest a button inside a dt.