WordPress.org

Make WordPress Core

Opened 11 days ago

Last modified 5 days ago

#44323 new defect (bug)

Insert/ Edit link: Checkbox missing association with Label

Reported by: anevins Owned by:
Milestone: Awaiting Review 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 11 days ago.
Created ptatch for association with Label.

Download all attachments as: .zip

Change History (5)

#1 @swissspidy
11 days 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
11 days ago

Created ptatch for association with Label.

#2 @subrataemfluence
10 days 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 days 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
5 days 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 :)

Note: See TracTickets for help on using tickets.