Skip to content

A11y: make the payment action gateway tabs keyboard accessible #3525

Description

@robin-the-going-merry

Follow-up to #3522 / #3524, which fixed the Global Settings > Payments tabs only.

Broken: the gateway buttons (Stripe, Square, PayPal) in a payment form action use the same tab markup but were not covered. Arrow keys, Home/End and Space/Enter do nothing, and every label is a Tab stop.

Where:

  • stripe/views/action-settings/gateway-buttons.php:6-44: role="tablist" with label role="tab", fixed tabindex="0", aria-selected set once on page load.
  • stripe/js/frmtrans_admin.js:55: updates aria-selected on change, no keyboard handling.

Fix: reuse initTablistKeyboard() / syncTablistState() from js/src/admin/admin.js (added in #3524) on each gateway tablist, and give the labels a roving tabindex (0 on the checked one, -1 otherwise), same as payments.php. A form can have more than one payment action, so bind per action tablist. Ids already include the action number (gateway-buttons.php:19).

Depends on #3524 merging first.

Requested by: @Crabcyborg

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions