From e6458c26d607865746d81c502a73d363483c5a21 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 13 Apr 2022 09:39:29 -0400 Subject: [PATCH] fixes #727 --- docs/resources/changelog.md | 1 + src/components/input/input.ts | 6 ++++-- src/components/select/select.ts | 10 +++++++++- src/translations/da.ts | 3 +++ src/translations/de-ch.ts | 3 +++ src/translations/de.ts | 3 +++ src/translations/en.ts | 3 +++ src/translations/es.ts | 3 +++ src/translations/fr.ts | 3 +++ src/translations/he.ts | 3 +++ src/translations/ja.ts | 3 +++ src/translations/nl.ts | 3 +++ src/translations/pl.ts | 3 +++ src/translations/pt.ts | 3 +++ src/translations/ru.ts | 3 +++ 15 files changed, 50 insertions(+), 3 deletions(-) diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 67b4b5fe0..91519eedb 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -20,6 +20,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Fixed a bug that caused the test runner to fail when using a locale other than en-US [#726](https://github.com/shoelace-style/shoelace/issues/726) - Improved form submit logic so most user-added event listeners will run after form data is attached and validation occurs [#718](https://github.com/shoelace-style/shoelace/issues/718) - Improved accessibility of `` so screen readers announce the content on hover/focus [#219](https://github.com/shoelace-style/shoelace/issues/219) +- Improved accessibility of form controls by exposing clear buttons and password visibility buttons to screen readers while keeping them out of the tab order [#727](https://github.com/shoelace-style/shoelace/issues/727) - Updated `` and `` to cycle through tabs and menu items instead of stopping at the first/last when using the keyboard - Removed path aliasing (again) because it doesn't work with Web Test Runner's esbuild plugin diff --git a/src/components/input/input.ts b/src/components/input/input.ts index c60853a84..268a4b2f0 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -8,6 +8,7 @@ import { emit } from '../../internal/event'; import { FormSubmitController } from '../../internal/form'; import { HasSlotController } from '../../internal/slot'; import { watch } from '../../internal/watch'; +import { LocalizeController } from '../../utilities/localize'; import styles from './input.styles'; /** @@ -49,6 +50,7 @@ export default class SlInput extends LitElement { private readonly formSubmitController = new FormSubmitController(this); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); + private readonly localize = new LocalizeController(this); @state() private hasFocus = false; @state() private isPasswordVisible = false; @@ -374,7 +376,7 @@ export default class SlInput extends LitElement { part="clear-button" class="input__clear" type="button" - aria-hidden="true" + aria-label=${this.localize.term('clearEntry')} @click=${this.handleClearClick} tabindex="-1" > @@ -390,7 +392,7 @@ export default class SlInput extends LitElement { part="password-toggle-button" class="input__password-toggle" type="button" - aria-hidden="true" + aria-label=${this.localize.term(this.isPasswordVisible ? 'hidePassword' : 'showPassword')} @click=${this.handlePasswordToggle} tabindex="-1" > diff --git a/src/components/select/select.ts b/src/components/select/select.ts index df49eb46d..ed3676503 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -10,6 +10,7 @@ import { emit } from '../../internal/event'; import { FormSubmitController } from '../../internal/form'; import { getTextContent, HasSlotController } from '../../internal/slot'; import { watch } from '../../internal/watch'; +import { LocalizeController } from '../../utilities/localize'; import styles from './select.styles'; import type SlDropdown from '../../components/dropdown/dropdown'; import type SlIconButton from '../../components/icon-button/icon-button'; @@ -70,6 +71,7 @@ export default class SlSelect extends LitElement { // @ts-expect-error -- Controller is currently unused private readonly formSubmitController = new FormSubmitController(this); private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label'); + private readonly localize = new LocalizeController(this); private resizeObserver: ResizeObserver; @state() private hasFocus = false; @@ -534,7 +536,13 @@ export default class SlSelect extends LitElement { ${this.clearable && hasSelection ? html` -