4c02317909
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/
26 lines
508 B
Ruby
26 lines
508 B
Ruby
class Admin::BudgetPhases::PhasesComponent < ApplicationComponent
|
|
attr_reader :budget
|
|
|
|
def initialize(budget)
|
|
@budget = budget
|
|
end
|
|
|
|
private
|
|
|
|
def phases
|
|
budget.phases.order(:id)
|
|
end
|
|
|
|
def dates(phase)
|
|
Admin::Budgets::DurationComponent.new(phase).dates
|
|
end
|
|
|
|
def enabled_text(phase)
|
|
if phase.enabled?
|
|
tag.span t("shared.yes"), class: "budget-phase-enabled"
|
|
else
|
|
tag.span t("shared.no"), class: "budget-phase-disabled"
|
|
end
|
|
end
|
|
end
|