Skip to content

Remove outline:none focus suppression in feedback form #87

Description

@alexwolson

Summary

Four :focus rules in the feedback form page set outline: none without providing a replacement visible focus indicator. This removes the browser's default focus ring, making it impossible for keyboard users to tell which element is focused.

Affected locations

All in _pages/feedback.md:

  • Line 78: #meetup:focus { outline: none; }
  • Line 217: .fb-followup textarea:focus { outline: none; }
  • Line 323: .fb-expander-body textarea:focus { outline: none; }
  • Line 343: .fb-expander-body select:focus { outline: none; }

Note: the pill radio buttons and rating buttons correctly use outline: 2px solid on :focus-visible — that pattern should be followed here too.

Fix

Replace outline: none with a visible focus style, following the pattern already used elsewhere in the form:

/* Before */
#meetup:focus {
  outline: none;
}

/* After */
#meetup:focus-visible {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

Apply the same pattern to the three other affected selectors.

WCAG criterion

2.4.7 Focus Visible (Level AA)

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAccessibility and WCAG compliance

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions