Restore focus rings

[gabalafou]

With this pull request, I have tried to fix all of the focus rings in Sphinx Design to meet accessibility standards.

To that end, this pull request:

• Adds focus rings to dropdown admonitions when they are focussed via keyboard (i.e., :focus-visible)
• Adds focus rings to the tabs on tabbed panels (again, only for keyboard focus, not mouse)
  • Related but separate change: reduced the top padding for these tabs because when they are keyboard-focussed, the asymmetry of the top and bottom padding becomes very apparent.
  • Fixes a typo in the SCSS to apply a rule that removes the "tap highlight" on touchscreen devices when the user taps a tab (the typo was causing the rule to remove the focus ring on keyboard focus, which was probably not the intention)
• Fixes the broken focus ring on clickable cards (see .sd-stretched-link in the code diff)
• Offsets most Sphinx Design focus rings by 0.25 rem from the element's border. This is to ensure that the focus ring can be perceived even in situations where the background color of the focussed element is the same or nearly the same color as the focus ring.
• Sets the focus ring color to match the border color or background color of links and buttons.

Background

Ever since the v6 release of Sphinx Design broke the focus rings in the PyData Sphinx Theme back in July, I have wanted to fix this issue upstream.

47f6796 is the commit that first removed focus rings from the <summary> element. It's not at all clear to me why this decision was made. In all modern browsers, <summary> elements do not display outlines when they are focussed with a mouse, only when they are focussed with a keyboard. We fixed this in the PyData Sphinx Theme by simply overriding the outline: none rule, but PR #192 (which was released in v6) restructured the CSS, leading it to have higher specificity than our override, thus overriding our override.

So it seemed that going forward, it would be better to revert the code in Sphinx Design that removes focus rings (for seemingly no good reason).

[gabalafou]

self review

[gabalafou]

This is mainly for link-cards where the <a> tag has a class like sd-btn-info applied to it

[gabalafou]

It's important to put some space between the button and the focus ring in case the two have matching colors.

[gabalafou]

The trick of using ::after for clickable link-cards has an unfortunate drawback.

The browser's default stylesheet has some :focus-visible rules that help ensure the focus ring is visible. However the ::after pseudo-element does not receive browser focus. Its parent element, the anchor element, is what receives focus. Therefore the pseudo-element does not match the browser's default :focus-visible rules.

This is why I set the outline color here explicitly, because the ::after pseudo-element will not pick up any of the browser default styles, and without those styles or explicitly setting the outline color, the focus ring color would default to currentcolor. When you have a link with white text, this results in a white focus ring, which is not visible for a white-background site.

[gabalafou]

This file sets the focus ring color to match either the border color or the background color of links and buttons.

[gabalafou]

As mentioned in the PR description, I really don't understand why this rule was ever put in place.

[gabalafou]

I'm almost certain this was a typo. It has the unfortunate consequence of turning off focus rings on tabs. Here's how. The &:not(.focus-visible) will match the input element because there is no .focus-visible class on it (I searched the code base thoroughly). So this selector might as well be .sd-tab-set > input + label, which will match the tab, set its outline to none.

I think this rule was intended to prevent an effect on touchscreen devices where you tap an element and it gets briefly highlighted (or darklighted).

[gabalafou]

As mentioned in the PR, this makes the top and bottom padding symmetrical. It's unclear to me why there was more top padding to begin with. I thought maybe it was to create some white space above the tabbed panel, but it already has top margin, so this value is a bit puzzling to me.

I may be missing something here.

[gabalafou]

This helps ensure that this extension's focus rings are accessible. If the focus ring hugs the element, if there is no gap, and the background or border color of the element matches the focus ring, then it will be hard to perceive the focus ring, and therefore not accessible.

For reference, see WCAG 2.2 Understanding Docs - Understanding SC 2.4.13:
Focus Appearance (Level AAA)