From 614580270d7789e5275defc3da020ce27b3b2302 Mon Sep 17 00:00:00 2001
From: Sean Doyle <sean.p.doyle24@gmail.com>
Date: Sat, 22 Feb 2020 12:20:23 -0500
Subject: [PATCH] Locate `fill_in_rich_text_area` by `<label>` text

This commit dovetails with [#38551] in its focus on improving the
ability to test calls to `rich_text_area` in accessibility-minded ways.

In addition to searching for `<trix-editor>` elements with the
appropriate [`aria-label`][aria-label] attribute, also support locating
elements that match the corresponding `<label>` element's text.

Now that [basecamp/trix#829][] has been merged and released, clicking on
`<label>` elements that reference `<trix-editor>` elements will move
focus into the `<trix-editor>` element.

There are still some accessible [label text][] improvements that could
be made, but extending `fill_in_rich_text_area` to account for `<label
for="...">` elements is a good start.

[#38551]: https://github.com/rails/rails/pull/38551
[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute
[basecamp/trix#829]: https://github.com/basecamp/trix/pull/829
[label text]: https://github.com/basecamp/trix/pull/829#issuecomment-699119852
---
 actiontext/CHANGELOG.md                               |  8 ++++++++
 actiontext/lib/action_text/system_test_helper.rb      |  9 ++++++++-
 .../test/dummy/app/views/messages/_form.html.erb      |  4 ++--
 actiontext/test/system/system_test_helper_test.rb     | 11 +++++++++--
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/actiontext/CHANGELOG.md b/actiontext/CHANGELOG.md
index 5b77de009b..393daabfa3 100644
--- a/actiontext/CHANGELOG.md
+++ b/actiontext/CHANGELOG.md
@@ -1,3 +1,11 @@
+*   Locate `fill_in_rich_text_area` by `<label>` text
+
+    In addition to searching for `<trix-editor>` elements with the appropriate
+    `aria-label` attribute, also support locating elements that match the
+    corresponding `<label>` element's text.
+
+    *Sean Doyle*
+
 *   Be able to add a default value to `rich_text_area`.
 
     ```ruby
diff --git a/actiontext/lib/action_text/system_test_helper.rb b/actiontext/lib/action_text/system_test_helper.rb
index 77fc9eb50b..d6b6429395 100644
--- a/actiontext/lib/action_text/system_test_helper.rb
+++ b/actiontext/lib/action_text/system_test_helper.rb
@@ -7,6 +7,7 @@ module ActionText
     # The editor can be found by:
     # * its +id+
     # * its +placeholder+
+    # * the text from its +label+ element
     # * its +aria-label+
     # * the +name+ of its input
     #
@@ -18,6 +19,10 @@ module ActionText
     #   # <trix-editor placeholder="Your message here" ...></trix-editor>
     #   fill_in_rich_text_area "Your message here", with: "Hello <em>world!</em>"
     #
+    #   # <label for="message_content">Message content</label>
+    #   # <trix-editor id="message_content" ...></trix-editor>
+    #   fill_in_rich_text_area "Message content", with: "Hello <em>world!</em>"
+    #
     #   # <trix-editor aria-label="Message content" ...></trix-editor>
     #   fill_in_rich_text_area "Message content", with: "Hello <em>world!</em>"
     #
@@ -37,12 +42,14 @@ Capybara.add_selector :rich_text_area do
       XPath.descendant(:"trix-editor")
     else
       input_located_by_name = XPath.anywhere(:input).where(XPath.attr(:name) == locator).attr(:id)
+      input_located_by_label = XPath.anywhere(:label).where(XPath.string.n.is(locator)).attr(:for)
 
       XPath.descendant(:"trix-editor").where \
         XPath.attr(:id).equals(locator) |
         XPath.attr(:placeholder).equals(locator) |
         XPath.attr(:"aria-label").equals(locator) |
-        XPath.attr(:input).equals(input_located_by_name)
+        XPath.attr(:input).equals(input_located_by_name) |
+        XPath.attr(:id).equals(input_located_by_label)
     end
   end
 end
diff --git a/actiontext/test/dummy/app/views/messages/_form.html.erb b/actiontext/test/dummy/app/views/messages/_form.html.erb
index cbaf675fff..72a70d8cad 100644
--- a/actiontext/test/dummy/app/views/messages/_form.html.erb
+++ b/actiontext/test/dummy/app/views/messages/_form.html.erb
@@ -17,9 +17,9 @@
   </div>
 
   <div class="field">
-    <%= form.label :content %>
+    <%= form.label :content, "Message content label" %>
     <%= form.rich_text_area :content, class: "trix-content",
-          placeholder: "Your message here", aria: { label: "Message content" } %>
+          placeholder: "Your message here", aria: { label: "Message content aria-label" } %>
   </div>
 
   <div class="actions">
diff --git a/actiontext/test/system/system_test_helper_test.rb b/actiontext/test/system/system_test_helper_test.rb
index 2a57fa8d88..bdea14a992 100644
--- a/actiontext/test/system/system_test_helper_test.rb
+++ b/actiontext/test/system/system_test_helper_test.rb
@@ -19,8 +19,15 @@ class ActionText::SystemTestHelperTest < ApplicationSystemTestCase
 
   test "filling in a rich-text area by aria-label" do
     visit new_message_url
-    assert_selector "trix-editor[aria-label='Message content']"
-    fill_in_rich_text_area "Message content", with: "Hello world!"
+    assert_selector "trix-editor[aria-label='Message content aria-label']"
+    fill_in_rich_text_area "Message content aria-label", with: "Hello world!"
+    assert_selector :field, "message[content]", with: /Hello world!/, type: "hidden"
+  end
+
+  test "filling in a rich-text area by label" do
+    visit new_message_url
+    assert_selector "label", text: "Message content label"
+    fill_in_rich_text_area "Message content label", with: "Hello world!"
     assert_selector :field, "message[content]", with: /Hello world!/, type: "hidden"
   end