From 85215e7e97701d8f84d9b7594fc0951f8418b1de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Tue, 22 Jun 2021 21:59:27 +0200
Subject: [PATCH] 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.
---
 app/assets/stylesheets/layout.scss    | 4 ++++
 app/views/relationable/_form.html.erb | 2 +-
 spec/shared/system/relationable.rb    | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 0db486257..72a668f64 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -2467,6 +2467,10 @@ table {
   @include breakpoint(medium) {
     float: right;
   }
+
+  &[aria-expanded="false"] + form {
+    display: none;
+  }
 }
 
 .related-content-list {
diff --git a/app/views/relationable/_form.html.erb b/app/views/relationable/_form.html.erb
index 2f8a15a7f..b0ec72f08 100644
--- a/app/views/relationable/_form.html.erb
+++ b/app/views/relationable/_form.html.erb
@@ -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">
diff --git a/spec/shared/system/relationable.rb b/spec/shared/system/relationable.rb
index 1986fc4f1..91204081a 100644
--- a/spec/shared/system/relationable.rb
+++ b/spec/shared/system/relationable.rb
@@ -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"