Skip to content

Commit

Permalink
Icon Tooltip update for WCAG 2.1 compliance (#3115)
Browse files Browse the repository at this point in the history
  • Loading branch information
@asudoh
Elizabeth Judd authored and asudoh committed Jun 27, 2019
1 parent e42e093 commit aea7c65
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 7 deletions.
79 changes: 78 additions & 1 deletion packages/components/src/components/tooltip/tooltip--icon.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,84 @@
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<strong>WCAG 2.1 compliant</strong>
<p>start</p>
<br>
{{!-- @todo Had to add a modifier to the parent to correct the animation but in the next major release it could be removed in favor of the new HTML format --}}
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
{{!-- Add demo with longer text for testing
@todo change label to `Filter` before merge
--}}
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start">
<span class="{{@root.prefix}}--assistive-text">Lorem ipsum dolor, amet color and this is really long text</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<br>
<br>
<p>center</p>
<br>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--left">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--top">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--bottom">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--right">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<br>
<br>
<p>end</p>
<br>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-end">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-end">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-end">
<span class="{{@root.prefix}}--assistive-text">Filter</span>
{{ carbon-icon 'Filter16' }}
</button>

{{!-- @todo Remove legacy demos before merge --}}
<br><br><strong>Legacy (WCAG 2.0 compliant)</strong>
<p>start</p>
<br>
<button
Expand All @@ -14,7 +91,7 @@
</button>
<button
class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip__trigger--icon {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start"
aria-label="Filter">
aria-label="Lorem ipsum dolor, amet color and this is really long text">
{{ carbon-icon 'Filter16' }}
</button>
<button
Expand Down
70 changes: 64 additions & 6 deletions packages/components/src/globals/scss/_tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,19 +31,31 @@
}
}

// Tooltip - renders as a combo of ::before and ::after elements
// ::before - Tooltip caret
// ::after - legacy Tooltip content (deprecated)
// .#{$prefix}--assistive-text - WCAG 2.1 compliant tooltip content
&::before,
&::after {
&::after,
.#{$prefix}--assistive-text {
@include type-style('body-short-01');
position: absolute;
z-index: z('floating');
display: flex;
align-items: center;
opacity: 0;
pointer-events: none;
}

&::before,
&::after {
transition: opacity $duration--fast-01 motion(standard, productive);
}

&.#{$prefix}--tooltip--a11y::before,
&.#{$prefix}--tooltip--a11y::after {
transition: none;
}

// caret
&::before {
width: 0;
Expand All @@ -52,8 +64,21 @@
content: '';
}

.#{$prefix}--assistive-text {
box-sizing: content-box;
color: inherit;
// In order to pass AAT, opacity must be set to 1 in the default state
// On focus/hover use a keyframe animation to mimic transition
opacity: 1;
// overwrite default nowrap behavior
white-space: normal;
}

// content box
&::after {
// @todo Simplify CSS selectors on next major release
&::after,
&:hover .#{$prefix}--assistive-text,
&:focus .#{$prefix}--assistive-text {
@include layer('overlay');
width: max-content;
max-width: rem(208px);
Expand All @@ -66,19 +91,46 @@
border-radius: rem(2px);
color: $inverse-01;
font-weight: 400;
content: attr(aria-label);
text-align: left;
transform: translateX(-50%);
pointer-events: none;
background-color: $inverse-02;
}

&::after {
content: attr(aria-label);
}

&.#{$prefix}--tooltip--a11y::after {
content: none;
}

&:hover,
&:focus {
&::before,
&::after {
opacity: 1;
}

@keyframes tooltip-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

.#{$prefix}--assistive-text {
clip: auto;
margin: auto;
overflow: visible;
}

.#{$prefix}--assistive-text,
&.#{$prefix}--tooltip--a11y::before {
animation: tooltip-fade $duration--fast-01 motion(standard, productive);
}
}
}

Expand Down Expand Up @@ -106,8 +158,11 @@
$translate-body: 100% + #{$caret-spacing} + #{$caret-height};
$rotate-caret: set-caret-rotation($position);

// @todo Simplify CSS selectors on next major release
&::before,
&::after {
&::after,
&:hover .#{$prefix}--assistive-text,
&:focus .#{$prefix}--assistive-text {
@if ($position == 'top') {
top: 0;
left: 50%;
Expand Down Expand Up @@ -150,7 +205,10 @@
}

// alignment options available only for top and bottom tooltip position
&::after {
// @todo Simplify CSS selectors on next major release
&::after,
&:hover .#{$prefix}--assistive-text,
&:focus .#{$prefix}--assistive-text {
@if ($position == 'top') {
@if ($align == 'start') {
left: 0;
Expand Down

0 comments on commit aea7c65

Please sign in to comment.