Skip to content

Commit

Permalink
refactor(toggle): make toggle labels accessible
Browse files Browse the repository at this point in the history
  • Loading branch information
@emyarod
emyarod committed May 30, 2019
1 parent a92e411 commit ff3c634
Show file tree
Hide file tree
Showing 3 changed files with 324 additions and 87 deletions.
269 changes: 225 additions & 44 deletions packages/components/src/components/toggle/_toggle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,28 +77,6 @@
}
}

.#{$prefix}--toggle--small
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__appearance {
width: rem(32px);
height: rem(16px);

&:before {
box-sizing: border-box;
height: rem(16px);
width: rem(32px);
border-radius: 0.9375rem;
top: 0;
}

&:after {
width: rem(10px);
height: rem(10px);
top: 3px;
left: 3px;
}
}

.#{$prefix}--toggle__check {
fill: $ui-03;
position: absolute;
Expand All @@ -109,13 +87,6 @@
transform: scale(0.2);
}

.#{$prefix}--toggle--small:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__check {
fill: $support-02;
transform: scale(1) translateX(16px);
}

.#{$prefix}--toggle__text--left,
.#{$prefix}--toggle__text--right {
@include type-style('body-short-01');
Expand All @@ -128,12 +99,6 @@
left: rem(48px);
}

.#{$prefix}--toggle--small
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__text--left {
left: rem(32px);
}

.#{$prefix}--toggle:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__text--left,
Expand Down Expand Up @@ -165,15 +130,6 @@
}
}

.#{$prefix}--toggle--small:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__appearance {
&:after {
margin-left: 0px;
transform: translateX(17px);
}
}

//----------------------------------------------
// Focus
// ---------------------------------------------
Expand Down Expand Up @@ -235,6 +191,231 @@
.#{$prefix}--toggle__check {
fill: $disabled-02;
}

//----------------------------------------------
// Small toggle
// ---------------------------------------------

.#{$prefix}--toggle--small
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__appearance {
width: rem(32px);
height: rem(16px);

&:before {
box-sizing: border-box;
height: rem(16px);
width: rem(32px);
border-radius: 0.9375rem;
top: 0;
}

&:after {
width: rem(10px);
height: rem(10px);
top: 3px;
left: 3px;
}
}

.#{$prefix}--toggle--small:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__check {
fill: $support-02;
transform: scale(1) translateX(16px);
}

.#{$prefix}--toggle--small
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__text--left {
left: rem(32px);
}

.#{$prefix}--toggle--small:checked
+ .#{$prefix}--toggle__label
.#{$prefix}--toggle__appearance {
&:after {
margin-left: 0px;
transform: translateX(17px);
}
}

// -----------------------------------------------------
// new accessible toggle
// TODO: deprecate styles above this line
// -----------------------------------------------------

.#{$prefix}--tgl {
@include hidden;

&:focus {
outline: none;
}
}

.#{$prefix}--tgl__label {
@include type-style('label-01');
display: flex;
flex-direction: column;
align-items: flex-start;
cursor: pointer;
}

.#{$prefix}--tgl__appearance {
position: relative;
display: flex;
align-items: center;
width: rem(48px);
height: rem(24px);
margin: $carbon--spacing-03 0;
cursor: pointer;

// Toggle background oval
&::before {
box-sizing: border-box;
position: absolute;
top: 0;
display: block;
width: rem(48px);
height: rem(24px);
border-radius: rem(15px);
content: '';
background-color: $ui-04;
will-change: box-shadow;
box-shadow: 0 0 0 2px transparent;
transition: box-shadow $duration--fast-01 motion(exit, productive),
background-color $duration--fast-01 motion(exit, productive);
}

// Toggle circle
&::after {
box-sizing: border-box;
position: absolute;
top: 3px;
left: 3px;
display: block;
width: rem(18px);
height: rem(18px);
border-radius: 50%;
background-color: $ui-03;
content: '';
transition: transform $duration--fast-01 motion(exit, productive);
}
}

.#{$prefix}--toggle__text--off,
.#{$prefix}--toggle__text--on {
position: absolute;
margin-left: carbon--mini-units(7);
@include type-style('body-short-01');
user-select: none;
}

//----------------------------------------------
// Checked
// ---------------------------------------------
.#{$prefix}--tgl:checked
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance
> .#{$prefix}--toggle__text--off,
.#{$prefix}--tgl:not(:checked)
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance
> .#{$prefix}--toggle__text--on {
visibility: hidden;
}

.#{$prefix}--tgl:checked
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance {
&::before {
background-color: $support-02;
}

&::after {
background-color: $icon-03;
transform: translateX(24px);
}
}

//----------------------------------------------
// Focus and active
// ---------------------------------------------
.#{$prefix}--tgl:focus
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance::before,
.#{$prefix}--tgl:active
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance::before {
box-shadow: 0 0 0 2px $focus;
}

//----------------------------------------------
// Disabled
// ---------------------------------------------
.#{$prefix}--tgl:disabled + .#{$prefix}--tgl__label {
cursor: not-allowed;
}

.#{$prefix}--tgl:disabled
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance {
cursor: not-allowed;

&::before {
background-color: $disabled-01;
}

&::after {
background-color: $disabled-02;
}

&::before,
&::after {
cursor: not-allowed;
transition: $duration--fast-01 motion(exit, productive);
}
}

.#{$prefix}--tgl:disabled + .#{$prefix}--tgl__label {
color: $disabled;
}

.#{$prefix}--tgl:disabled:active
+ .#{$prefix}--tgl__label
> .#{$prefix}--tgl__appearance::before {
box-shadow: none;
}

//----------------------------------------------
// Small toggle
// ---------------------------------------------
.#{$prefix}--tgl--small {
+ .#{$prefix}--tgl__label > .#{$prefix}--tgl__appearance {
width: rem(32px);
height: rem(16px);

&::before {
width: rem(32px);
height: rem(16px);
border-radius: 0.9375rem;
}

&::after {
width: rem(10px);
height: rem(10px);
}
}

+ .#{$prefix}--tgl__label .#{$prefix}--toggle__text--off,
+ .#{$prefix}--tgl__label .#{$prefix}--toggle__text--on {
margin-left: $carbon--spacing-08;
}

&:checked + .#{$prefix}--tgl__label > .#{$prefix}--tgl__appearance::after {
transform: translateX(17px);
}
}
}

@include exports('toggle') {
Expand Down
74 changes: 52 additions & 22 deletions packages/components/src/components/toggle/toggle--small.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,64 @@
<!--
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->

<div class="{{@root.prefix}}--form-item">
<input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle4" type="checkbox"
aria-label="Label Name">
<label class="{{@root.prefix}}--toggle__label" for="toggle4">
<span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
<span class="{{@root.prefix}}--toggle__appearance">
<svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
</svg>
<div class="{{prefix}}--form-item">
<input class="{{prefix}}--tgl {{prefix}}--tgl--small" id="smalltoggle0" type="checkbox">
<label class="{{prefix}}--tgl__label" for="smalltoggle0" aria-label="example toggle without state indicator text">
<span class="{{prefix}}--tgl__appearance"></span>
</label>
</div>

<div class="{{prefix}}--form-item">
<input class="{{prefix}}--tgl {{prefix}}--tgl--small" id="smalltoggle1" type="checkbox">
<label class="{{prefix}}--tgl__label" for="smalltoggle1" aria-label="example toggle with state indicator text">
<span class="{{prefix}}--tgl__appearance">
<span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
<span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
</span>
<span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
</label>
</div>

<div class="{{@root.prefix}}--form-item">
<input class="{{@root.prefix}}--toggle {{@root.prefix}}--toggle--small" id="toggle5" type="checkbox"
aria-label="Label Name" disabled>
<label class="{{@root.prefix}}--toggle__label" for="toggle5">
<span class="{{@root.prefix}}--toggle__text--left" aria-hidden="true">Off</span>
<span class="{{@root.prefix}}--toggle__appearance">
<svg class="{{@root.prefix}}--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
</svg>
<div class="{{prefix}}--form-item">
<input class="{{prefix}}--tgl {{prefix}}--tgl--small" id="smalltoggle2" type="checkbox">
<label class="{{prefix}}--tgl__label" for="smalltoggle2" aria-label="example toggle with visible label">
Toggle with visible label
<span class="{{prefix}}--tgl__appearance">
<span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
<span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
</span>
<span class="{{@root.prefix}}--toggle__text--right" aria-hidden="true">On</span>
</label>
</div>
</div>

<div class="{{prefix}}--form-item">
<input class="{{prefix}}--tgl {{prefix}}--tgl--small" id="smalltoggle3" type="checkbox" disabled>
<label class="{{prefix}}--tgl__label" for="smalltoggle3"
aria-label="example disabled toggle without state indicator text">
<span class="{{prefix}}--tgl__appearance"></span>
</label>
</div>

<div class="{{prefix}}--form-item">
<input class="{{prefix}}--tgl {{prefix}}--tgl--small" id="smalltoggle4" type="checkbox" disabled>
<label class="{{prefix}}--tgl__label" for="smalltoggle4"
aria-label="example disabled toggle with state indicator text">
<span class="{{prefix}}--tgl__appearance">
<span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
<span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
</span>
</label>
</div>

<div class="{{prefix}}--form-item">
<input class="{{prefix}}--tgl {{prefix}}--tgl--small" id="smalltoggle5" type="checkbox" disabled>
<label class="{{prefix}}--tgl__label" for="smalltoggle5" aria-label="example disabled toggle with visible label">
Toggle with visible label
<span class="{{prefix}}--tgl__appearance">
<span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
<span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
</span>
</label>
</div>
Loading

0 comments on commit ff3c634

Please sign in to comment.