Fix link focus rings

[obulat]

Fixes

Related to #4911 by @zackkrida

Description

This PR fixes most of the focus ring problems for VLink elements.

Most of VLink elements use the default outline that the browser automatically activates on focus. This PR correctly sets the color of the outline. In Chrome, the default auto outline style generates two-tiered outline (dark/light), to make sure it works in both dark and light themes). However, since we set the color of the outline with an appropriate contrast, we can use a single-color outline. To do that, we set the default outline style for focus-visible to solid, which creates a ring of single color.

To make the outline rounded, if a VLink does not set a rounded- class, then we add rounded-sm (border-radius: 2px) to it.

Testing Instructions

1. Run the app using ov just frontend/run dev
2. Go to http://localhost:8443/ and navigate around using Tab. The links in the header/footer, Openverse link and the WordPress link, as well as other links throughout the site should have a rounded outline of correct color: pink in light theme, and yellow in dark theme.
3. Narrow your screen to mobile width, and open the pages modal by clicking on the hamburger in the top right corner (on LTR). The focus rings here should always be yellow, even if the app's color theme is light.

Use the Storybook to test the links, e.g., Internal header: https://docs.openverse.org/_preview/4958/storybook/?path=/story/components-vheader-vheaderinternal--default&globals=viewport:xs

Note that in the light mode, the Openverse link and the close button in the modal still has a pink focus outline, it will be fixed in a later PR.

Check different browsers.

This PR also contains a fix to an e2e test that failed twice in the CI. The fix was to check that the sensitive switch was indeed changed before checking for the cookies.

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.
• I ran the DAG documentation generator (ov just catalog/generate-docs for catalog
  PRs) or the media properties generator (ov just catalog/generate-docs media-props
  for the catalog or ov just api/generate-docs for the API) where applicable.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[github-actions]

Full-stack documentation: https://docs.openverse.org/_preview/4958

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

[sarayourfriend]

@obulat @zackkrida are there plans to refactor the WP logo component to use the CSS-only methods of colour scheme detection? I suppose it retains the JS approach in order to support the mobile nav, which is always in dark mode... but could the mobile nav add the dark mode classname to its root element, and then follow the same approach for colours as the rest of the application? It will be confusing long term to have the JS-based pattern still present in the app, for anyone trying to understand how to correctly style components.

[obulat]

@obulat @zackkrida are there plans to refactor the WP logo component to use the CSS-only methods of colour scheme detection? I suppose it retains the JS approach in order to support the mobile nav, which is always in dark mode... but could the mobile nav add the dark mode classname to its root element, and then follow the same approach for colours as the rest of the application? It will be confusing long term to have the JS-based pattern still present in the app, for anyone trying to understand how to correctly style components.

The mobile pages modal is always black, in dark and in light theme. We use a CSS variable to set the background color of the current page, and in this modal, we set it to black (even though in the main app it can be yellow on the homepage for light, and dark gray for dark theme). We could set a similar "contrast text color" variable when we set the page background color variable for the colors of the WordPress link and Openverse logo. Would that be a better approach?

[zackkrida]

@sarayourfriend that's a great idea. @obulat is that suggestion makes sense to you as well could you create an issue for it?

[github-actions]

Latest k6 run output¹

$     ✓ status was 200

     checks.........................: 100.00% ✓ 8000      ✗ 0   
     data_received..................: 1.8 GB  8.3 MB/s
     data_sent......................: 1.0 MB  4.8 kB/s
     http_req_blocked...............: avg=9.65µs   min=1.3µs   med=2.63µs   max=4.93ms  p(90)=3.73µs   p(95)=4.08µs 
     http_req_connecting............: avg=5.8µs    min=0s      med=0s       max=4.86ms  p(90)=0s       p(95)=0s     
     http_req_duration..............: avg=568.64ms min=63.08ms med=506.64ms max=2.47s   p(90)=1.07s    p(95)=1.18s  
       { expected_response:true }...: avg=568.64ms min=63.08ms med=506.64ms max=2.47s   p(90)=1.07s    p(95)=1.18s  
   ✓ http_req_failed................: 0.00%   ✓ 0         ✗ 8000
     http_req_receiving.............: avg=153.44µs min=39.97µs med=115.56µs max=18.02ms p(90)=186.69µs p(95)=237.4µs
     http_req_sending...............: avg=23.19µs  min=6.95µs  med=20.27µs  max=6.14ms  p(90)=27.43µs  p(95)=33.91µs
     http_req_tls_handshaking.......: avg=0s       min=0s      med=0s       max=0s      p(90)=0s       p(95)=0s     
     http_req_waiting...............: avg=568.47ms min=62.96ms med=506.51ms max=2.47s   p(90)=1.07s    p(95)=1.18s  
     http_reqs......................: 8000    36.625889/s
     iteration_duration.............: avg=3.79s    min=1.16s   med=3.24s    max=11.76s  p(90)=8.33s    p(95)=8.75s  
     iterations.....................: 1200    5.493883/s
     vus............................: 8       min=8       max=30
     vus_max........................: 30      min=30      max=30

Footnotes

1. This comment will automatically update with new output each time k6 runs for this PR ↩

[obulat]

@sarayourfriend that's a great idea. @obulat is that suggestion makes sense to you as well could you create an issue for it?

Issue opened: #4998

[openverse-bot]

Based on the high urgency of this PR, the following reviewers are being gently reminded to review this PR:

@zackkrida
@dhruvkb
This reminder is being automatically generated due to the urgency configuration.

Excluding weekend¹ days, this PR was ready for review 3 day(s) ago. PRs labelled with high urgency are expected to be reviewed within 2 weekday(s)².

@obulat, if this PR is not ready for a review, please draft it to prevent reviewers from getting further unnecessary pings.

Footnotes

1. Specifically, Saturday and Sunday. ↩

2. For the purpose of these reminders we treat Monday - Friday as weekdays. Please note that the operation that generates these reminders runs at midnight UTC on Monday - Friday. This means that depending on your timezone, you may be pinged outside of the expected range. ↩