From 3d8681cde33a44d24c60628893df577cfcb1c8a8 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 18 Jul 2019 13:15:17 -0700 Subject: [PATCH 1/6] tooltip aria consistency --- pages/components/docs/Tooltip.md | 14 ++++++++++++-- src/Tooltip.js | 4 ++-- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md index 8a6306c697d..fcfb9b5e0c4 100644 --- a/pages/components/docs/Tooltip.md +++ b/pages/components/docs/Tooltip.md @@ -2,11 +2,20 @@ The Tooltip component adds a tooltip to add context to elements on the page. The Toolip has a black background by default. +### ⚠️ Usage warning! ⚠️ +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 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 supplemental information. + + + ## Default example ```.jsx - Text with a tooltip + Text with a tooltip ``` @@ -21,7 +30,8 @@ Tooltip components get `COMMON` system props. Read our [System Props](/component | align | String | | Can be either `left` or `right`.| | direction | String | | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw` | Sets where the tooltip renders in relation to the target. | | noDelay | Boolean | | When set to `true`, tooltip appears without any delay | -| text | String | | Text used in `aria-label` (for accessibility). +| aria-label | String | | Text used in `aria-label` (for accessibility). +| text (DEPRECATED, use `aria-label` prop) | String | | Text used in `aria-label` (for accessibility). | wrap | Boolean | | Use `true` to allow text within tooltip to wrap. diff --git a/src/Tooltip.js b/src/Tooltip.js index ca7f27ec1f4..71f07ba49ad 100644 --- a/src/Tooltip.js +++ b/src/Tooltip.js @@ -5,7 +5,7 @@ import styled from 'styled-components' import {COMMON, get} from './constants' import theme from './theme' -function TooltipBase({direction, children, className, text, noDelay, align, wrap}) { +function TooltipBase({direction, children, className, text, noDelay, align, wrap, ...rest}) { const classes = classnames( className, `tooltipped-${direction}`, @@ -14,7 +14,7 @@ function TooltipBase({direction, children, className, text, noDelay, align, wrap wrap && 'tooltipped-multiline' ) return ( - + {children} ) From 180d9034f8da07a5a266e81925a57cd78da3275d Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 18 Jul 2019 13:15:33 -0700 Subject: [PATCH 2/6] yolo --- pages/components/docs/Tooltip.md | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md index fcfb9b5e0c4..38e2f900056 100644 --- a/pages/components/docs/Tooltip.md +++ b/pages/components/docs/Tooltip.md @@ -31,7 +31,6 @@ Tooltip components get `COMMON` system props. Read our [System Props](/component | direction | String | | Can be one of `n`, `ne`, `e`, `se`, `s`, `sw`, `w`, `nw` | Sets where the tooltip renders in relation to the target. | | noDelay | Boolean | | When set to `true`, tooltip appears without any delay | | aria-label | String | | Text used in `aria-label` (for accessibility). -| text (DEPRECATED, use `aria-label` prop) | String | | Text used in `aria-label` (for accessibility). | wrap | Boolean | | Use `true` to allow text within tooltip to wrap. From 71462c3f10c0d7d2164b55ba0bfc61ee2fdae081 Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 18 Jul 2019 13:16:02 -0700 Subject: [PATCH 3/6] update docs --- pages/components/docs/Tooltip.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md index 38e2f900056..cf0877dcf2a 100644 --- a/pages/components/docs/Tooltip.md +++ b/pages/components/docs/Tooltip.md @@ -7,7 +7,7 @@ Tooltips as a UI pattern should be our last resort for conveying information bec 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 supplemental 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 Tooltip on elements with no existing text content, or consider using `title` for supplemental information. From 4751d771032f746e72d1627a4c250008e428e4af Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 18 Jul 2019 13:16:10 -0700 Subject: [PATCH 4/6] typo --- pages/components/docs/Tooltip.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/components/docs/Tooltip.md b/pages/components/docs/Tooltip.md index cf0877dcf2a..48bf6051fac 100644 --- a/pages/components/docs/Tooltip.md +++ b/pages/components/docs/Tooltip.md @@ -1,6 +1,6 @@ # Tooltip -The Tooltip component adds a tooltip to add context to elements on the page. The Toolip has a black background by default. +The Tooltip component adds a tooltip to add context to elements on the page. The Tooltip has a black background by default. ### ⚠️ Usage warning! ⚠️ 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. From 05736b5d9a6eb06770d6846554992a74820b678c Mon Sep 17 00:00:00 2001 From: Emily Plummer Date: Thu, 18 Jul 2019 13:25:34 -0700 Subject: [PATCH 5/6] add aria-label to UnderlineNav --- pages/components/docs/UnderlineNav.md | 14 ++++++++------ src/UnderlineNav.js | 4 ++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/pages/components/docs/UnderlineNav.md b/pages/components/docs/UnderlineNav.md index aac1c171faf..b23c61004c3 100644 --- a/pages/components/docs/UnderlineNav.md +++ b/pages/components/docs/UnderlineNav.md @@ -7,18 +7,20 @@ To use UnderlineNav with [react-router](https://github.com/ReactTraining/react-r ```as={NavLink}``` and omit the ```selected``` prop. This ensures that the NavLink gets ```activeClassName='selected'``` +**Attention:** Make sure to properly label your `UnderlineNav` with an `aria-label` to provide context about the type of navigation contained in `UnderlineNav`. + ## Default example ```.jsx Using {''} - - - Selected + + + Home - Bar - Baz + Documentation + Support ``` @@ -35,7 +37,7 @@ UnderlineNav and UnderlineNav.Link components get `COMMON` system props. Read ou | actions | Node | Place another element, such as a button, to the opposite side of the navigation items.| | align | String | Use `right` to have navigation items aligned right. | | full | Boolean | Used to make navigation fill the width of the container. | -| label | String | Used to set the `aria-label` on the top level `