Media Grid and List form labels

[afercia]

I've noticed some form labels missing in the Media Library, in both grid and list mode, I'd like to try to help.

In grid mode:

• currently only the search field and mime types select have a label
• mime types label text is a bit too generic ("Select"), should provide more context
• added labels to date filter and bulk actions selects
• moved the spinner so now respects priority (hopefully)

Please consider I'm not so familiar with backbone.js, sorry @wonderboymusic! Be nice with me :)

In list mode:

• added a label to date filter select

Changed or added some labels text for 2 reasons:

• try to avoid duplicated strings to translate (capitalized version, non capitalized version... see e.g. 'Select Bulk Action' in #28867)
• for consistency and parity between list and grid mode

Attached a screenshot where I made the grid mode form labels *temporarily* visible, just to have an idea about the changes.

[afercia]

labels for Media Grid and List

[wonderboymusic]

Nice work, looks harmless

[ocean90]

I played a bit with a wp.media.view.Label view, which should be used to add labels to our input fields, see ​https://gist.github.com/ocean90/244470a43e4f5be77e16. The issue is, that this.$el.before doesn't work. :(

[sumobi]

Tested 29026.patch looks good to me

[wonderboymusic]

In 29428:

Media Grid: add screen reader labels with more context to filters and bulk actions. Ditto for list view.

Props afercia.
Fixes #29026.

[afercia]

Sorry looks like my patch breaks something when opening media frame from edit post pages.
New attached patch adds a check for grid mode and moves back setting of the spinner in its original position. Should be ok now, though the spinner now doesn't respect priority.

[afercia]

adds check for grid mode and moves back setting of the spinner in its original position

[azaozz]

Thinking to revert [29428] for now. I may be missing something but why are the labels "hacked" from JS/jQiery and not part of a template?

Actually it seems the whole "filters bar" (media.view.Toolbar and/or media.view.PriorityList) should be able to use a template.

[wonderboymusic]

There was precedent for the this.$el.before( whatever ) so I just rolled with it. If the labels will always match the context of the things they are preceding, then yes, they should be in the Underscore templates.

[azaozz]

Yeah, seems this.$el.before( whatever ) sometimes fails as $el is not attached to the DOM yet. We can use append()/prepend() as the node exists, but not before()/after().

[wonderboymusic]

In 29432:

Revert [29428] to avoid errors with Add Media for now.

See #29026.

[wonderboymusic]

Reverted, this needs a reboot

[wonderboymusic]

In 29433:

Add screen reader text to list table date dropdown.

See #29026.

[wonderboymusic]

In 29434:

Create a new Backbone view, media.view.Label, which can be used as a subview in things like toolbars, which need screen reader text.

Make an initial instance of it for the label for Bulk Actions in Media Grid.

See #29026.

[wonderboymusic]

In 29435:

Media Grid: add screen reader text in a subview on the toolbar, a media.view.Label instance before media.view.DateFilter.

See #29026.

[wonderboymusic]

In 29437:

Media Grid: use a media.view.Label instance in the toolbar for the screen reader text for Search.

See #29026.

[wonderboymusic]

In 29438:

Media Grid:

• Use a media.view.Label instance in the toolbar for the screen reader text for the "all" dropdown.
• Adjust the spinner's priority.

Fixes #29026.

[wonderboymusic]

In 29440:

Mark WP_List_Table::bulk_actions()'s argument $which as optional for BC.

Fixes #29026.