From 13b4e6b70e2db781768abe4f10a98f5be2269316 Mon Sep 17 00:00:00 2001 From: Kate Higa <16447748+khiga8@users.noreply.github.com> Date: Tue, 20 Jun 2023 13:34:07 -0400 Subject: [PATCH] Update app/components/primer/alpha/tooltip.rb Co-authored-by: Cameron Dutro --- app/components/primer/alpha/tooltip.rb | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/components/primer/alpha/tooltip.rb b/app/components/primer/alpha/tooltip.rb index aa19a1dcfb..2da8f9554f 100644 --- a/app/components/primer/alpha/tooltip.rb +++ b/app/components/primer/alpha/tooltip.rb @@ -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