Add visually-hidden where useful

[Marzal]

Hi @johnspurlock-skymethod, trying to know where it comes from all the tabindex=0 on the button elements (I think it redundant but it doesn0t matter), I've found that you are using shoelace and i have take it a look on a11y options.

Do you mind if I put some visually-hidden lines in a few places?

For example in all links that open a new window like:
https://shoelace.style/components/visually-hidden/#links-that-open-in-new-windows

Or a hidden <h2>Detailed stats by month</h2> on

op3/worker/static/show.htm

Line 206 in 941e9ea

(So all the other boxes can be changed to h3)

This probably would need importing this component (but not sure in how many places)

op3/worker/routes/show.ts

Line 117 in 941e9ea

shoelaceCommon: computeShoelaceCommon('sl-card', 'sl-spinner', 'sl-icon-button', 'sl-button-group', 'sl-button', 'sl-dropdown', 'sl-menu', 'sl-menu-item', 'sl-switch', 'sl-icon', 'sl-relative-time', 'data-loaded'),

And 2 news translatable string:
download_details: "${s:download_details:'Download details'}",
on_new_window: "${s:on_new_window:'opens in a new window'}",
For example.

[johnspurlock-skymethod]

Do you mind if I put some visually-hidden lines in a few places?

Yes, absolutely if it makes sense for accessibility. Go ahead and introduce sl-visually-hidden where appropriate

(So all the other boxes can be changed to h3)

I'm not sure I understand this one - can you explain a bit more? Or just let me see it in a PR

And 2 news translatable string:

Yes that's fine when it makes sense, just let me know when a PR contains a new string and make sure the key is not used elsewhere, I have to run some automation to upload to the translation service and download/import the results etc.

importing this component (but not sure in how many places)

Yes, if you end up using sl-visually-hidden in that show htm (or any other new sl component), add it to that js list. The component will be loaded no matter what, but that list defines which events to wait for before making the page visible (to avoid FOUCE)

[Marzal]

I think this batch of changes are ready to send to production / transifex

• open_in_new_window : opens in a new window
• detailed-stats-sections : Detailed stats sections
• conf_graph_downloads: Config downloads graph

[johnspurlock-skymethod]

Ok, regenned and uploaded to transifex. Once the three new strings are translated into all six op3 langs, I'll deploy to production

[Marzal]

sl-visually-hidden added to links with target=_blank
#53
Normally the indication is also visually with a icon, but don't know how that would look.

Also added a missing label on a button
#52

I will wait to test those changes first on ci before making the third PR with the h2-h3 refactor.
For this, what text do you think suits better as a heading section before the monthly stats at the bottom?
"Detailed stats by month", "Detailed monthly stats" ...

Between "Página 1 de 28"
and
Principales ... boxes
That would be the h2 text, and the the "boxes" will be a h3 instead of a h2. So it's easy to navigate the web with "sections"

[johnspurlock-skymethod]

ok thanks, those two are merged

what text do you think suits better as a heading section

hmm, it's hard to think of a heading that is inclusive of all of those breakdowns + download, which is probably why there is nothing there!

perhaps "Detailed breakdowns by category" or just "Detailed stats sections"

[Marzal]

Let's test with #54 (I left a doubt about string variables in the PR)

[johnspurlock-skymethod]

Merged - can we get rid of the extra space though? see prod vs ci