Make WordPress Core

Opened 4 weeks ago

Closed 4 weeks ago

#64490 closed defect (bug) (reported-upstream)

Editor: LinkControl dialog missing ARIA labels

Reported by: mohammadzaid's profile mohammadzaid Owned by:
Milestone: Priority: normal
Severity: normal Version: trunk
Component: Editor Keywords: good-first-bug has-patch
Focuses: accessibility Cc:

Description

LinkControl dialog (Ctrl+K) lacks proper accessibility:

Issues:

  1. Missing role="dialog" on modal container
  2. Missing aria-labelledby on dialog
  3. URLInput missing aria-label="Link URL"
  4. Search input missing aria-label="Search links"

Fix ready: https://github.com/Zaidfarooqui01/my-wordpress-pr/compare/fix/good-first-bug-63108

Tested: Chrome Accessibility tab + screen reader

Change History (7)

This ticket was mentioned in PR #10708 on WordPress/wordpress-develop by @mohammadzaid.


4 weeks ago
#1

  • Keywords has-patch added

# Gutenberg/WordPress Core: Editor

Add accessibility improvements per Trac #64490:

  • Add role="dialog", aria-labelledby="link-dialog-title", and aria-modal="true" to LinkControl modal container
  • Add hidden heading id="link-dialog-title" with text "Insert Link"
  • Add aria-label="Link URL" to URLInput field
  • Add aria-label="Search links" to search input field

Tested: Chrome Accessibility Tree + NVDA screen reader

Fixes #64490

Props: mohammadzaid

See: https://core.trac.wordpress.org/ticket/64490

---

#2 follow-up: @wildworks
4 weeks ago

Hi, @mohammadzaid, thanks for submitting the PR!

Unfortunately, the LinkControl is a React component and is not developed in WordPress core. It's developed in Gutenberg, so you'll need to clone the Gutenberg GitHub repository and create a pull request based on it.

However, my understanding is that the LinkControl is just a popover and does not need a dialog role in the first place.

Please let me know if I've missed something.

#3 in reply to: ↑ 2 ; follow-up: @mohammadzaid
4 weeks ago

@wildworks Thank you for the quick review and clarification!

You're absolutely right - I missed that LinkControl lives in Gutenberg, not Core.

Next steps I will be taking:

  1. Closing this Core PR
  2. Cloning Gutenberg repo
  3. Creating proper PR → https://github.com/WordPress/gutenberg/pulls

Quick question: Regarding the dialog role - should LinkControl popover have ARIA labels for screen readers, or is current implementation already accessible?

Thanks for the learning!

#4 in reply to: ↑ 3 @wildworks
4 weeks ago

Replying to mohammadzaid:

Next steps I will be taking:

  1. Closing this Core PR
  2. Cloning Gutenberg repo
  3. Creating proper PR → https://github.com/WordPress/gutenberg/pulls

Quick question: Regarding the dialog role - should LinkControl popover have ARIA labels for screen readers, or is current implementation already accessible?

I believe the LinkControl component is already accessible, but I think it would be a good idea to submit an issue and get feedback from more people before submitting a PR.

@wildworks commented on PR #10708:


4 weeks ago
#5

Thanks for the PR!

Unfortunately, this PR isn't acceptable because the LinkControl component is managed at the Gutenberg repo. See https://core.trac.wordpress.org/ticket/64490#comment:2

#6 @mohammadzaid
4 weeks ago

Per @wildworks guidance and Gutenberg guidelines:

Gutenberg PR: https://github.com/WordPress/gutenberg/pull/74505
Gutenberg Issue: https://github.com/WordPress/gutenberg/issues/74506

Ported LinkControl ARIA labels from Core PR #10708.

Thanks for the quick direction! 🙏

Last edited 4 weeks ago by mohammadzaid (previous) (diff)

#7 @wildworks
4 weeks ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.