Add missing focus indicators to buttons and navigation menu items

[travis-jeans]

Requirements

• This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
• Please check to see if this issue already exists.
• It's a single bug. Do not report multiple bugs in one issue.
• It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

While developing a custom theme RBlind-Lemmy-Themes I added focus indicators to elements that had them missing. The custom Dark theme is now the default on RBlind so you can test the difference between Darkly and the custom theme which fixes the focus indicator issues.

Elements missing focus indicators:

• Posts/Comments tab (homepage)
• Show Hidden Posts / Hide Hidden Posts (homepage)
• User Profile dropdown button (homepage)

Added for the first three with a custom focus indicator color:
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }

Added a focus indicator to the User Profile toggle dropdown:
.dropdown-toggle:focus-visible { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }

I also added or altered focus indicators to the following elements so their colouring was consistent:

• Skip link button: .skip-link:focus, .skip-link:focus-visible { top: 0.25rem; left: 0.25rem !important; text-decoration: underline; box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Navbar toggler and icon buttons: a.sort-select-icon:focus svg, a[title=RSS]:focus svg, a[title="sorting help"]:focus svg, .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Give unselected tabs (like Comment) the same focus outline as other buttons. Added .btn-check:focus-visible + .btn { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Change the focus outline of secondary buttons like Next on the homepage to have the same colour as other buttons. Added .btn-secondary:focus-visible { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Change the colour of the focus indicator on Languages select cross button on Create Community page. Added .btn-outline-secondary:focus { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Make the currently selected tab focus indicator the same colour as other buttons. Added .btn-check:checked:focus-visible + .btn { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Add a focus indicator to the eye icon tabs (Show / Hide Posts). Added label.btn:focus-visible, label.btn:focus, label.btn:focus-within { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }

Other changes, to make form control focusing consistent:

• Overwrite the colour of the focus indicator. Added .btn:focus-visible { box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }
• Overwrite the colour of the focus indicator on form controls. Added .form-select:focus, .form-control:focus { border-color: var(--rblind-focus-indicator); box-shadow: 0 0 0 0.25rem var(--rblind-focus-indicator) !important; }

Steps to Reproduce

1. Select Darkly as the theme
2. Go to the homepage and go to the URL bar in Firefox/Waterfox (Ctrl+K)
3. Tab across menu items
4. Notice missing focus indicators

Technical Details

Windows, also Linux Accessible Coconut
Firefox / Waterfox
Details about the changes I made to the interface with the custom theme are on: RBlind-Lemmy-Themes (theme variables and classes)

Lemmy Instance Version

BE: 0.19.8

Lemmy Instance URL

https://rblind.com/

[dessalines]

You'd be much better off fixing these in lemmy-ui directly, so that all instances can benefit from them.

We're using bootstrap for the front-end framework, so most things (especially buttons, fields, etc) should have accessibility out of the box. But if they don't, or if we forgot to add certain aria tags or anything else, you might need to search for how to make those components accessible. Such as: https://getbootstrap.com/docs/5.3/components/dropdowns/#accessibility

I don't have time to work on this rn, but I encourage ppl to make PRs for anything we're missing.