diff --git a/packages/components/src/components/a11y.css b/packages/components/src/components/a11y.css index 491af6c021..eb61b88a51 100644 --- a/packages/components/src/components/a11y.css +++ b/packages/components/src/components/a11y.css @@ -71,3 +71,19 @@ font-size: inherit; } } + +/** + * Sometimes we need the semantic element for accessibility reasons, + * but we don't want to show it. + * + * - https://www.a11yproject.com/posts/how-to-hide-content/ + */ +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/packages/components/src/components/input-checkbox/button.css b/packages/components/src/components/input-checkbox/button.css index c9fafb24cd..3823fc5b7f 100644 --- a/packages/components/src/components/input-checkbox/button.css +++ b/packages/components/src/components/input-checkbox/button.css @@ -4,14 +4,11 @@ grid-template-columns: var(--a11y-min-size) auto; grid-template-areas: 'error error' 'input label' 'hint hint'; } - - .button[tabindex]:focus { + .button:focus-within { /* override global `[tabindex]:focus` style */ cursor: inherit; - } - - .button input { - display: none; + outline-color: black; + outline-style: solid; } .button > .error { diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx index 7cb2c84c69..03fcda4d50 100644 --- a/packages/components/src/components/input-checkbox/component.tsx +++ b/packages/components/src/components/input-checkbox/component.tsx @@ -59,7 +59,6 @@ export class KolInputCheckbox implements API { }} data-role={this.state._variant === 'button' ? 'button' : undefined} onKeyPress={this.state._variant === 'button' ? this.onChange : undefined} - tabIndex={this.state._variant === 'button' && !this.state._disabled ? 0 : undefined} _accessKey={this.state._accessKey} _alert={this.state._alert} _disabled={this.state._disabled} @@ -97,6 +96,7 @@ export class KolInputCheckbox implements API { _label="" />