Commit Graph

14 Commits

Author SHA1 Message Date
Javi Martín
b8ed81c5b8 Simplify setting up admin component tests 2023-08-30 14:46:34 +02:00
Javi Martín
5311daadfe Use a button for non-GET table actions
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>`
```
2021-09-20 20:27:37 +02:00
Javi Martín
6510cb9615 Add a more detailed confirmation message
The message "Are you sure?" is usually followed by blindly clicking
"Yes" without really thinking about what one is doing. So we're
including a bit more information about what's about to happen. That way
it's more likely users will notice it when they accidentally click the
wrong button.

Ideally we would offer the option to undo every common action and then
we wouldn't have to ask for confirmation. But since that isn't the case,
for now we're adding a better confirmation message.

Note we're removing the `resource_name` parameter from the translation
to confirm the action of deleting a record. The reason is, in many
languages it only makes sense to add the model name when it's got an
associated article, and, unlike in English (where "the" is used for
every word), that article is different depending on the noun it's
related to. So we'd have to provide a translation like "name with
article, when singular" for every model.

The complexity of these translations could scalate quickly. And, given
the context, IMHO it isn't essential to add the resouce name. When we're
in the proposals index and there's a proposal named "Improve XYZ", and
we click on "Delete" and see a message saying "This action will delete
XYZ", it is implied that XYZ is a proposal.

So instead we're changing the message so it works for every record with
no need of noun-dependent articles.
2021-09-20 20:27:37 +02:00
Javi Martín
2b4b2f3442 Use aria-label in admin table actions
This way screen reader users will know which record they're going to
access when focusing on a link to a certain action. Otherwise they'd
hear something like "Edit, link", and they wouldn't know which record
they'll end up editing if they follow the link.
2021-09-20 20:27:37 +02:00
Javi Martín
6a2c01b119 Extract method to render an admin table action
This way it will be easier to change the behavior of all table actions,
like adding ARIA attributes. In the past, when we changed the behavior
of the `link_to` method, we had to change all table action classes.
2021-09-20 20:27:37 +02:00
Javi Martín
4cbf945228 Infer type for component specs automatically 2021-09-08 12:39:36 +02:00
Javi Martín
6df7f7d052 Simplify changing controllers in component tests 2021-08-10 15:00:26 +02:00
Javi Martín
c66a5a30ef Allow using table actions in different namespaces
This way we can reuse it in sections like SDGManagement and URLs will be
automatically generated as expected.
2021-01-14 17:35:38 +01:00
Javi Martín
fb23df2e5b Allow additional links in table actions component
This way we'll be able to make these links consistent.
2020-10-21 13:19:49 +02:00
Javi Martín
e3753b1ad9 Allow custom options in links to actions
Some links were using options like `remote: true`.
2020-10-19 18:56:02 +02:00
Javi Martín
497963817c Allow different confirmation texts in destroy link 2020-10-19 18:56:02 +02:00
Javi Martín
b1f9ca4ad5 Allow custom URLs in links to actions
There were a couple of cases where these links didn't point to the
default actions.
2020-10-19 18:56:02 +02:00
Javi Martín
738646a565 Allow different texts in links to actions
The texts were different for a few models, so the component needs to be
updated.
2020-10-19 18:56:02 +02:00
Javi Martín
10c095d821 Move table actions partial to a component
This partial was going to get too complex since in some places we've got
different texts, different URLs or different confirmation messages.
While we should probably try to be more consistent and that would make
the partial work in most cases, there'll always be some exceptions, and
using a partial (with, perhaps, some helper methods) will become messy
really quickly.
2020-10-19 18:56:02 +02:00