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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user