SFDigitalServices / formio-sfds

The form.io theme for sf.gov
https://formio-sfds.herokuapp.com/
MIT License
15 stars 2 forks source link

Add aria-required and aria-invalid to inputs #196

Closed shawnbot closed 3 years ago

shawnbot commented 3 years ago

(This is a redo of #103, which was never released)

This adds aria-required="true" to any of the elements in our templates that get required, and attempts to ensure that all inputs with the is-invalid class also get aria-invalid="true". The best place to test this is probably the error messages example: inspect each element and confirm that:

  1. If it's required it has aria-required="true"
  2. If it's invalid it gets aria-invalid="true"
  3. When it's valid it gets aria-invalid="false"

Notes on the aria-invalid patch

I tried to do this a couple of ways that unfortunately didn't work:

  1. I added a template context function that, like requiredAttributes(), returned aria-invalid="true" if !this.self.isValid(). However, it seems that isValid() requires the value and a "dirty" flag to determine whether it's really invalid, and would only return false if the dirty flag was set to true. That put the ARIA invalid state out of sync with the error message.
  2. Next, I tried adding a selector observer for .is-invalid, a class that's added to every input of an invalid component. However, this also didn't work as expected because the class name is not removed reliably, and put the ARIA state out of sync.

In the end, I went with a patch to Component#setErrorClasses, which is where the is-invalid class is actually added and removed... and which seems to be called outside of the validity checking flow where I'd expect it. I think this is the right place to do it because this is the only place where the is-invalid class is set, but it still feels like a hack. ☹️

github-actions[bot] commented 3 years ago

Size Change: +193 B (0%)

Total Size: 88.3 kB

Filename Size Change
dist/formio-sfds.standalone.js 67.9 kB +193 B (0%)
ℹ️ View Unchanged | Filename | Size | | :--- | :---: | | `dist/formio-sfds.css` | 14.1 kB | | `dist/portal.js` | 6.37 kB |

compressed-size-action