While people using screen readers already have keyboard shortcuts to
jump to the <main> tag, there are people who navigate the page with the
keyboard using just the tab key, and for them, this link provides a way
to save time and start reading the main content instead of having to
manually go through all the navigation links every time a new page is
loaded.
Note that we had to add an additional `width: 0` rule because
Foundation's `element-invisible` would apply `1px` and the test checking
for `visible: :hidden` would faile.
Many pages had this tag, but many other didn't, which made navigation
inconsistent for people using screen readers.
Note that there are slight changes in two pages:
* The homepage now includes the banner and the content of the
`shared/header` element inside the <main> tag
* The budgets index now includes the banner inside the <main> tag
I see both potential advantages and disadvantages of this approach,
since banners aren't necessarily related to the main content of a page
but on the other hand they aren't the same across pages and people using
screen readers might accidentally skip them if they jump to the <main>
tag.
So I'm choosing the option that is easier to implement.
Note we're adding a `public-content` class to the <main> element in the
application layout. This might be redundat because the element could
already be accessed through the `.public main` selector, but this is
consistent with the `admin-content` class used in the admin section, and
without it the <main> element would sometimes have an empty class
attribute and we'd have to use `if content_for?(:main_class)` or
`tag.main` which IMHO makes the code less consistent.
The Capybara::DSL monkey-patch is only done on the `visit` method
because it's the only reliable one. Other methods like `click_link`
generate AJAX requests, so `expect(page).to have_css "main", count: 1`
might be executed before the AJAX request is finished, meaning it
wouldn't properly test anything.
We were testing what happens when clicking on a geozone without HTML
coordinates, which won't happen in a real browser.
So we're now defining the HTML coordinates and clicking on the area in
the test, which is what real people will do.
We also avoid having two consecutive `visit` calls, which will interfere
with the way we plan to test the presence of the <main> tag after every
`visit`.
Note that, the test didn't work with the HTML coordinates defined in the
`with_html_coordinates` trait, with Capybara showing the following
error:
```
Selenium::WebDriver::Error::ElementClickInterceptedError:
element click intercepted: Element
<area shape="poly"
coords="30,139,45,153,77,148,107,165"
href="/proposals?search=California"
title="California" alt="California">
is not clickable at point (413, 456).
Other element would receive the click:
<img usemap="#map" src="/assets/map.jpg">
```
The cause of this error was the strange shape of the polygon, which was
greatly concave and and so the middle of its area wasn't part of it.
We're changing the polygon so it's now convex and when Capybara clicks
on its middle point everything will work as expected.
Note that we keep :created_at order as complement to new :order field.
We do this so that current installations will not notice any change in the
sorting of their cards when upgrading, as the default "order" field will always
be 1, so it will continue to sort by the "created_at".
We are ensuring that only position field is rendered only on
non-header cards.
Note that we have 3 sections that use widget cards:
- Homepage (cards and header cards)
- Custompages (only have cards)
- Sdg Homepage (cards and header cards)
So now related badges are together. First paragraph, legal stuff.
Second paragraph, technical tools and status. Third paragraph, links
related to collaboration.
After commit 52ec5094f, we started to get a warning when running out
test suite:
```
WARNING: The #<Class:0x00007958c06fb8e0> component rendered HTML-unsafe
output. The output will be automatically escaped, but you may want to
investigate.
```
The reason is that, for security reasons, since version 3.9.0,
ViewComponent no longer renders unsafe output in the `call` method, so
we need to make sure the rendered text is safe. This is similar to what
Rails automatically does in views with `<%= %>`.
While this change doesn't affect the application (this class is only
used in a test), with it we avoid the warning.
So now we know where to use the `where.missing` method which was
introduced in Rails 6.1.
Note this rule didn't detect all cases where the new method can be used.
Even though we're already applying this rule since commit 08b12a78f,
it's very useful to have it so we don't accidentally introduce code that
won't work with Rails 7.
After upgrading to Rails 7, this rule will no longer be necessary, since
the code using the deprecated syntax will not work and so we'll notice
it immediately.
This link used to open in a new window, and we accidentally changed that
behavior while refactoring it in commit c2710de5f.
Since we're adding a test for this case, and the Proposals::NewComponent
class is similar, we're adding a test for that class too. In the case of
proposals, we need to sign in a user because the proposals form contains
fields to attach image, that currently rely on a user being signed in.
This test is failing often due to an "Unable to autoload constant"
error, that will be fixed after switching to zeitwerk.
Just like it happened in the the "Polls can be listed" test, the reason
seems to be accessing a page containing several ActiveStorage
attachments. However, since this test only makes sense when two or more
images are displayed on the page, we can't change the test so create
just one image.
So, for now, we're commenting the test, and we'll uncomment it again
when we enable zeitwerk in version 2.2.0.
Code Climate was failing to analyze our repo because their rubocop 1.31
doesn't support rubocop-capybara.
Since we're using rubocop 1.56.4 in our code, we're going to use
version 1.56.3 for Code Climate which, at the time of writing, is the
latest available version in Code Climate.
Creating records after starting the browser with the `visit` method
sometimes results in database corruption and failing tests on our CI.
Splitting some tests or merging them together solves the issue.
When running these tests, under certain conditions, we get a warning
followed by an error:
```
activesupport-6.1.7.7/lib/active_support/dependencies.rb:502:
warning: already initialized constant ActiveStorage::Representations
activesupport-6.1.7.7/lib/active_support/dependencies.rb:502:
warning: previous definition of Representations was here
Failure/Error: raise LoadError, "Unable to autoload constant
'#{qualified_name}', expected #{file_path} to define it"
LoadError: Unable to autoload constant
ActiveStorage::Representations::RedirectController, expected
activestorage-6.1.7.7/app/controllers/active_storage/representations/redirect_controller.rb
to define it
```
The error seems to take place when we request a page in a test that
loads two (or more) ActiveStorage images if ActiveStorage hasn't loaded
yet, although it's a flaky error and so the test doesn't always behave
like this.
We've tested that switching to zeitwerk solves the issue but, since we
aren't switching to zeitwerk in version 2.1.1 and we'd like this version
to run all tests correctly, for now we're changing the tests so they
don't load two records with images.
On of these tests ("Polls Index Polls can be listed") fails on my
machine when run individually. I haven't been able to consistently
reproduce the other ones.
The `use_helpers` method was added in ViewComponent 3.8.0, and it's
included by default in all components since version 3.11.0.
Note we sometimes delegated the `can?` method to the controller instead
of the helpers, for no particularly reason. We're unifying that code as
well.
