Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#44323 closed defect (bug) (wontfix)

Insert/ Edit link: Checkbox missing association with Label

Reported by: anevins's profile anevins Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: TinyMCE Keywords:
Focuses: accessibility Cc:

Description

Describe the bug
The checkbox "Open link in a new tab" is not programmatically associated with its label element. The label element is missing the 'for' attribute that would match with the 'id' of the checkbox.

The DOM position of the checkbox (inside the label) does mean that users can click on the label to interact with the checkbox, but this association may not be clear to assistive technologies.

To Reproduce
Steps to reproduce the behavior:

  1. Edit a page;
  2. Press on the "Insert/ edit link" TinyMCE button;
  3. Press on the cog "Link Options" icon;
  4. A dialogue box appears titled "Insert/edit link".
  5. See the source code of the "Open link in a new tab" checkbox.

![example](https://user-images.githubusercontent.com/2318561/41049538-10a8ae78-69a9-11e8-9a33-242d67bd2b2a.png)

Expected markup

<label for="wp-link-target-0">
    <input type="checkbox" id="wp-link-target-0"> 
    Open link in a new tab
</label>

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version: Latest

Attachments (1)

44323.diff (545 bytes) - added by chetan200891 6 years ago.
Created ptatch for association with Label.

Download all attachments as: .zip

Change History (7)

#1 @swissspidy
6 years ago

  • Focuses accessibility added

When the label is already wrapping the input element, there's no need to add a for attribute.

It might be true that some assistive technologies did not handle such implicit handles well years ago, but nowadays I don't think that's the case anymore.

Either way, I'm adding the accessibility keyword to get some feedback from the pros :)

@chetan200891
6 years ago

Created ptatch for association with Label.

#2 @subrataemfluence
6 years ago

I agree with @swissspidy.

The for attribute makes sure that the associated label is clickable.
Since today's technology can handle this behaviour well enough when the checkbox is wrapped inside a <label> element, do we really need the additional for attribute?

I don't think a patch is really required.

#3 @anevins
6 years ago

I think it's important to distinguish two behaviours of assistive technologies and browsers that might be confused as one:

  • The clickable label (browser behaviour)
  • The association between label and form field (assistive technology behaviour)

#4 @afercia
6 years ago

Technically, both implicit (wrapping label) and explicit (for/id) associations are correct. For all new code, the accessibility standards recommend explicit (for/id) association, see https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/#labeling and that's to maximize support for various browsers / assistive technology combos. We shouldn't assume all users have the latest shining screen reader or browser version. As a best practice, a non-wrapping label that uses for/id association is better, and offers also other advantages, e.g. can be styled better.

That said, we recommend it for all new code to avoid refactoring of existing code, but I wouldn't be opposed to enhance this specific case if somebody wants to make a patch :)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 years ago

#6 @afercia
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Discussed during today's accessibility meeting and agreed to close.

Note: See TracTickets for help on using tickets.