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/
Using 10000px means content will be visible on screens with ultra-high
resolution (although I don't think they exist nor will exist anytime
soon).
Having screens in the future with a width of 1000rem is less likely,
since a line with 1000 characters would be pretty much impossible to
read.
We're going to change it a bit, and using a component allows us to use
the `header` method and easily add a title to this page, which lacked
the `<title>` tag.
There was duplication between the index and the show views, and when we
changed the design of the phases in the index we forgot to change the
subheader in the other page as well.
There were some issues using `.budget.expanded`, like a link having that
class which would force us to a `:not(.button)` selector or similar,
making the CSS more complex.
Currently this change is barely beneficial (if at all), but it doesn't
harm and might be useful in some cases. For instance, the `datetime`
attributes generates a date containing time zone information, which the
text shown on the screen does not, and styling dates with CSS is now
easier.
This makes the table easier to identify when writing tests and using
screen readers.
Since we do not render any other table captions anywhere else, we're
making the caption invisible so only screen reader users will be
affected by this change.
While trying to add the target="_blank" to this link I noticed that this attribute
no longer works in some places in the application, such as the terms and
conditions link in the sign_up page.
For the time being I think we can resolve it this way in this case and deal with
this issue in a separate PR.
This help page can only be accessed from either the help page or the forms.
There is no button in the navigation bar related to this page.
For this reason we do not mark any section of the navigation bar as active
when we are on this page..
In this page we will render a list of clickable Goals icons that will show their
targets and related local targets
Co-authored-by: Senen <senenrodero@gmail.com>
This component was rendered on different pages so there were no conflicts
with static id's.
Now in the SDG help page we are going to render them all at once, so we
convert the static identifiers to dynamic.
