Skip to content

Commit

Permalink
Update app/components/primer/alpha/tooltip.rb
Browse files Browse the repository at this point in the history
Co-authored-by: Cameron Dutro <camertron@gmail.com>
  • Loading branch information
khiga8 and camertron authored Jun 20, 2023
1 parent 154b2a3 commit 13b4e6b
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions app/components/primer/alpha/tooltip.rb
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ module Alpha
# When using a tooltip, follow the provided guidelines to avoid accessibility issues:
# - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
# - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::Beta::Link)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
# - Tooltip text must be brief and concise whether it is a label or a description.
# - Tooltip can only hold string content.
# - Tooltip are not allowed on `disabled` elements due to how `disabled` elements are not keyboard accessible. If you must set a tooltip on a disabled element, use `aria-disabled="true"` and programatically disable the element to ensure the control can be focused.
# - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
# and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
# - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
# - Tooltip text must be brief and concise even when used to display a description.
# - Tooltips can only hold string content.
# - Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled="true"` instead and programmatically disable the element.
# - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only
# and screen reader users. Use of tooltips through <%= link_to_component(Primer::Beta::Button) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::Beta::IconButton) %> will guarantee this.
# - If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.
# content.
#
# Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
Expand Down

0 comments on commit 13b4e6b

Please sign in to comment.