[A11Y] Side nav items have no keyboard focus styles

[davwheat]

Bug Report

Current Behavior

Most side nav items are missing keyboard focus-ring styling which makes it almost impossible to tell if they are focused.

Possible solution

There are a few different approaches that could take place.

.addAccessibilityFocusRing() mixin

A mix-in would allow for re-use throughout core and extensions, providing the most open solution possible.

I was working on implementing this on giffgaff's theme, but it might be better suited to the core repo instead (modified to fit core's styling, of course!)

// Adds a pink focus ring to elements

/** 
 * This mixin allows support for a custom focus
 * selector to be supplied.
 *
 * For example...
 * 
 *? button { .addKeyboardFocusRing(":focus-within") }
 * becomes
 *? button:focus-within { <styles>  }
 *
 * AND
 *
 *? button { .addKeyboardFocusRing(" :focus-within") }
 * becomes
 *? button :focus-within { <styles>  }
 */
.addKeyboardFocusRing(@customFocusSelector) {
  .focusRingStyles() {
    outline: 2px solid @gg-color-light-pink;
  }

  @realFocusSelector: ~"@{customFocusSelector}";

  &@{realFocusSelector} {
    .focusRingStyles();
  }
}

.addKeyboardFocusRing() {
  .focusRingStyles() {
    outline: 2px solid @gg-color-light-pink;
  }

  // We need to declare these separately, otherwise
  // browsers will ignore `:focus-visible` as they
  // don't understand `:-moz-focusring`

  // These are the keyboard-only versions of :focus
  &:-moz-focusring {
    .focusRingStyles();
  }
  &:focus-visible {
    .focusRingStyles();
  }
}

Environment

• Flarum version: 0.1.0-beta.15 (and dev-master)

[SychO9]

For this specific case, i.e dropdown menu items (yes the sidebar is actually a dropdown component), couldn't we just remove the CSS block that disables the outline on focus ? Browsers should automatically have an outline on focus I believe

.Dropdown-menu>li>a:focus, .Dropdown-menu>li>button:focus {
    outline: none;
}

[davwheat]

@SychO9 That would work for this specific case, but implementing something like this could be good for establishing a consistent (and themed) a11y outline which could be used on other elements and in extensions.

Take a look at the tags page -- the default outline in Chromium browsers (at least for me) seems a bit weird on that page, with outlines appearing partly behind some elements and in front of others.

Some exts may want to include other elements or custom buttons/elements which also need a focus outline, so this would allow them to use the same outline as core

[SychO9]

Take a look at the tags page -- the default outline in Chromium browsers (at least for me) seems a bit weird on that page, with outlines appearing partly behind some elements and in front of others.

Seems like it's due to the fact that the anchors have absolute positioning, I can't wait until we switch to flexbox/grid (#848)

That would work for this specific case, but implementing something like this could be good for establishing a consistent (and themed) a11y outline which could be used on other elements and in extensions.
...
Some exts may want to include other elements or custom buttons/elements which also need a focus outline, so this would allow them to use the same outline as core

That's a good point, I like the idea of it.

So to sum it up, what we want to do is:

• Remove the CSS code that undoes the focus effect
• Create the focus ring mixin (should use a variable for the outline value)
• Apply it to the dropdown items (and to other elements when tackling other related issues)
• Apply the hover effects of the dropdown items on focus as well (not sure why this isn't currently done, maybe just forgotten)

Right ?

[davwheat]

I can't wait until we switch to flexbox/grid (#848)

Oh god yes, it couldn't come any sooner!

That all sounds great!

I have made the mistake of applying outlines on :focus instead of :focus-visible many times, so we need to make sure I don't do it again :P

[SychO9]

Related: #2814

[davwheat]

Moved milestone to PR.