WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 2 weeks ago

#47142 assigned defect (bug)

Disabled fieldset does not convey the disabled state of controls

Reported by: anevins Owned by: mikeschroder
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots needs-patch wpcampus-report form-controls
Focuses: ui, accessibility Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15299

  • Severity:
    • Medium
  • Affected Populations:
    • Blind
    • Low-Vision
    • Motor Impaired
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
    • Edit Media

Issue description
On the Edit Media page, when users haven't made any selections for
cropping the image, the "Selection" legend is grayed-out to indicate
that this section is disabled, and the inputs are meant to be disabled
by use of the disabled attribute on the fieldset itself.

The only visible clue that the fields are meant to be disabled is that
the legend is a slightly lighter color; the fields themselves appear
identical to enabled fields. The state is only revealed to users by a
mouse user's inability to click inside, and a keyboard user's
inability to focus them. Speech recognition software may indicate that
the disabled fields are enabled when users call out fields by type.

Additionally, the change of style is not even conveyed in IE11, in which
the "Selection" legend looks identical to enabled groups.

This can be confusing to users with cognitive disabilities and speech
recognition users.

Issue Code

    <fieldset id="imgedit-crop-sel-159" class="imgedit-crop-sel disabled" disabled="">


        <legend>Selection:</legend>


        <div class="nowrap">


            <label><span class="screen-reader-text">selection width</span>


                <input type="text" id="imgedit-sel-width-159" ...>


            </label>


            <span class="imgedit-separator">×</span>


            <label><span class="screen-reader-text">selection height</span>


                <input type="text" id="imgedit-sel-height-159" ...>


            </label>


        </div>


    </fieldset>


    ...


    .imgedit-settings .disabled, .media-disabled {


        color: #a0a5aa;


    }

Remediation Guidance
While the disabled attribute is allowed on <fieldset>
elements, it should be avoided as the sole method of conveying disabled
states, because it does not universally apply the disabled state to
the fields in all assistive technologies.

Instead, place the disabled attribute on the fields directly.

Explicitly set the <legend> style changes with a legend
selector so that it applies in all browsers, and style disabled controls
to be more obviously disabled; the current slight difference in
box-shadow is difficult to discern even for users without visual
disabilities. Ideally, the styling would use opacity rather than
color properties so that the difference is still visible in Windows
High Contrast themes.

Also ensure that the relationship between the <label> and
<input> elements is explicitly defined using for and id
attributes, for better compatibility with assistive technologies.

Recommended Code

    <fieldset id="imgedit-crop-sel-159" class="imgedit-crop-sel disabled">


        <legend>Selection:</legend>


        <div class="nowrap">


            <label for="imgedit-sel-width-159"><span class="screen-reader-text">selection width</span></label>


            <input disabled type="text" id="imgedit-sel-width-159" ...>


            <span class="imgedit-separator">×</span>


            <labelfor="imgedit-sel-height-159"><span class="screen-reader-text">selection height</span></label>


            <input disabled type="text" id="imgedit-sel-height-159" ...>


        </div>


    </fieldset>


    ...


    .imgedit-settings .disabled,


    .media-disabled,


    .disabled legend {


        color: #444;


        opacity: 0.5;


    }


    input.disabled,


    input:disabled,


    select.disabled,


    select:disabled,


    textarea.disabled,


    textarea:disabled {


        opacity: 0.5;


    }

Relevant standards

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-81 in Tenon's report

Attachments (1)

57185836-13e6a100-6e88-11e9-902b-944da271258b.png (95.1 KB) - added by anevins 5 months ago.

Download all attachments as: .zip

Change History (10)

#1 @afercia
5 months ago

  • Keywords form-controls added

#2 @afercia
4 months ago

  • Milestone changed from Awaiting Review to 5.3

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


4 months ago

#4 @mikeschroder
4 months ago

Haven't had a chance to dig too deeply yet, but I suspect this is likely a problem anywhere the cropper shows up.

Two places of interest so far:
https://github.com/WordPress/wordpress-develop/blob/master/src/js/_enqueues/lib/image-edit.js#L83
and
https://github.com/WordPress/wordpress-develop/blob/master/src/wp-admin/includes/image-edit.php#L64

#5 @anevins
5 weeks ago

Hey @mikeschroder , just checking you're okay owning this for 5.3? If not, no pressure, we can get this reassigned.

This ticket was mentioned in Slack in #core-media by anevins. View the logs.


5 weeks ago

#7 @joemcgill
5 weeks ago

  • Owner set to mikeschroder
  • Status changed from new to assigned

Assigning to @mikeschroder per Slack discussions. Mike, feel free to remove if this is incorrect.

#8 @afercia
2 weeks ago

Looks like something has changed between WP 5.0 and 5.1:

  • on 5.0: edit an image and on load (no selection yet) the fieldset has a disabled attribute
  • on 5.1: no disabled attribute

Not sure what changed, should be investigated a bit.

#9 @afercia
2 weeks ago

See changes from [42404]. Not sure there's now a scenario where these specific fieldsets are disabled.

However, there's the need to check across all core for other cases where a fieldset might be disabled with a disabled attribute:

<fieldset ... disabled>

and if there are, implement the recommended pattern to address the issue described above.

Note: See TracTickets for help on using tickets.