Password Input Concern

[mgifford]

I think it's neat how you've built this:

https://www.magentaa11y.com/checklist-web/password-input/

But shouldn't you be using aria-live to announce that the content has changed?

[joe-watkins]

Hi @mgifford Hope you've been well! Yes, this pattern could have a live region to help communicate the change. The field type change from the text to password is another programmatic mechanism but that is not as real-time as a live container. The accessible name for the checkbox is also updated upon interaction but screen reader users must move away and back to that to hear that update.

I'm not a huge fan of the content being in the CSS layer so maybe I'll create another option with a button instead of a checkbox, bring state out of the CSS, and introduce a live region. Thanks for the inspiration - I was just speaking to a colleague about this pattern. :)