There were times when some actions had text expanding over two lines
while other actions had text on just one line.
Since all the items in a row had the same height, the elements with just
one line added a blank second line. This was obvious when hovering with
the mouse or focusing on the element with the keyboard. It looked weird
when the element received focused, and it could also lead to
unintentional clicks when clicking on the blank space below the element.
The underline text decoration looked a bit strange with the icon on top
of it, and we had an inconsistency since links had a text decoration but
buttons didn't. I think we can remove it since both the color of the
icon and the cursor change on hover and that's enough feedback.
And we were accidentally overwriting the color of the investments link
on hover and focus.
By default, Rails disables submit inputs (<input type="submit">) when
they're pressed so we avoid a double-submission when users click the
button twice.
However, Rails does not disable submit buttons (<button type="submit">)
when they're pressed. This means there's a chance users might press the
button several times. Even if most our table actions are idempotent, it
might cause certain issues. For instance, pressing the "Delete" button
twice means the second request might raise an
`ActiveRecord::RecordNotFound` exception.
Disabling the button also gives feedback to users, letting them know
they've correctly clicked the button.
Links acting like buttons have a few disadvantages.
First, screen readers will announce them as "links". Screen reader users
usually associate links with "things that get you somewhere" and buttons
with "things that perform an action". So when something like "Delete,
link" is announced, they'll probably think this is a link which will
take them to another page where they can delete a record.
Furthermore, the URL of the link for the "destroy" action might be the
same as the URL for the "show" action (only one is accessed with a
DELETE request and the other one with a GET request). That means screen
readers could announce the link like "Delete, visited link", which is
very confusing.
They also won't work when opening links in a new tab, since opening
links in a new tab always results in a GET request to the URL the link
points to.
Finally, submit buttons work without JavaScript enabled, so they'll work
even if the JavaScript in the page hasn't loaded (for whatever reason).
For all these reasons (and probably many more), using a button to send
forms is IMHO superior to using links.
There's one disadvantage, though. Using `button_to` we create a <form>
tag, which means we'll generate invalid HTML if the table is inside
another form. If we run into this issue, we need to use `button_tag`
with a `form` attribute and then generate a form somewhere else inside
the HTML (with `content_for`).
Note we're using `button_to` with a block so it generates a <button>
tag. Using it in a different way the text would result in an <input />
tag, and input elements can't have pseudocontent added via CSS.
The following code could be a starting point to use the `button_tag`
with a `form` attribute. One advantage of this approach is screen
readers wouldn't announce "leaving form" while navigating through these
buttons. However, it doesn't work in Internet Explorer.
```
ERB:
<% content_for(:hidden_content, form_tag(path, form_options) {}) %>
<%= button_tag text, button_options %>
Ruby:
def form_id
path.gsub("/", "_")
end
def form_options
{ id: form_id, method: options[:method] }
end
def button_options
html_options.except(:method).merge(form: form_id)
end
Layout:
<%= content_for :hidden_content %> # Right before the `</body>`
```
Styles on keyboard focus are essential for keyboard navigation; without
them, keyboard users wouldn't see which element they're currently
interacting with. That's why we use an `outline` on elements having the
current keyboard focus.
However, this is sometimes annoying for mouse/touchscreen users, since
clicking/touching an element also gives it keyboard focus.
When clicking on a button performing some kind of action through
JavaScript, keeping the outline on the button after clicking it is
distracting.
Even after clicking a link, for some users having the outline present
while they wait for the next page to load is annoying.
That's why modern browsers (at the time of writing, 74%) implement the
`:focus-visible` pseudoclass, which selects elements which have received
focus using the keyboard, but not elements which have been
clicked/tapped on. We can use it to provide focus styles for keyboard
users without getting in the way of mouse/touchscreen users.
Usually we wouldn't use a feature which isn't supported in more than 96%
of the browsers out there. However, in this case we've got a solid
fallback: we just use the `:focus` pseudoclass. Since the `@support` CSS
condition doesn't accept pseudoclasses as parameters, we're disabling
`:focus` styles only on browsers supporting the `:focus-visible`
pseudoclass using the `:focus:not(:focus-visible)` selector, which will
be ignored by browsers without support for `:focus-visible`.
Since now users receive less feedback when clicking/touching a link or a
button, we're adding styles for the `:active` pseudoclass. This way
users will know which item they're clicking/tapping on. I'm not sure the
outline is a good option for this case, though; I think for touchscreen
users a better solution would be to apply the styles we apply on hover.
We might change it in the future.
Note grouping styles together like this would *not* work:
```
&:focus,
&:focus-visible {
// Styles here
}
```
Browsers not supporting the `:focus-visible` pseudoclass would ignore
this statement completely, meaning they wouldn't apply the styles on
`:focus` either.
We lost focus styles on certain controls in commit 4dad04ae3, since we
were applying a border with a rule which had more precedence than the
rule of border on focus.
We were using a focus outline on links, but weren't doing the same for
buttons. Since sometimes browsers use a default outline which is barely
visible, this was very disorienting when browsing using the keyboard; we
were navigating through links that clearly indicated where the keyboard
focus was, and when reaching a button suddenly we had this almost
imperceptible feedback. Even if I'm used to it, my first reaction is
always "where did the focus go?" until I realize it's now on a button.
This is even more confusing because we've got buttons looking like links
and links looking like buttons.
Note that in the rules for the `:focus` styles we're including buttons
and the `[type="button"]` attribute. This seems redundant since those
styles are already covered by the `button` selector. However, Foundation
adds styles to buttons with the `[type]` attribute. Since the attribute
selector has precedence over the tag selector, we need to use the
attribute selector as well in order to override Foundation's styles.
There were no elements matching this selector since commit d679c1eb7 and
these styles were completely ignored. I'm re-adding the ones with make
sense in my humble opinion. I'm not adding top and bottom paddings since
they affect the way the height of the element is calculated, and am not
sure about the intention behind setting the height property.
The "Sign in" or "My account" links and the main navigation are
different elements, and they're in different places on medium and large
screens. Now we're also separating them on small screens.
Since the `.vertical` class in the menu added quite a few styles and it
was difficult to overwrite them, we're simply removing this class from
this element. This way we're also removing the huge space between the
menu button and the first element of the navigation.
On small screens, the "Sign in", "Register", "My content", "My account"
and "Sign out" links didn't have much padding nor space between them,
and it was easy to accidentally click the wrong link.
This change also positively affects the menu on medium and large
screens. When one of the options (like "SDG content") had a text
spanning over two lines (like it happens in Swedish), there was barely
any space between those two lines. So we're using `line-height: inherit`
instead and adjusting the padding accordingly.
It was broken since we fixed issues with other image fields in commit
394a94cbf, because there we added a fieldset for the image fields, and
so they inherited the styles in budget phases fields (these styles were
added before it was possible to attach an image to a phase).
When, on small screens, a navigation element had a very long text
causing it to span over multiple lines, the space between each line was
the same as the space between elements. This made it hard to see where
elements started and ended.
Using a padding to separate the contents of one element and the contents
of the next one solves the issue.
User testing has shown this filter isn't really useful and sometimes
makes users wonder what it's about. This is particularly true in CONSUL
installations which don't change the default values (most of them),
since users will see a filter with options like "Official position 1".
This way, when the language is written form right-to-left, elements
using Foundation mixins/classes will float to the opposite direction as
they do in left-to-right languages. The same will apply to text
alignment.
To offer full support for RTL languages, we need to change every single
reference to `float: left`, `float: right`, `text-align: left`,
`text-align: right`, and possible adjust other properties like `left`,
`margin-left`, `padding-left` or `border-left`. In the meantime, we at
least partially support these languages.
Replacing `float` with `flex` when possible would also improve RTL
support.
This way the code is easier to follow; the code checking whether the
list has contents is in the partial rendering the list.
We also remove some duplication setting up related content in the
controllers.
For some reason, we have to manually ignore i18n keys which were
automatically ignored when the code was in the view.
When render the investment list component with the link "see all
investments", now we redirect to groups index page when a budget has
multiple headings.
The budget header was supposed to be huge, but only in the participatory
budgets index or show actions. It was still huge, with plenty of empty
space, when there was no budget, or in the "submit my ballot" and
"select a heading" pages.
In commit cc6f9391f we made the images and documents file inputs
invisible (instead of using `display: none`) in order to make it
possible to attach images and documents using the keyboard.
However, since the error messages associated to these inputs has the
same HTML class as the inputs, we were also hiding them (the `display:
none` didn't affect the error messages because they've also got the
`is-visible` class).
Using the `[type=file]` selector we make it more explicit that we only
want to style these inputs.
I'm not adding a test for this scenario because technically the text is
there and I'm not sure how to test for the presence of invisible
elements.
We were hiding the file input and styling the label as a button instead.
Since clicking on a label has the same effect as clicking on the input,
the input worked properly for mouse and touch screen users.
However, hiding the input makes it inaccessible for keyboard users,
since labels don't get keyboard focus, but inputs do.
So we must not hide the input but make it invisible instead. But we
still need to hide the input (alongside the label) after a file has been
attached.
We could add some extra JavaScript to hide the input when we hide the
label. Since the JavaScript is already quite complex and my first few
attempts at changing it failed, I've opted to assume that the input (and
its label) must be hidden whenever there's already a file name, and
implement that rule with CSS.
Note we're using the `:focus-within` pseudoclass to style a label when
focus is on the input. This rule (at the time of writing) is only
supported by 93.5% of the browsers. Keyboard users without a screen
reader and using the other 6.5% of the browsers will still be able to
focus on the field but might not notice the field has received focus.
Since the percentage of affected users will decrease over time and until
now 100% of keyboard users were completely unable to focus on these
fields, for now we think this is a good-enough solution.
This way screen reader users will hear the name of the file before
hearing about the link to destroy it. We were already displaying it this
way visually by having the file name on the left and the destroy link on
the right.
Thanks to this change we can also simplify the code which dynamically
changed the layout.
We've deprecated the "icons" font since we started using Font Awesome
two years ago and using it caused some screen readers to announce an "l"
before the content of every list item.
Since we're going to reuse this pattern in other forms, we shouldn't
rely on the header having just one element. There could be a subtitle.
So we're changing the CSS to be less dependent on a very specific HTML
structure.
Regarding the subtitle, the original idea was to have both an <h1> and
an <h2> element inside the header. However, the W3C advices against it
[1]:
> h1–h6 elements must not be used to markup subheadings, subtitles,
> alternative titles and taglines unless intended to be the heading for
> a new section or subsection.
So we ended up including the subtitle inside he <h1>. We could also add
it in a separate <p> tag. However, in this case I think it's better to
include it in the <h1> (and in the <title> tag) because it helps to
uniquely identify the current page from other pages.
Due to some rounding issues in Firefox, we're manually moving the polygon
6px so there isn't a blank space between it and the icon on the right.
And due to rounding issues in Chrome, we're adding one extra pixel to
the bottom of the polygon defining the clip-path.
[1] https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements
So we don't add the same lines to pretty much every stylesheet we
create.
Eventually we'll remove this code and add a padding to every <main>
element, or (even better) to the <body> element itself.
In commit 49b406199 we added an extra `<span>` element just so we could
add an icon to the right while maintaining both the title and subtitle
on the left.
We can do the same thing without the extra `<span>` element, absolutely
positioning the element and leaving enough padding.
We had an additional `<div>` just to add a background color, when we can
do it by applying the background color to the whole `<main>` element and
then the body background color to the optional fields.
However, I've decided not to do so. The main purpose of changing the
background color is to highlight the required fields. The benefits of
changing the background color of the header as well are unclear. When in
doubt, we're using the solution which requires less code.
The `icon-budget` hasn't been used in this context for a long time;
maybe since commit d0b8fef6b.
The `document-form` class was removed in commit 6c1d828a6.
Finally, the `topic-new` and `topic-form` were removed in commit
c887cb736.
Now the padding is only applied in two places (administration forms) so
we can apply it just there instead of applying it everywhere and then
removing it in most places. We're using the `column` class here because
it's what's used in the rest of the fields of these forms and because we
haven't defined (yet) general margin/padding rules for the
administration views.
We don't need any row classes anymore because the <body> already has a
maximum width. As for columns, we only have one column in this form, so
we don't need them either. Besides, the form's parent element already
has a padding.
So they follow the same convention used in proposals.
Note the styles are for elements which appear in the "new" view but not
in the "edit" view, so we only have to include them in one place.
We don't need any row classes anymore because the <body> already has a
maximum width. As for columns, we only have one column in this form, so
we don't need them either. Besides, the form's parent element already
has a padding.
Although most CONSUL installation don't enable the translation
interface, we're adding some code to take this case into account.
We can give the padding to the whole page instead of giving it to
individual elements.
On the minus side, now padding in the SDG pages is not the same as the
padding in the homepage, so we need to add an extra padding to the
participation feeds in only one of these cases.
Instead of adding the padding to each individual element inside the
container, why not adding padding to the container itself? The answer is
"because we want the background of the children elements to take the
width of the whole screen". But this generates either HTML cluttered
with elements to add padding or repetitive padding definitions in the
CSS.
So now we only define the padding once, and when an element requires a
full width background or border, we use the `full-width-background`
mixin.
In this case the code is a bit more complex because the header is also
used in the dashboard and admin layouts:
* In the public layout, the body has a margin, so we include the mixin
to take margin into account
* In the dashboard layout, the header itself has a margin, so we include
the same mixin
* In the admin layout, the headet doesn't have a margin but gets the
whole width, so in this case we include the mixin which dosen't take
the margin into account
In the future, the idea is to apply this principle to the <body>
element and remove the `@include grid-column-gutter` in the CSS as well
as the `small-12 column` classes in the HTML.
Note we use the `calc()` function inside the mixin instead of using it
in the `$full-width-margin` variable. That way we avoid nested `calc()`
operations, which don't work in Internet Explorer.
Also note we're using `flex-grow: 1` to make one element appear on the
left of the screen and the other one on the right. It would be easier to
use `justify-content: space-between` (which is actually the default for
the top-bar element). However, there's a bug in Internet Explorer and
old versions of Firefox; they include the absolutely-positioned
`::before` element we use to set the full width background when
calculating where to position the elements. The bug was fixed in Firefox
52 (released in 2017).
Finally, we're removing the padding from our logo. In order to allow
logos like the new one and at the same time provide backwards
compatibility to logos in existing CONSUL installations, we're relaxing
the validation rule for the logo width.
Using `flex` instead of a fixed width for the navigation, the elements
take all the available space when the search form isn't present. That
wasn't the case before and produced a strange effect on medium-sized
screens.
This way we also align the search to the right.
The elements were given a minimum width of `rem-calc(240)` (that is,
15rem). Considering one element is double the width of the other one,
that means that in screens between 40rem and 45rem there would be a
horizontal scrollbar.
Adding a `flex-wrap: wrap` property fixes the problem. We're also using
`flex-basis` to guarantee a minimum width and make one element be double
the size of the other one when they're on the same line. No need to add
breakpoint rules due.
Finally, we're adding an artifitial gap between flex elements so we can
remove the `@include grid-col` rules.
In the case of the public layout, the row element was originally there
so the content of the top links had a maximum width. Since now the body
has that maximum width, we no longer need the row element.
In the other layouts I guess the row elements were added because there
were float elements inside them. We can use a flexbox layout instead and
these elements are no longer necessary. This also makes the layout more
robust when there isn't enough space on one line for both the language
selector and the external links.
Note we're using `flex-grow: 1` to make one element appear on the left
of the screen and the other one on the right. It would be easier to use
`justify-content: space-between`. However, there's a bug in Internet
Explorer and old versions of Firefox; they include the
absolutely-positioned `::before` element we use to set the full width
background when calculating where to position the elements. The bug was
fixed in Firefox 52 (released in 2017).
