From 607cc1b383b0473c7f99084a56617d737f50f097 Mon Sep 17 00:00:00 2001 From: Dale Sande Date: Tue, 12 May 2020 20:18:38 -0700 Subject: [PATCH] fix: #47 Unsafe removal of focus outline --- docs/index.html | 44 +++++++++++++++++++++++++------------------ src/_baselineLTE.scss | 14 +++++++------- src/_core.scss | 23 ++++++++++++++++++---- 3 files changed, 52 insertions(+), 29 deletions(-) diff --git a/docs/index.html b/docs/index.html index d7f7fb6..17d2f7e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,5 +1,5 @@ -@alaskaairux/orion-web-core-style-sheets - v2.9.2

accessibility

css

.js-focus-visible :focus:not(.focus-visible)

.focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

#{$scope}.focus-visible

.js-focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

#{$scope}.focus-visible

#{$scope} * { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

Global media setting for a11y support of reduced-motion

Manage $scope option.

Example

Default selector(s)

*, *:before, *:after {}

Selector(s) when $scope: true;

.auro *, .auro *:before, .auro *:after {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

essentials

css

#{$sym}#{$prefix}html#{$scope}

#{$scope} * { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

Global media setting for a11y support of reduced-motion

Manage $scope option.

Example

Default selector(s)

*, *:before, *:after {}

Selector(s) when $scope: true;

.auro *, .auro *:before, .auro *:after {}

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

import file with $focus set to true

$focus: true;
+@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core";

essentials

css

#{$sym}#{$prefix}html#{$scope}

* { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

Manage $scope option.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.focus-visible :focus:not(.focus-visible)

Deprecated!

see core.scss

.focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.ods-roleButton

Deprecated!

See .auro_roleButton

* { ... }

Description

Global selector to address box-model and default :focus pseudo elements.

Manage $scope option.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

// .focus-visible :focus:not(.focus-visible)

Deprecated!

see core.scss

// .focus-visible :focus:not(.focus-visible) { ... }

Description

Selector set to enable use of focus visible polyfill.

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

Example

import file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/baseline";

.ods-roleButton

Deprecated!

See .auro_roleButton

.util_is-desktopOnly--inline { ... }

Description

Utility class to restrain block visibility of UI element for max screens.

Manage !important flag.

Example

import mixin file and selector partial file

@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/breakpoints";
-@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive";
@alaskaairux/orion-web-core-style-sheets - v2.9.2 , under Apache-2.0
SassDoc Logo
\ No newline at end of file +@import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/utilityClasses/responsive"; \ No newline at end of file diff --git a/src/_baselineLTE.scss b/src/_baselineLTE.scss index 0cb742b..06351e2 100644 --- a/src/_baselineLTE.scss +++ b/src/_baselineLTE.scss @@ -25,9 +25,9 @@ } // default experience is to remove all a11y enhancements - &:focus { - outline: none; - } + // &:focus { + // outline: none; + // } } /// Selector set to enable use of [focus visible](https://www.npmjs.com/package/focus-visible) polyfill. @@ -39,8 +39,8 @@ /// /// @group †deprecated /// @deprecated see `core.scss` -.focus-visible :focus:not(.focus-visible) { - @include deprecated('file baselineLTE'); +// .focus-visible :focus:not(.focus-visible) { +// @include deprecated('file baselineLTE'); - outline: none; -} +// outline: none; +// } diff --git a/src/_core.scss b/src/_core.scss index a25f6ca..ab785ba 100644 --- a/src/_core.scss +++ b/src/_core.scss @@ -4,6 +4,8 @@ // --------------------------------------------------------------------- @import "libSupport/manageScope"; +$focus: null !default; + // sass-lint:disable no-important /// Global selector to address box-model and default `:focus` pseudo elements. @@ -21,6 +23,10 @@ /// @example scss - import file /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core"; /// +/// @example scss - import file with `$focus` set to `true` +/// $focus: true; +/// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core"; +/// #{$scope} * { &, &:before, @@ -33,9 +39,18 @@ } } - // default experience is to remove all a11y enhancements - &:focus { - outline: none; + // if $focus is true, outline will appear on tabbed focus + + // default is null, tabbed outline is set to none + // dependency on .focus-visible selector + @if $focus { + &:focus { + outline: 2px solid var(--auro-color-ui-default-on-light); + } + } @else { + &:focus { + outline: none; + } } } @@ -47,6 +62,6 @@ /// @import "./node_modules/@alaskaairux/orion-web-core-style-sheets/dist/core"; /// /// @group Accessibility -.focus-visible :focus:not(.focus-visible) { +.js-focus-visible :focus:not(.focus-visible) { outline: none; }