Outline on categories not appearing for check boxes - 508/Accessibility issue

Doesn't seem to happen on Firefox either. I don't have access to Safari right now, but will check later and see if I can spot a reason for it to only happen on that browser.

Confirmed the described behavior on Safari: if I try to tab through the page, I only get the keyword search, the sort filter, and the tabpanel with the module list.

However, I think that may be an issue with Safari browser settings, rather than anything that needs to be changed in the code here: there's seemingly a years-long issue in Safari where you have to adjust its settings (Safari > Settings > Advanced > check "Press Tab to highlight each item on a webpage") in order for tabbing to function as expected. Here's an example blog post about it: https://www.seanmcp.com/articles/tab-focus-not-working-in-safari/ The Stack Overflow post it links to goes back to 2009.

Once I enable that setting, I can tab through the page as expected. There may be an issue with the checkboxes along the side, since I don't see a focus state applied to those (only in Safari; I do in Chrome and Firefox) as I tab through, but everything else looks fine to me.

I agree with @KurtTrowbridge's comments.

Tabbing through the categories only works in Safari if the "Press tab to highlight..." advanced option is enabled. However, I presume people who need keyboard navigation will be aware of this setting.

With that setting enabled, the category checkboxes do not show any visual indication when they have the focus. Pressing space does select the current checkbox, but you don't know what checkbox will be selected until you press it.

I also tested the default Extend tab (the old modules page), and the checkboxes do show a green outline when they have the focus on this page. I suspect this may be a CSS setting, but will have to look into why it only causes a problem on Safari.

I did a little more digging here, and Safari has an issue styling hover/focus states on checkboxes and radio buttons. The recommendation to fix it usually seems to be resetting checkbox styles with appearance: none; and -webkit-appearance: none, alongside other CSS to restyle the inputs. In testing a few themes, the Olivero and Adminimal themes both do that for all radio/checkbox inputs, and as such, hover/focus states on checkboxes in the sidebar look as expected in Safari while using either of those as the admin theme; Claro and Gin do not have that CSS and end up with no applied hover/focus styles.

I noticed #3300262 📌 Adjust the checkbox design for the categories sidebar to the Drupal Design system Postponed already brought up the need for the checkbox styles to change to match the Drupal design system, including the impact it would have on hover styles, and that's postponed due to larger CSS refactoring work in #3285889 🌱 [meta] Svelte app themability Needs work . Not sure if the former makes this a duplicate or if there's more we should do in this issue.

Thank you, everyone! this is an improvement over the current state of affairs, so i will merge it. then we can advance on to making the checkboxes match the design system better.

Automatically closed - issue fixed for 2 weeks with no activity.