Skip to content

[password-field] Provide additional information for screen reader users #2308

@web-padawan

Description

@web-padawan

Motivation

As mentioned at #2275 (comment), the reveal button doesn't convey enough info when you toggle it, it's announced "selected" when you select it and nothing we you deselect it (VoiceOver). We could provide additional info like here.

<p aria-live="polite" id="password-text" class="sr-only">Password hidden.</p>

See the blog post for more details.

Proposed solution

Update the i18n object on the vaadin-password-field to include following properties:

{
  reveal: 'Show password',  // aria-label for reveal button
  shown: 'Password shown',  // hint when password is shown
  hidden: 'Password hidden' // hint when password is hidden
}

Note

This might be optional, but we need to clarify this our users who will test the component in screen readers.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions