Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stop removing focus outlines by default #66

Merged
merged 4 commits into from
Mar 5, 2021
Merged

Stop removing focus outlines by default #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6b9d680
test: add demo page to test out WCSS changes
geoffrich Mar 2, 2021
392c7cc
docs: fix external link typo
geoffrich Mar 2, 2021
9f46f66
feat: only remove focus styles when focus-visible
geoffrich Mar 2, 2021
bf877e1
feat: remove -moz pseudo-elements
geoffrich Mar 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WCSS Playground</title>
<link rel="stylesheet" href="/results/css/testBuild.css">
<link rel="stylesheet" href="/node_modules/@alaskaairux/design-tokens/dist/tokens/CSSCustomProperties.css">
<style>
body {
padding: 1rem;
}
</style>
</head>
<body>
<h1>WCSS Playground</h1>
<p>Test out your WCSS changes here.</p>
<h2>Buttons</h2>
<button>I'm a button</button>
<auro-button>I'm an auro button</auro-button>
<h2>Hyperlinks</h2>
<a href="#">I'm a hyperlink</a>
<h2>Text inputs</h2>
<label>Name <input type="text"></label>
<script src="https://unpkg.com/@alaskaairux/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion docs/assets/css/main.css
View file
Open in desktop

Large diffs are not rendered by default.

79 changes: 7 additions & 72 deletions docs/index.html
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions scripts/live-server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ var liveServer = require("live-server");
var params = {
// port: 8181, // Set the server port. Defaults to 8080.
host: "localhost", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
root: "./docs", // Set root directory that's being served. Defaults to cwd.
root: ".", // Set root directory that's being served. Defaults to cwd.
open: "/docs",
// open: false, // When false, it won't load your browser by default.
// ignore: 'scss,my/templates', // comma-separated string for paths to ignore
file: "index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
file: "docs/index.html", // When set, serve this file (server root relative) for every 404 (useful for single-page applications)
wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
// mount: [['/components', './node_modules']], // Mount a directory to a route.
logLevel: 1, // 0 = errors only, 1 = some, 2 = lots
Expand Down
2 changes: 1 addition & 1 deletion scripts/sassdocTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const results = replace.sync({
':not(pre)>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'
],
});

Expand Down
27 changes: 16 additions & 11 deletions src/_core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -67,3 +60,15 @@ $focus: null !default;
// Only visible when Windows High-Contrast Mode is turned on
outline: 3px solid transparent;
Copy link

@littleninja littleninja Mar 4, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we merge these two selectors?

.js-focus-visible :focus:not(.focus-visible),
:focus:not(:focus-visible) {
  outline: 3px solid transparent;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately not — a single invalid selector invalidates the whole rule. So browsers that don’t support :focus-visible would be broken.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooo, did not realize that could happen if browsers do not support a selector (if I understand your explanation). Thank you!

}

/// 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;
}
55 changes: 0 additions & 55 deletions src/_normalize.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
///
Expand Down