Files
nairobi/spec/shared/system
Javi Martín 85215e7e97 Fix aria-expanded value in related content button
The button was announced as expanded when the form was hidden and as
collapsed when the form was shown.

This is because Foundation sets the expanded attribute based on whether
the class to toggle already exists. Since initially the form had the
"hide" class and the button toggled that class, Foundation checked that
the class was already present and so set the button as expanded.

So we're changing the toggler class for a class we don't use at all,
just so Foundation initiall sets `aria-expanded=false` and then changes
it to `aria-expanded=true` after the button is clicked. Then we're
ignoring this class completely and are styling this form with CSS
instead.

We could also use a toggler class like "visible" and write something
like:

```
.add-related-content + form:not(.visible) {
  display: none;
}
```

However, using ARIA attributes is more robust as it guarantees the
styles will always be in sync with what screen reader users experience.

And we could also remove all the Foundation toggler functionality and
use our own JavaScript to handle the button state. We might do so in the
future.
2021-06-23 23:06:24 +02:00
..