accessibility

css

.js-focus-visible :focus:not(.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/webcorestylesheets/dist/core";

#{$scope}.focus-visible

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

Description

Selector to remove default focus styles when the focus visible polyfill is loaded and the focus-visible class is not applied to the element. Usually this means the user is clicking the element instead of tabbing to it.

This can eventually be removed once all browsers support :focus-visible.

Example

import file

@import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";

:focus:not(:focus-visible)

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

Description

Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.

Check current browser support for :focus-visible on Can I Use.

Example

import file

@import "./node_modules/@alaskaairux/webcorestylesheets/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/webcorestylesheets/dist/core";

import file with $focus set to true

$focus: true;
 @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";

#{$sym}#{$prefix}picture#{$scope}

Selector(s) when $scope: true;
.auro button,
 .auro [type="button"],
 .auro [type="reset"],
-.auro [type="submit"] {}

import file

@import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

#{$scope}button::-moz-focus-inner, #{$scope}[type="button"]::-moz-focus-inner, #{$scope}[type="reset"]::-moz-focus-inner, #{$scope}[type="submit"]::-moz-focus-inner

#{$scope}button::-moz-focus-inner,
-#{$scope}[type="button"]::-moz-focus-inner,
-#{$scope}[type="reset"]::-moz-focus-inner,
-#{$scope}[type="submit"]::-moz-focus-inner { ... }

Description

Remove the inner border and padding in Firefox.

Manage $scope option.

Example

Default selector(s)

button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {}

Selector(s) when $scope: true;

.auro button::-moz-focus-inner,
-.auro [type="button"]::-moz-focus-inner,
-.auro [type="reset"]::-moz-focus-inner,
-.auro [type="submit"]::-moz-focus-inner {}

import file

@import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

#{$scope}button:-moz-focusring, #{$scope}[type="button"]:-moz-focusring, #{$scope}[type="reset"]:-moz-focusring, #{$scope}[type="submit"]:-moz-focusring

#{$scope}button:-moz-focusring,
-#{$scope}[type="button"]:-moz-focusring,
-#{$scope}[type="reset"]:-moz-focusring,
-#{$scope}[type="submit"]:-moz-focusring { ... }

Description

Restore the focus styles unset by the previous rule.

Manage $scope option.

Example

Default selector(s)

button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {}

Selector(s) when $scope: true;

.auro button:-moz-focusring,
-.auro [type="button"]:-moz-focusring,
-.auro [type="reset"]:-moz-focusring,
-.auro [type="submit"]:-moz-focusring {}

import file

@import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

#{$scope}fieldset

import file
@import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

#{$scope}fieldset

#{$scope}fieldset { ... }

Description

Correct the padding in Firefox.

Manage $scope option.

Example

Default selector(s)

fieldset {}

Selector(s) when $scope: true;

.auro fieldset {}

import file

@import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";

#{$scope}legend

code{color:#b82b47;white-space:nowrap;font-weight:normal;font-size:1.25rem}',
     'transition:0.15s;text-decoration:underline;',
     'item__name{color:#0074c8;text-decoration:none}',
-    '[href*="https://"]::after{content:" (extrenal link)";font-size:0.75rem}.sidebar__title'
+    '[href*="https://"]::after{content:" (external link)";font-size:0.75rem}.sidebar__title'
   ],
 });
 
diff --git a/src/_core.scss b/src/_core.scss
index 98501a3..14308f9 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -39,25 +39,18 @@ $focus: null !default;
     }
   }
 
-  // if $focus is true, outline will appear on tabbed focus
-
-  // default is null, tabbed outline is set to transparent
-  // dependency on .focus-visible selector
+  // if $focus is true, override the default focus outline
   @if $focus {
     &:focus {
       outline: 2px solid var(--auro-color-ui-default-on-light);
     }
-  } @else {
-    &:focus {
-      // Only visible when Windows High-Contrast Mode is turned on
-      outline: 3px solid transparent;
-    }
   }
 }
 
-/// Selector set to enable use of [focus visible](https://www.npmjs.com/package/focus-visible) polyfill.
+/// Selector to remove default focus styles when the [focus visible](https://www.npmjs.com/package/focus-visible) polyfill is loaded and the 
+/// focus-visible class is not applied to the element. Usually this means the user is clicking the element instead of tabbing to it.
 ///
-/// 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.
+/// This can eventually be removed once all browsers support `:focus-visible`. 
 ///
 /// @example scss - import file
 ///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";
@@ -67,3 +60,15 @@ $focus: null !default;
   // Only visible when Windows High-Contrast Mode is turned on
   outline: 3px solid transparent;
 }
+
+/// Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
+///
+/// Check current browser support for :focus-visible on [Can I Use](https://caniuse.com/css-focus-visible).
+///
+/// @example scss - import file
+///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";
+///
+/// @group Accessibility
+:focus:not(:focus-visible) {
+  outline: 3px solid transparent;
+}
diff --git a/src/_normalize.scss b/src/_normalize.scss
index d8637ab..b2ce185 100644
--- a/src/_normalize.scss
+++ b/src/_normalize.scss
@@ -405,61 +405,6 @@ html#{$scope} {
   -webkit-appearance: none;
 }
 
-///
-/// Remove the inner border and padding in Firefox.
-///
-/// [Manage](/#scope-prefix-variable) `$scope` option.
-/// @group Normalize
-/// @example scss - Default selector(s)
-///   button::-moz-focus-inner,
-///   [type="button"]::-moz-focus-inner,
-///   [type="reset"]::-moz-focus-inner,
-///   [type="submit"]::-moz-focus-inner {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro button::-moz-focus-inner,
-///   .auro [type="button"]::-moz-focus-inner,
-///   .auro [type="reset"]::-moz-focus-inner,
-///   .auro [type="submit"]::-moz-focus-inner {}
-///
-/// @example scss - import file
-///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";
-///
-#{$scope}button::-moz-focus-inner,
-#{$scope}[type="button"]::-moz-focus-inner,
-#{$scope}[type="reset"]::-moz-focus-inner,
-#{$scope}[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-///
-/// Restore the focus styles unset by the previous rule.
-///
-/// [Manage](/#scope-prefix-variable) `$scope` option.
-/// @group Normalize
-/// @example scss - Default selector(s)
-///   button:-moz-focusring,
-///   [type="button"]:-moz-focusring,
-///   [type="reset"]:-moz-focusring,
-///   [type="submit"]:-moz-focusring {}
-///
-/// @example scss - Selector(s) when $scope: true;
-///   .auro button:-moz-focusring,
-///   .auro [type="button"]:-moz-focusring,
-///   .auro [type="reset"]:-moz-focusring,
-///   .auro [type="submit"]:-moz-focusring {}
-///
-/// @example scss - import file
-///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/normalize";
-///
-#{$scope}button:-moz-focusring,
-#{$scope}[type="button"]:-moz-focusring,
-#{$scope}[type="reset"]:-moz-focusring,
-#{$scope}[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
 ///
 /// Correct the padding in Firefox.
 ///