kotovalexarian-likes-github
/
rails--rails
mirror of https://github.com/rails/rails.git
1
0
Fork 0
Code Releases Activity

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
This commit is contained in:
Sean Doyle 2020-02-22 12:20:23 -05:00 committed by George Claghorn
parent ab9cb60076
commit 614580270d
4 changed files with 27 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
actiontext/CHANGELOG.md
View File

@ -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

9
actiontext/lib/action_text/system_test_helper.rb
View File

@ -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

4
actiontext/test/dummy/app/views/messages/_form.html.erb
View File

@ -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">

11
actiontext/test/system/system_test_helper_test.rb
View File

@ -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