Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Improve documentation of the showTooltip prop in various components #66523

Open
2 of 6 tasks
afercia opened this issue Oct 28, 2024 · 3 comments
Open
2 of 6 tasks

Improve documentation of the showTooltip prop in various components #66523

afercia opened this issue Oct 28, 2024 · 3 comments
Labels
[Package] Components /packages/components [Type] Developer Documentation Documentation for developers

Comments

@afercia
Copy link
Contributor

afercia commented Oct 28, 2024

Description

Splitting this out from #60908 (comment)

It would be good to add some guidance about its effective usage, specifically in combination with the case when the 'Show button text labels' preferences (showIconLabels) is enabled. It's worth considering explaining the a11y best practices that surround this and help to guide future contributors.

It's wirth reminding that when showIconLabels is enabled, icon buttons switch to show visible text and in this case showing a tooltip that just repeats the visible text is unnecessary clutter. Example:

Screenshot 2024-04-19 at 15 22 29

Cc @getdave

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Package] Components /packages/components [Type] Developer Documentation Documentation for developers labels Oct 28, 2024
@afercia
Copy link
Contributor Author

afercia commented Oct 28, 2024

Occurrences found in the documentation:

packages/components/src/button/README.md:
  252: #### `showTooltip`: `boolean`

packages/components/src/range-control/README.md:
  324: ### `showTooltip`: `boolean`

packages/components/src/toggle-group-control/toggle-group-control-option/README.md:
  51: ### `showTooltip`: `boolean`

packages/components/src/toggle-group-control/toggle-group-control-option-base/README.md:
  23: ### `showTooltip`: `boolean`

@Vrishabhsk
Copy link
Contributor

Hi @afercia 👋

  • I have raised a PR to improve the docs for Button, Toggle Group Control (option & option-base) : #66673

Doubts

  • When I implemented the Button component and enabled the showIconLabels preference, the button did not change
  • After some evaluation, found that the styles responsible for this behavior are only limited to a few of the editor selectors. Is this expected?
  • Also for rangeControl, the prop is for either forcing the tooltip to show/hide which is out-of-scope in relation to the showIconLabels preference, so I have ignored it for now. Let me know if I'm mistaken here.

Let me know your thoughts on this. Thanks

@afercia
Copy link
Contributor Author

afercia commented Nov 5, 2024

After some evaluation, found that the styles responsible for this behavior are only limited to a few of the editor selectors. Is this expected?

Yes, unfortunately the showIconLabels implementation is partial, so far. A while ago I created #61763 to explore some more solid implementation but there hasn't been much movement so far.

Also for rangeControl, the prop is for either forcing the tooltip to show/hide

Yes right, in this case the tooltip is useed to show the value while dragging the range 'thub'. Unrelated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

No branches or pull requests

2 participants