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

Jump to bottom

feat(@clayui/css): Adds :focus-visible support #5635

Merged
merged 5 commits into from
Jul 25, 2023
Merged

feat(@clayui/css): Adds :focus-visible support #5635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ba1f68b
feat(@clayui/css): Adds :focus-visible support
pat270 Jul 13, 2023
62b1a24
fix(@clayui/breadcrumb): fix focus visible in breadcrumb
matuzalemsteles Jul 14, 2023
1e68586
chore(@clayui/breadcrumb): regen snapshot
matuzalemsteles Jul 14, 2023
1da9164
feat(@clayui/css): Form mixins use focus-visible
pat270 Jul 14, 2023
c9a5c24
docs(clayui.com): Document c-prefers-focus
pat270 Jul 14, 2023
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
19 changes: 19 additions & 0 deletions clayui.com/content/docs/css/utilities/markup-accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ title: 'Accessibility'
- [C Prefers Reduced Motion](#css-c-prefers-reduced-motion)
- [C Prefers Link Underline](#css-c-prefers-link-underline)
- [C Prefers Letter Spacing 1](#css-c-prefers-letter-spacing-1)
- [C Prefers Focus](#css-c-prefers-focus)

</div>
</div>
Expand Down Expand Up @@ -87,3 +88,21 @@ The class `c-prefers-expanded-text` expands all truncated text to be visible.
</span>
</div>
</div>

## C Prefers Focus(#css-c-prefers-focus)

The class `c-prefers-focus` should be added to the `body` element to show the focus outline on mouse click. This is an accessibility feature for users who prefer this style of navigation.

Focus Visible is now <a href="https://caniuse.com/?search=focus-visible" rel="noopener noreferrer" target="_blank">supported in all major browsers</a>. We have enabled it by default in Clay CSS. Using the mouse to click on links, buttons, checkboxes, and other elements no longer show the focus outline. The focus outline will be shown when interacting with elements via keyboard.

<div class="clay-site-alert alert alert-warning">
The focus ring will always show in Text and Select elements that use the `input` tag. <a href="https://www.w3.org/TR/selectors-4/#the-focus-visible-pseudo" rel="noopener noreferrer" target="_blank">It is assumed the user will be interacting with the input via the keyboard</a>.
</div>

<div class="clay-site-alert alert alert-info">
To disable `:focus-visible`, set the Sass variable `$enable-focus-visible: false;`.
</div>

<div class="sheet-example">
<button class="btn btn-primary" data-toggle="c-prefers-focus" type="button">Toggle Focus</button>
</div>
8 changes: 7 additions & 1 deletion clayui.com/static/js/docs-site.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,18 @@ if (!Element.prototype.closest) {
document.addEventListener('click', function(event) {
var t = event.target;

var a = t.tagName === 'a' ? t : t.closest('a');
var a = t.tagName === 'a' || t.tagName === 'button' ? t : t.closest('a') || t.closest('button');

if (a) {
if (a.getAttribute('href') === '#1') {
event.preventDefault();
}

var dataToggle = a.getAttribute('data-toggle');

if (dataToggle && dataToggle.startsWith('c-prefers')) {
document.querySelector('body').classList.toggle(a.getAttribute('data-toggle'));
}
}
});
})();
Expand Down
6 changes: 3 additions & 3 deletions packages/clay-breadcrumb/src/__tests__/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`ClayBreadcrumb calls callback when an item is clicked 1`] = `
<button
aria-expanded="false"
aria-label="See full nested"
class="c-focus-inset btn btn-monospaced btn-xs"
class="btn btn-monospaced btn-xs"
title="See full nested"
type="button"
>
Expand Down Expand Up @@ -59,7 +59,7 @@ exports[`ClayBreadcrumb renders 1`] = `
<button
aria-expanded="false"
aria-label="See full nested"
class="c-focus-inset btn btn-monospaced btn-xs"
class="btn btn-monospaced btn-xs"
title="See full nested"
type="button"
>
Expand Down Expand Up @@ -111,7 +111,7 @@ exports[`ClayBreadcrumb renders with properties passed by \`ellipsisProps\` 1`]
<button
aria-expanded="false"
aria-label="See full nested"
class="c-focus-inset btn btn-monospaced btn-xs"
class="btn btn-monospaced btn-xs"
title="See full nested"
type="button"
>
Expand Down
1 change: 0 additions & 1 deletion packages/clay-breadcrumb/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ const ClayBreadcrumb = ({
<ClayButtonWithIcon
aria-expanded={collapsed}
aria-label={collapsed ? ariaLabels.close : ariaLabels.open}
className="c-focus-inset"
displayType={null}
onClick={() => setCollapsed(!collapsed)}
size="xs"
Expand Down
3 changes: 1 addition & 2 deletions packages/clay-css/src/scss/atlas/variables/_custom-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ $custom-control-indicator-focus-box-shadow: $component-focus-box-shadow !default

$custom-control-indicator-active-bg: $white !default;
$custom-control-indicator-active-border-color: $custom-control-indicator-border-color !default;
$custom-control-indicator-active-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1),
$custom-control-indicator-focus-box-shadow !default;
$custom-control-indicator-active-box-shadow: c-unset !default;

$custom-control-indicator-disabled-bg: if(
variable-exists(input-disabled-bg),
Expand Down
10 changes: 9 additions & 1 deletion packages/clay-css/src/scss/atlas/variables/_globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,17 @@ $clay-unset-placeholder: clay-unset-placeholder !default;
$atlas-theme: true !default;

$enable-bs4-deprecated: true !default;
$enable-c-inner: true !default;
$enable-focus-visible: true !default;

$focus-visible-selector: if(
$enable-focus-visible,
'&:focus-visible',
'&:focus'
) !default;

$enable-lexicon-flat-colors: true !default;
$enable-scaling-components: true !default;
$enable-c-inner: true !default;
$scaling-breakpoint-down: sm !default;

// This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to `false` if you want the Clay color function to return the CSS Custom Property without any modifications.
Expand Down
4 changes: 1 addition & 3 deletions packages/clay-css/src/scss/cadmin/variables/_custom-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,7 @@ $cadmin-custom-control-indicator-focus-border-color: $cadmin-custom-control-indi
$cadmin-custom-control-indicator-focus-box-shadow: $cadmin-component-focus-box-shadow !default;

$cadmin-custom-control-indicator-active-bg: $cadmin-white !default;
$cadmin-custom-control-indicator-active-box-shadow: inset 0 0 0 1px
rgba(0, 0, 0, 0.1),
$cadmin-custom-control-indicator-focus-box-shadow !default;
$cadmin-custom-control-indicator-active-box-shadow: c-unset !default;
$cadmin-custom-control-indicator-active-border-color: $cadmin-custom-control-indicator-border-color !default;
$cadmin-custom-control-indicator-active-color: $cadmin-component-active-color !default;

Expand Down
9 changes: 9 additions & 0 deletions packages/clay-css/src/scss/cadmin/variables/_globals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,15 @@ $cadmin-clay-unset-placeholder: clay-unset-placeholder !default;
$cadmin-enable-lexicon-flat-colors: true !default;
$cadmin-enable-scaling-components: true !default;
$cadmin-enable-c-inner: true !default;

$cadmin-enable-focus-visible: true !default;

$focus-visible-selector: if(
$cadmin-enable-focus-visible,
'&:focus-visible',
'&:focus'
) !default;

$cadmin-scaling-breakpoint-down: sm !default;

// This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to `false` if you want the Clay color function to return the CSS Custom Property without any modifications.
Expand Down
151 changes: 95 additions & 56 deletions packages/clay-css/src/scss/mixins/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,31 @@

$breakpoint-down: map-get($map, breakpoint-down);

$_enable-focus-visible: if(
variable-exists(enable-focus-visible),
$enable-focus-visible,
if(
variable-exists(cadmin-enable-focus-visible),
$cadmin-enable-focus-visible,
true
)
);

$_c-prefers-focus-selector: if(
$_enable-focus-visible,
'.c-prefers-focus &:focus',
''
);

@if (variable-exists(cadmin-enable-focus-visible)) and
($_enable-focus-visible)
{
$_c-prefers-focus-selector: clay-insert-before(
'.cadmin',
'.c-prefers-focus '
);
}

$base: map-merge(
$map,
(
Expand Down Expand Up @@ -704,48 +729,51 @@
}
}

&:focus,
&.focus {
@include clay-css($focus);

&::before {
@include clay-css(map-deep-get($map, focus, before));
}

&::after {
@include clay-css(map-deep-get($map, focus, after));
}

&:hover {
@include clay-css(map-deep-get($map, focus, hover));
@at-root {
&.focus,
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
@include clay-css($focus);

&::before {
@include clay-css(
map-deep-get($map, focus, hover, before)
);
@include clay-css(map-deep-get($map, focus, before));
}

&::after {
@include clay-css(
map-deep-get($map, focus, hover, after)
);
@include clay-css(map-deep-get($map, focus, after));
}
}

.inline-item {
@include clay-css(map-get($focus, inline-item));
}
&:hover {
@include clay-css(map-deep-get($map, focus, hover));

.inline-item-before {
@include clay-css(map-get($focus, inline-item-before));
}
&::before {
@include clay-css(
map-deep-get($map, focus, hover, before)
);
}

.inline-item-middle {
@include clay-css(map-get($focus, inline-item-middle));
}
&::after {
@include clay-css(
map-deep-get($map, focus, hover, after)
);
}
}

.inline-item-after {
@include clay-css(map-get($focus, inline-item-after));
.inline-item {
@include clay-css(map-get($focus, inline-item));
}

.inline-item-before {
@include clay-css(map-get($focus, inline-item-before));
}

.inline-item-middle {
@include clay-css(map-get($focus, inline-item-middle));
}

.inline-item-after {
@include clay-css(map-get($focus, inline-item-after));
}
}
}

Expand All @@ -760,19 +788,22 @@
@include clay-css(map-deep-get($map, active, after));
}

&:focus {
@include clay-css($active-focus);
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
@include clay-css($active-focus);

&::before {
@include clay-css(
map-deep-get($map, active, focus, before)
);
}
&::before {
@include clay-css(
map-deep-get($map, active, focus, before)
);
}

&::after {
@include clay-css(
map-deep-get($map, active, focus, after)
);
&::after {
@include clay-css(
map-deep-get($map, active, focus, after)
);
}
}
}

Expand Down Expand Up @@ -804,8 +835,13 @@
@include clay-css(map-get($map, active-class-after));
}

&:focus {
@include clay-css(map-deep-get($map, active-class, focus));
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
@include clay-css(
map-deep-get($map, active-class, focus)
);
}
}

.inline-item {
Expand Down Expand Up @@ -843,19 +879,22 @@
@include clay-css(map-deep-get($map, disabled, after));
}

&:focus {
@include clay-css(map-get($disabled, focus));
@at-root {
#{$focus-visible-selector},
#{$_c-prefers-focus-selector} {
@include clay-css(map-get($disabled, focus));

&::before {
@include clay-css(
map-deep-get($map, disabled, focus, before)
);
}
&::before {
@include clay-css(
map-deep-get($map, disabled, focus, before)
);
}

&::after {
@include clay-css(
map-deep-get($map, disabled, focus, after)
);
&::after {
@include clay-css(
map-deep-get($map, disabled, focus, after)
);
}
}
}

Expand Down
Loading
Loading