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.
This commit is contained in:
Javi Martín
2021-06-22 21:59:27 +02:00
parent f1221e9c1c
commit 85215e7e97
3 changed files with 8 additions and 1 deletions

View File

@@ -2467,6 +2467,10 @@ table {
@include breakpoint(medium) {
float: right;
}
&[aria-expanded="false"] + form {
display: none;
}
}
.related-content-list {

View File

@@ -2,7 +2,7 @@
<%= t("related_content.add") %>
</button>
<%= form_tag related_contents_path, method: :post, id: "related_content", class: "hide", "data-toggler": ".hide" do %>
<%= form_tag related_contents_path, method: :post, id: "related_content", "data-toggler": "unused-toggle-class" do %>
<label><%= t("related_content.label") %></label>
<p class="help-text" id="related_content_help_text">

View File

@@ -29,9 +29,12 @@ shared_examples "relationable" do |relationable_model_name|
visit relationable.url
expect(page).not_to have_css "#related_content"
expect(page).to have_css ".add-related-content[aria-expanded='false']"
click_button "Add related content"
expect(page).to have_css ".add-related-content[aria-expanded='true']"
within("#related_content") do
fill_in "url", with: "#{url + related1.url}"
click_button "Add"