Regression in accessibility since new buttons introduced

Created on 2 June 2023, over 1 year ago
Updated 5 June 2023, over 1 year ago

Problem/Motivation

Since the new buttons were introduced in Adjust buttons to match new law / guidelines Fixed tabbing doesn't work to navigate to the 3 buttons, presumably because the ancor has an empty href attribute.

Steps to reproduce

Test tabbing on the popup.

Proposed resolution

Changing the href value to # fixes this, though this introduces styling issues
I'd advise fixing this because it's an accessibility issue.
The fix is two-fold:
- Use href="#" instead of href="" to all buttons
- Make sure the CSS styling and hover/highlight states are OK in those cases

🐛 Bug report
Status

Fixed

Version

1.0

Component

User interface

Created by

🇷🇴Romania reszli Târgu Mureș

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @reszli
  • @reszli opened merge request.
  • Status changed to Needs review over 1 year ago
  • 🇷🇴Romania reszli Târgu Mureș

    The buttons are actually focusable, just lacks some style to make that visible.

    But at the same time, some improvements were indeed needed in terms of a11y:

    • clicking any button, including "manag cookies", moved focus behind the popup - so I created separate buttons for manage / save preferences and move focus to first category switch when selecting "manage cookie"
    • when category wrapper is revealed, tabindex on inputs is set to 0 - so I forced them back to -1 since we use the labels instead
    • after tabbing through all categories it would make sense to have the "save preferences" button first - so I moved that to the top
    • reszli committed e27810c2 on 1.0.x
      Issue #3364478: Regression in accessibility since new buttons introduced
      
  • Status changed to Fixed over 1 year ago
  • 🇷🇴Romania reszli Târgu Mureș
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024