Fix enabled/disabled phase text for screen readers

Since we were using an icon font with no text, screen readers were
announcing things like "Enabled, L", trying to read the icon generated
with CSS.

Using text and replacing it with CSS with an icon solves the problem.

We could also use aria-label, but I prefer using "Yes/No" so the text
can be shown/hidden with CSS. Also useful when using
`save_and_open_page` during tests, since the displayed page will not
have any CSS rules applied.

Out of several existing techniques to hide text [1], we're setting the
font size to 1px in combination with moving the content off-screen
because that way we can override it in the `::before` element.

Just moving the content off-screen has the inconvenient of the content
still being taken into account when calculating the text indentation.

And just using a 1px font would make a 1px-sized square appear when
selecting text, which could confuse users.

[1] https://webaim.org/techniques/css/invisiblecontent/
This commit is contained in:
Javi Martín
2021-03-08 15:49:54 +01:00
parent 1ee70464db
commit 4c02317909
5 changed files with 48 additions and 37 deletions

View File

@@ -250,6 +250,7 @@ describe "Admin budgets", :admin do
scenario "Show phases table" do
travel_to(Date.new(2015, 7, 15)) do
budget.update!(phase: "selecting")
budget.phases.valuating.update!(enabled: false)
visit edit_admin_budget_path(budget)
@@ -272,15 +273,24 @@ describe "Admin budgets", :admin do
"2015-09-15 00:00:00 - 2015-10-14 23:59:59",
"2015-10-15 00:00:00 - 2015-11-14 23:59:59",
"2015-11-15 00:00:00 - 2015-12-14 23:59:59",
"2015-12-15 00:00:00 - 2016-01-14 23:59:59",
"2015-11-15 00:00:00 - 2016-01-14 23:59:59",
"2016-01-15 00:00:00 - 2016-02-14 23:59:59",
"2016-02-15 00:00:00 - 2016-03-14 23:59:59"
],
[
"Yes",
"Yes",
"Yes",
"Yes",
"No",
"Yes",
"Yes",
"Yes"
]
]
within_table "Phases" do
within "tr", text: "Information" do
expect(page).to have_css ".budget-phase-enabled.enabled"
expect(page).to have_link "Edit phase"
end
end