From 0e97ea6c97cea09fd48d3995baf74f5877981460 Mon Sep 17 00:00:00 2001 From: Mu-An Chiou Date: Wed, 13 Feb 2019 14:14:52 -0500 Subject: [PATCH 1/2] Explain why .tooltipped should be used sparingly --- modules/primer-tooltips/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/modules/primer-tooltips/README.md b/modules/primer-tooltips/README.md index ec73e11e15..06b43e2603 100644 --- a/modules/primer-tooltips/README.md +++ b/modules/primer-tooltips/README.md @@ -47,7 +47,11 @@ Add tooltips built entirely in CSS to nearly any element. ## Implementation and accessibility -**Attention**: we use `aria-label` for tooltips instead of something like `data-tooltip` because it is crucial that the tooltip content is available for screen reader users as well. However, `aria-label` **replaces** the text content of an element for screen reader users, so only use tooltip if there is no better way to present the information, or consider using `title` for supplement information. +Tooltips as a UI pattern should be your last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence. + +Before you add a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default? + +**Attention**: we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content, or consider using `title` for supplement information. **Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon. From df0042429cfdd6381c6d745ed8a41958fcc817ed Mon Sep 17 00:00:00 2001 From: David Graham Date: Thu, 14 Feb 2019 15:40:09 -0500 Subject: [PATCH 2/2] Apply suggested copy changes Co-Authored-By: muan --- modules/primer-tooltips/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/primer-tooltips/README.md b/modules/primer-tooltips/README.md index 06b43e2603..11f8e17cc8 100644 --- a/modules/primer-tooltips/README.md +++ b/modules/primer-tooltips/README.md @@ -47,11 +47,11 @@ Add tooltips built entirely in CSS to nearly any element. ## Implementation and accessibility -Tooltips as a UI pattern should be your last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence. +Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence. -Before you add a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default? +Before adding a tooltip, please consider: Is this information essential and necessary* Can the UI be made clearer? Can the information be shown on the page by default? -**Attention**: we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content, or consider using `title` for supplement information. +**Attention**: we use `aria-label` for tooltip contents, because it is crucial that they are accessible to screen reader users. However, `aria-label` **replaces** the text content of an element in screen readers, so only use `.tooltipped` on elements with no existing text content, or consider using `title` for supplemental information. **Note:** Tooltip classes will conflict with Octicon styles, and as such, must be applied to the parent element instead of the icon.