PolymerElements / paper-input

A Material Design text field
https://www.webcomponents.org/element/PolymerElements/paper-input
130 stars 159 forks source link

paper-input's error-message is always announced by screen readers #553

Open tgsergeant opened 7 years ago

tgsergeant commented 7 years ago

Screenreaders always announce a paper-input's error message, even when there's no error present.

Expected outcome

The error message shouldn't be announced until there is an error.

Actual outcome

The error message is always announced

Live Demo

https://jsfiddle.net/knL6czt8/

Steps to reproduce

  1. Turn on a screen reader
  2. Select the input field with the screenreader
  3. Listen to the announcement. Will be something like "URL, edit text, invalid URL"

screenshot of chromevox announcing the error text

It's possible that this is expected behavior, since it's possible to phrase the error message in a way that is useful to be announced beforehand, by saying something like "Must be a valid URL" instead of just "Invalid URL". If that's the case, then this should be documented somewhere, since it's quite unexpected and easy to get wrong (see: about a dozen places in Chrome)

Browsers Affected

I've tested with ChromeOS + ChromeVox, Edge + NVDA and Safari + VoiceOver.

Thanks for the help!

Waiin-T commented 7 years ago

I also have same issue. While using multiple paper-input in dom-repeat error-message is always visible after some iterations. And below error is also occurred -

legacy-element-mixin.html:338 Uncaught RangeError: Maximum call stack size exceeded. at HTMLElement.fire (legacy-element-mixin.html:338) at HTMLElement.attached (paper-input-addon-behavior.html:25) at HTMLElement.attached (class.html:214) at HTMLElement.attached (class.html:212) at HTMLElement.connectedCallback (legacy-element-mixin.html:83) at HTMLElement.ensureInstance (dom-if.html:207) at HTMLElement.render (dom-if.html:146) at Debouncer.__renderDebouncer.Polymer.Debouncer.debounce [as _callback] (dom-if.html:113) at Debouncer.flush (debounce.html:58) at flushDebouncers (flush.html:31)…

Browsers Affected