Make WordPress Core

Opened 9 years ago

Closed 9 years ago

#34273 closed defect (bug) (fixed)

#a11y-headings - the Media Views headings

Reported by: afercia's profile afercia Owned by: afercia's profile afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Media Keywords: has-patch
Focuses: ui, accessibility Cc:

Description

Basically all the headings in the media grid and the media modal should be adjusted to the new headings hierarchy. For example, inspecting the Media Library > grid mode screen with the Firefox Web Developer toolbar, here's the headings printed out in the markup:

https://cldup.com/2x5ya_yelU.png

The empty H1 and the "Uploading" H3 are actually hidden with display: none and not used in this screen (they're used in the Media modal). Ideally, they shouldn't be printed out at all if not used, but probably we can live with having them hidden.

By the way probably all the H3 should be bumped up to a H2, both in the grid and in the media modal. For example, here's the "Uploading" heading displayed in the media modal sidebar:

https://cldup.com/sbJofHhO0c.png

I don't see any reason why it should be a H3 thus skipping a heading level.

Notes:

  • the "Drop files anywhere to upload" in the first screenshot gets displayed after the "Add New" button is pressed.
  • the "Drop files to upload" is displayed in the "drop zone" overlay when dragging media inside the browser's window, not sure it should be a heading in the first place.

#a11y-headings

Attachments (3)

34273.patch (9.4 KB) - added by afercia 9 years ago.
34273.2.patch (10.1 KB) - added by afercia 9 years ago.
34273.3.patch (932 bytes) - added by afercia 9 years ago.
Restores a broken conditional statement

Download all attachments as: .zip

Change History (16)

@afercia
9 years ago

#1 @afercia
9 years ago

  • Keywords has-patch added

First pass. Not sure about the .uploader-window h1 maybe it shouldn't be a heading at all.
cc @wonderboymusic :)

#2 @afercia
9 years ago

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

Not sure if there's the need for some CSS backwards compatibility, thinking at plugins that may extend the Media Views and still use H3 headings. Assigning to the Media Views Master for his feedback and review :)

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


9 years ago

#4 @wonderboymusic
9 years ago

@afercia this looks good to me - I would keep the old selectors for BC

@afercia
9 years ago

#5 @afercia
9 years ago

  • Keywords commit added

Refreshed patch for some CSS back compatibility. cc @wonderboymusic

#6 @wonderboymusic
9 years ago

  • Owner changed from wonderboymusic to afercia

all yours to commit - keeping it assigned to you in case it gets reopened

#7 @afercia
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 35427:

Media: Improve the headings hierarchy in the Media Views for better accessibility.

Fixes #34273.

#8 @johnbillion
9 years ago

  • Keywords needs-patch added; has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

The changes to heading levels in [35427] is causing the following message to persistently appear when viewing the Upload Files tab in the media manager:

The web browser on your device cannot be used to upload files. You may be able to use the native app for your device instead.

https://i.imgur.com/KTsjIxT.png

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


9 years ago

@afercia
9 years ago

Restores a broken conditional statement

#10 @afercia
9 years ago

My bad. Forgot to restore changes made for testing purposes, sorry. New patch uploaded.

#11 @afercia
9 years ago

  • Keywords has-patch added; needs-patch removed

#12 @afercia
9 years ago

In 35463:

Media: Restore proper conditional statement broken after [35427].

Unprops afercia.
See #34273.

#13 @afercia
9 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed
Note: See TracTickets for help on using tickets.