We had inconsistent indentation in many places. Now we're fixing them
and adding a linter to our CI so we don't accidentally introduce
inconsistent indentations again.
We reduce code duplication thanks to that, and make it easier
to change this field.
Note that there was one place where the "16.years" value was
hardcoded. We're moving the test for this case to the
component and changing it so the test doesn't use the default
age.
We're also removing the redundant helper method that had the
same code as a method in the User class which is called
everywhere else.
We were using similar code in four different places; six, if we count
the welcome pages seeds. Reducing duplication in the pages seeds is a
bit tricky because administrators are supposed to edit their content and
might remove the HTML class we use to define styles. However, we can
share the code everywhere else.
Note that there's a bug in the application since we show that level 2
users cannot vote for budget projects but we give them permission to do
so in the abilities model. We're keeping the same behavior after this
refactoring but we might change it in the future.
We had a link to `/census_terms`, and by looking at the code, it wasn't
so clear where this URL came from.
Using `page_path`, it's easier to understand that it comes from a page
with the `census_term` slug. It also means we'll find this line when
searching for usages of `page_path` in the code.
We forgot to remove it in commit f28a5cc49.
The generated HTML was invalid, with the error:
> Element meta is missing one or more of the following attributes:
> content, property.
Using a field with `type="tel"` causes most mobile phone browsers to
show a numeric keyboard which makes it easy to enter phone numbers.
We aren't using a number field because some browsers show "spinners" to
increment/decrement numbers (which doesn't make much sense in a phone
number) and because they don't allow characters like spaces. Phone
numbers can have characters like spaces, dashes, parenthesis, asterisks,
the plus sign, ...
Since phone number formats vary depending on the region, and sometimes
even within the same region several different formats can be used, for
now we aren't offering any kind of format validation. We could offer a
format validation that rejects just letters (although there are cases
where letters are actually allowed). However, this causes issues at both
the server side and the client side.
We could use a client-side validation adding a `pattern` attribute to
the field, but that would be something unlike anything else we use in
the application, and we would need to to write some JavaScript in order
to use a proper error message.
On the other hand, if we add a server-side validation, we might find out
existing users are invalid, and it would be impossible to update them in
the many places where we update users assuming they were valid in the
first place. We'd have to add a rake task to update existing user
records and make sure they contain a valid phone number or create a
setting so this validation only applies to new CONSUL installations.
Another option would be to add a per-form validation, so the phone
number is only validated in pages where it is introduced.
All the mentioned scenarios offer certain complexities. So, for now,
we're keeping things simple.
Co-Authored-By: decabeza <alberto@decabeza.es>
Using placeholders having similar (or identical) text as already present
as a label has a few issues.
First, it's a distraction. Reading the same information twice is
useless, requires an extra effort, and might even frustrate users.
Second, if users start typing before reading the placeholder and see it
disappear, they might think they're missing relevant information,
delete what they typed, and read the placeholder. That will get them
nowhere.
Finally, we display placeholders using a text offering very low contrast
against the background, so users don't think the placeholder is an
actual value entered in the field. Using such low contrast makes the
text hard to read, particularly for users with visual impairments.
So we're removing these placeholders.
This commit only deals with placeholder texts with similar (or
identical) texts as the label text. There might be other places where we
should replace placeholder texts with labels, but that's a different
topic.
Using `<a>` tags with no `href` means these elements cannot be activated
by keyboard users, so we're replacing them with buttons.
In the future we probably want to add more consistency so all toggle
buttons use the same code. We might also add styles depending on the
`aria-expanded` property.
Using the `_html` suffix in an i18n key is the same as using `html_safe`
on it, which means that translation could potentially be used for XSS
attacks.
Using the block syntax to generate the label with a <span> tag inside
isn't necessary after upgrading foundation_rails_helpers. Before the
upgrade, we couldn't do so because the <span> tag was escaped.
Not doing so caused crashes on applications which don't fall back to
English when a translation is missing.
We're adding them in a separate file so we can exclude it from crowdin
and so translators don't translate symbols as if they were words which
need translation.
