Opened 5 years ago

Closed 4 years ago

#2410 closed change (fixed)

Make dialogs on new options page more accessible

Reported by: greiner Assignee: greiner
Priority: P2 Milestone:
Module: User-Interface Keywords: a11y
Cc: Blocked By: #1524, #2357
Blocking: #2407 Platform: Unknown
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

https://codereview.adblockplus.org/29323156/

Description

Background

In the current version of the new options page (see #1524) interaction with dialogs is only possible using the cursor. Therefore we should implement standardized techniques to support screen readers and enable keyboard interactions.

What to change

  • Mark dialogs as such using the following ARIA attributes:
    • role="dialog"
    • aria-labelledby
    • aria-hidden="true"
  • Move the focus to the default action of the dialog (e.g. "OK" button) when the dialog becomes visible
  • Make sure there's always at least one focusable element inside of any dialog
  • Update the aria-hidden attribute each time the visibility of a dialog changes
  • Preferably, the tab order should be contained by the dialog to prevent that a focusable element outside of the dialog receives focus

Change History (5)

comment:1 Changed 5 years ago by greiner

  • Blocked By 1524 added

comment:2 Changed 4 years ago by greiner

  • Blocked By 2357 added
  • Tester set to Unknown

comment:3 Changed 4 years ago by greiner

  • Owner set to greiner

comment:4 Changed 4 years ago by greiner

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:5 Changed 4 years ago by greiner

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.