Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(Truncate, Progress): enable truncated tooltip via keyboard #11731

Open
wants to merge 4 commits into
base: main
Choose a base branch
from

Conversation

kmcfaul
Copy link
Contributor

@kmcfaul kmcfaul commented Mar 31, 2025

What: Closes #11384

Progress:

  • Adds a tabIndex to allow keyboard focus and an updateTooltip handler to also trigger the tooltip creation. The useEffect block is there to refocus the title text after the state updates and rerenders with the tooltip.

Truncate:

  • Addes a tabIndex to the subparent to allow keyboard focus
  • Updates Tooltip to remove wrapping contents div & updates parentElement logic to account for the removal

@patternfly-build
Copy link
Contributor

patternfly-build commented Mar 31, 2025

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Unless you want to take a stab at it testing can be handled as part of the unit test revamp epic. Only nit is the handler naming being onFocus for both mouse enter and focus, but something like onFocusAndMouseEnter may be bit much.

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Forgot the original issue is for Truncate and Progress. Can you add similar logic for the Truncate component, or we can open a followup for that since we should add tests for that more immediately

@kmcfaul
Copy link
Contributor Author

kmcfaul commented Apr 7, 2025

Ah I misread the original issue, will update to add Truncate

@kmcfaul
Copy link
Contributor Author

kmcfaul commented Apr 7, 2025

Instead of onFocus would something like checkTruncate or another purpose-driven rather than trigger-driven name work better?

@thatblindgeye
Copy link
Contributor

Ah I misread the original issue, will update to add Truncate

At least you weren't the one to write the issue and also misread 😆

And 👍🏼 to the rename

@kmcfaul kmcfaul changed the title fix(Progress): enable truncated tooltip via keyboard fix(Truncate, Progress): enable truncated tooltip via keyboard Apr 7, 2025
@kmcfaul
Copy link
Contributor Author

kmcfaul commented Apr 7, 2025

Updated. As far as testing, what do you think is the best approach for testing this out? The Truncate tests are mocked out such that the tooltip is always rendered so I'm a little confused on how to check that the tooltip isn't visible by default or with large parent widths / changes state on resize or trigger

@thatblindgeye
Copy link
Contributor

We could probably get away with trying to test for 1) tabindex not ebing set by default and 2) tabindex being set when truncate is intended to occur. Otherwise an integration test might be the next best way and just checking the tooltip is triggered and the content can be focused

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For real this time

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug - Truncate/Progress - truncated content cannot be focused via keyboard
3 participants