mirror of
https://github.com/rails/rails.git
synced 2022-11-09 12:12:34 -05:00
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:
parent
ab9cb60076
commit
614580270d
4 changed files with 27 additions and 5 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
Loading…
Reference in a new issue