Make WordPress Core

Opened 6 years ago

Last modified 10 months ago

#47137 accepted defect (bug)

Insufficient form semantics

Reported by: anevins's profile anevins Owned by: joedolson's profile joedolson
Milestone: Future Release Priority: normal
Severity: minor Version:
Component: Media Keywords: needs-patch has-screenshots 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/15305

  • Severity:
    • Low
  • Affected Populations:
    • Blind
    • Cognitively Impaired
  • Platform(s):
    • All / Universal
  • Components affected:
  • Media Dialog

Issue description
The "Media Library" panel of the "Featured Image" modal dialog lists
some filtering of options, a group of checkboxes, a sub-form of relevant
meta-data, and a "Select" button. However there are no semantics which
associate these controls together, nor give the orphan "Select" button
any meaning relative to the selected checkbox/image.

Additionally, a link taking users to a new window/tab with an editing
form does not inform users that it opens a new window or tab.

Semantic markup is vital for assistive technology users, to convey the
structure and relationships between information. When appropriate
semantic markup is not used, it may be more difficult for such users to
understand what the content means, and to comprehend the structure that
the visual presentation conveys.

Issue Code

    <div class="attachments-browser">...


        <div class="media-toolbar">


            <div class="media-toolbar-secondary">


                <label for="media-attachment-date-filters" class="screen-reader-text">Filter by date</label>


                <select id="media-attachment-date-filters" class="attachment-filters">...</select>


            </div>


            <div class="media-toolbar-primary search-form">


                <label for="media-search-input" class="screen-reader-text">Search Media</label>


                <input type="search" placeholder="Search media items..." id="media-search-input" class="search">


            </div>


        </div>


        <ul tabindex="-1" class="..."><li ...>...</li></ul>


         ...


        <div tabindex="0" data-id="159" class="attachment-details save-ready">


            <h2>Attachment Details  <span>...</span></h2>


                <div class="attachment-info">


                    <div class="thumbnail thumbnail-image">...</div>


                        ...


                        <div class="dimensions">1820 × 1213</div>


                        <a class="edit-attachment" href="...&amp;action=edit..." target="_blank">Edit Image</a>


                        <button type="button" class="...">Delete Permanently</button>


                    </div>


                </div>


                <label class="...">


                    <span...>URL</span>


                    <input type="text" value="...this-is-fine.jpg" readonly="">


                </label>


                ...


            </div>


            <form class="compat-item"></form>


            </div>


        </div>


        <div class="media-toolbar-primary search-form">


            <button type="button" class="...">Select</button>


        </div>


    </div>

Remediation Guidance
Turn the form into an actual <form> element.

Wrap <fieldset> tags (with accompanying <legend> elements)
around groups of controls explaining what they are.

Use the id on the <form> element with the form attribute
on the "Select" button to designate this as the form's submit
button.

Add text to the "Edit" link that opens in a new window or tab,
informing users that this will happen. When the form in the new
tab/window is submitted, users should be brought back to the original
form.

Recommended Code

    <div class="attachments-browser">...


        <form id="media_form">


        <fieldset class="media-toolbar">


        <legend class="screen-reader">Filter media options</legend>


            <div class="media-toolbar-secondary">


                <label for="media-attachment-date-filters" class="screen-reader-text">Filter by date</label>


                <select id="media-attachment-date-filters" class="attachment-filters">...</select>


            </div>


            <div class="media-toolbar-primary search-form">


                <label for="media-search-input" class="screen-reader-text">Search Media</label>


                <input type="search" placeholder="Search media items..." id="media-search-input" class="search">


            </div>


        </fieldset>


        <fieldset>


            <legend class="screen-reader">Media options result</legend>


            <ul tabindex="-1" class="..."><li ...>...</li></ul>


        </fieldset>


         ...


            <fieldset tabindex="0" data-id="159" class="attachment-details save-ready">


                <legend>Attachment Details  <span>...</span></legend>


                <div class="attachment-info">


                    <div class="thumbnail thumbnail-image">...</div>


                        ...


                        <div class="dimensions">1820 × 1213</div>


                        <a class="edit-attachment" href="...&amp;action=edit..." target="_blank">Edit Image <span class="screen-reader"> Opens in a new window</span></a>


                        <button type="button" class="...">Delete Permanently</button>


                        </div>


                    </div>


                    <label class="...">


                        <span...>URL</span>


                        <inputtype="text" value="...this-is-fine.jpg" readonly="">


                    </label>


                    ...


                </div>


            </fieldset>


        </form>


        <div class="media-toolbar-primary search-form">


            <button form="media_form" type="button" class="...">Select</button>


        </div>


    </div>

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-50 in Tenon's report

Attachments (1)

57185883-4f359f80-6e89-11e9-9e23-903e587ff978.png (362.5 KB) - added by anevins 6 years ago.

Download all attachments as: .zip

Change History (42)

#1 @afercia
6 years ago

  • Keywords form-controls added

#2 @afercia
6 years ago

  • Milestone changed from Awaiting Review to 5.3

#3 @karmatosed
5 years ago

  • Keywords needs-design-feedback added

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


5 years ago

#5 @karmatosed
5 years ago

  • Keywords needs-design-feedback removed

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


5 years ago

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


5 years ago

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


5 years ago

#9 @antpb
5 years ago

@afercia provided some insight into this issue with some suggestions in the recent Media Meeting. This info highlights a few challenges in solving the issue:

“Re: 47137 I’d recommend all the points from the audit. Two considerations though:

  • Ideally it should be a form because that helps in establishing semantic relationships. However, the sidebar is not rendered in all the views so including the select area, the attachments list _and_ the sidebar within one form might be a bit complicated
  • The list of attachments is perceived as a list of checkboxes so it makes sense to wrap it within a fieldset + legend. I’d tend to think it would need more work in the future because yes, it’s a group of checkboxes but it actually works like a mini-application with custom interaction. I’d say fieldset + legend would help, for now.”

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


5 years ago

#11 @anevins
5 years ago

As there are concerns with the amount of testing involved with making these three changes at once, we'll be splitting these tickets out into individual problems. Some of which can be tackled as part of contribution days.

#12 @anevins
5 years ago

The "Edit" link text has been split into ticket: #48028

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


5 years ago

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


5 years ago

#15 @kirasong
5 years ago

Brought up this ticket in media triage.

It could really use an owner -- the next step, though, is research into where changes would be necessary to wrap the fields in a form. Whether you have time to write a patch or not, research/comments here on findings would be really helpful.

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


5 years ago

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


5 years ago

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


5 years ago

#19 @afercia
5 years ago

  • Milestone changed from 5.3 to Future Release

Discussed during today's accessibility bug-scrub: giving WordPress 5.3 Beta 2 is very close, sadly agreed to punt this ticket to Future Release.

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


5 years ago

#21 @afercia
5 years ago

  • Milestone changed from Future Release to 5.4

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


5 years ago

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


5 years ago

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


5 years ago

#25 @audrasjb
5 years ago

  • Milestone changed from 5.4 to Future Release

As per today’s bug scrub, let's move back this one to Future release as we are at 14 days from 5.4 beta 1.

#26 @joedolson
2 years ago

  • Milestone changed from Future Release to 6.2
  • Owner set to joedolson
  • Status changed from new to accepted

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


2 years ago

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


22 months ago

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


22 months ago

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


22 months ago

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


22 months ago

#32 @ryokuhi
22 months ago

  • Milestone changed from 6.2 to 6.3

Due to the complexity of the ticket, after discussing about it during the Accessibilty Team's weekly bug scrub in the last few weeks, we're re-milestoning this ticket for 6.3, now that the branch is open.

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


21 months ago

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


17 months ago

#35 @joedolson
17 months ago

  • Milestone changed from 6.3 to 6.4

Once again re-milestoning - to 6.4.

This ticket was mentioned in Slack in #core by oglekler. View the logs.


15 months ago

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


14 months ago

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


14 months ago

#39 @joedolson
14 months ago

  • Milestone changed from 6.4 to 6.5

No patch, high risk - punting to 6.5.

This ticket was mentioned in Slack in #core by rajinsharwar. View the logs.


10 months ago

#41 @rajinsharwar
10 months ago

  • Milestone changed from 6.5 to Future Release

This ticket was discussed in a recent bug scrub, and we decided to punt this to a future Release. There isn't a patch still for this, and just 12 days away from Beta 1. If in the meantime some activity happens and any committer feels good confidence in the fix, we can re-add it to the 6.5 milestone.

Note: See TracTickets for help on using tickets.