Skip to content

Commit

Permalink
fix: update button a11y state
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackfalcon
blackfalcon committed Sep 12, 2019
1 parent 66407b9 commit 9b913ff
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 39 deletions.
49 changes: 28 additions & 21 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.6.6</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.6.6</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.focus-visible :focus:not(.focus-visible)">.focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible" data-type="css"><a href="#accessibility-css-.focus-visible">.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="transition" data-type="mixin"><a href="#animation-mixin-transition">transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="baseline"><a href="#baseline">baseline</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="baseline-css"><a href="#baseline-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="html" data-type="css"><a href="#baseline-css-html">html</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="body,
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@alaskaairux/orion-web-core-style-sheets - v2.6.7</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@alaskaairux/orion-web-core-style-sheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Orion core foundation Sass UI Kit</p>
"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@alaskaairux/orion-web-core-style-sheets - 2.6.7</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible :focus:not(.focus-visible)" data-type="css"><a href="#accessibility-css-.focus-visible :focus:not(.focus-visible)">.focus-visible :focus:not(.focus-visible)</a></li><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=".focus-visible" data-type="css"><a href="#accessibility-css-.focus-visible">.focus-visible</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="transition" data-type="mixin"><a href="#animation-mixin-transition">transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="baseline"><a href="#baseline">baseline</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="baseline-css"><a href="#baseline-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="html" data-type="css"><a href="#baseline-css-html">html</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="body,
.baseType" data-type="css"><a href="#baseline-css-body,
.baseType">body, .baseType</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name=".baseParagraph" data-type="css"><a href="#baseline-css-.baseParagraph">.baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name=".hyperlink" data-type="css"><a href="#baseline-css-.hyperlink">.hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="baseline" data-name="small,
.type--small" data-type="css"><a href="#baseline-css-small,
Expand Down Expand Up @@ -609,32 +609,39 @@
@include focus-hyperlink(css);
}
}</code></pre></div></section><section class="main__item container item" id="utility-mixins-mixin-focus-button"><h3 class="item__heading"><a class="item__name" href="#mixin-focus-button">focus-button</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="@mixin focus-button($style) {
$color: null;
$background-color: null;
$border-color: null;
$box-shadow: null;
$shadow-color: null;
$white-band: null;
$complete-shadow-color: null;
@if $style == css {
$color: var(--color-type-theme-light-link);
$background-color: var(--color-base-white);
$border-color: var(--color-brand-blue-atlas-darken);
$box-shadow: 0 0 8px var(--color-base-shark);
$shadow-color: var(--color-brand-blue-atlas-base);
$complete-shadow-color: var(--color-brand-green-tropical-base);
$white-band: var(--color-base-white);
} @else if $style == sass {
$color: $color-type-theme-light-link;
$background-color: $color-base-white;
$border-color: $color-brand-blue-atlas-darken;
$box-shadow: 0 0 8px $color-base-shark;
$shadow-color: $color-brand-blue-atlas-base;
$complete-shadow-color: $color-brand-green-tropical-base;
$white-band: $color-base-white;
}
color: $color;
background-color: $background-color;
border-color: $border-color;
border-width: 1px;
border-style: solid;
box-shadow: $box-shadow;
box-shadow:
inset 0 0 0 2px $shadow-color,
inset 0 0 0 7px $white-band;
&amp;--secondary {
box-shadow:
inset 0 0 0 2px $shadow-color,
inset 0 0 0 5px $white-band,
inset 0 0 0 8px $shadow-color,
}
&amp;--complete {
box-shadow:
inset 0 0 0 2px var(--ods-button-complete-background-color),
inset 0 0 0 7px $white-band,
}
}" data-collapsed="@mixin focus-button($style) { ... }"><code>@mixin focus-button($style) { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Creates Sass variable or custom property output for multi-use focus-visible shape</p></div><h3 class="item__sub-heading">Parameters</h3><table class="item__parameters"><thead><tr><th scope="col"><span class="visually-hidden">parameter </span>Name</th><th scope="col"><span class="visually-hidden">parameter </span>Description</th><th scope="col"><span class="visually-hidden">parameter </span>Type</th><th scope="col"><span class="visually-hidden">parameter </span>Default value</th></tr></thead><tbody><tr class="item__parameter"><th scope="row" data-label="name"><code>$style</code></th><td data-label="desc"><p>sets user&#39;s requst for style of variable return (css, sass)</p></td><td data-label="type"><code>String</code></td><td data-label="default">&mdash;<span class="visually-hidden"> none</span></td></tr></tbody></table><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityMixins/focusVisible&quot;;</code></pre></div><div class="item__example example"><div class="example__description"><p>Set properties for CSS output</p></div><pre class="example__code language-css"><code>:host(.focus-visible) {
.button {
@include focus-button(css);
}
}</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.6.6</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
}</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@alaskaairux/orion-web-core-style-sheets</span><!-- Version --> <span class="project-info__version">- v2.6.7</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
44 changes: 26 additions & 18 deletions src/utilityMixins/_focusVisible.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
// ---------------------------------------------------------------------

// sass-lint:disable no-important
// sass-lint:disable indentation

/// Creates Sass variable or custom property output for multi-use focus-visible shape
/// @group utility-mixins
Expand Down Expand Up @@ -63,28 +64,35 @@
/// }
/// }
@mixin focus-button($style) {
$color: null;
$background-color: null;
$border-color: null;
$box-shadow: null;
$shadow-color: null;
$white-band: null;
$complete-shadow-color: null;

@if $style == css {
$color: var(--color-type-theme-light-link);
$background-color: var(--color-base-white);
$border-color: var(--color-brand-blue-atlas-darken);
$box-shadow: 0 0 8px var(--color-base-shark);
$shadow-color: var(--color-brand-blue-atlas-base);
$complete-shadow-color: var(--color-brand-green-tropical-base);
$white-band: var(--color-base-white);

} @else if $style == sass {
$color: $color-type-theme-light-link;
$background-color: $color-base-white;
$border-color: $color-brand-blue-atlas-darken;
$box-shadow: 0 0 8px $color-base-shark;
$shadow-color: $color-brand-blue-atlas-base;
$complete-shadow-color: $color-brand-green-tropical-base;
$white-band: $color-base-white;
}

color: $color;
background-color: $background-color;
border-color: $border-color;
border-width: 1px;
border-style: solid;
box-shadow: $box-shadow;
box-shadow:
inset 0 0 0 2px $shadow-color,
inset 0 0 0 7px $white-band;

&--secondary {
box-shadow:
inset 0 0 0 2px $shadow-color,
inset 0 0 0 5px $white-band,
inset 0 0 0 8px $shadow-color,
}

&--complete {
box-shadow:
inset 0 0 0 2px var(--ods-button-complete-background-color),
inset 0 0 0 7px $white-band,
}
}

0 comments on commit 9b913ff

Please sign in to comment.