#37188 closed defect (bug) (fixed)
Add New Media button does not give aria feedback
Reported by: | mantismamita | Owned by: | afercia |
---|---|---|---|
Milestone: | 4.8 | Priority: | normal |
Severity: | normal | Version: | 4.0 |
Component: | Media | Keywords: | has-ui-feedback has-screenshots has-patch commit |
Focuses: | ui, accessibility | Cc: |
Description
Button Upload Plugin and Upload Theme both have a role of button and aria-expanded=true onclick. The expanded panel then directly under it which is expected behaviour for screen-readers and is semantically logical. (see screen-shot)
On the other hand, the Add New button on the Media Page is a link without a role of button and there is no aria feedback provided. The expanded panel is then followed by the navigation bar rather than the expanded panel.
Attachments (9)
Change History (32)
#1
@
8 years ago
- Focuses ui added
- Keywords needs-patch added
- Milestone changed from Awaiting Review to Future Release
- Version changed from trunk to 4.0
Thanks very much for opening this ticket @mantismamita and for your contribution at Vienna's Contributor Day :) I think a first good step would be using the CSS class aria-button-if-js
on the link in order to add a role="button"
when JavaScript is on (you can see what it does in common.js
). Worth reminding this link should remain a link because when JavaScript is off it points to media-new.php
Setting the version to 4.0 as that should be the version the media grid and the uploader panel were introduced.
#2
@
8 years ago
Hello @afercia, I was using the hide-if-no-js
class and adding the aria-expanded=false
but will try your way. So does this mean we are patching 4.0 ? I'm not sure I understand. I didn't know that was possible ;) I guess I shouldn't submit the patch I had going as it was using trunk?
#3
@
8 years ago
Hi @mantismamita. It's just a convention on Trac to set the version number to indicate the WordPress version the "bug" was first introduced :) Patches should always be built from trunk of the develop repo which means you should check out WordPress trunk or if you're using VVV from www/wordpress-develop
.
#6
@
8 years ago
- Milestone changed from Future Release to 4.8
- Owner set to afercia
- Status changed from new to assigned
#8
@
8 years ago
- Keywords needs-refresh added; commit removed
The approach used in 37188.diff won't work correctly when clicking on the "X" button to close the uploader. Needs a refresh with a new approach, probably using the event toggle:upload:attachment
.
#9
follow-up:
↓ 14
@
8 years ago
- Keywords needs-refresh removed
37188.2.diff uses a new approach and stores the Add New button as a property of the frame. Not sure why this event was delegated, since the .page-title-action
element is always printed out in the page. Maybe I'm missing something, would greatly appreciate some feedback /cc @wonderboymusic @ericlewis @adamsilverstein 🙂
#10
@
8 years ago
37188.3.diff removes unrelated change to wp-includes/class-wp-editor.php
.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
#14
in reply to:
↑ 9
;
follow-up:
↓ 15
@
8 years ago
Replying to afercia:
37188.2.diff uses a new approach and stores the Add New button as a property of the frame. Not sure why this event was delegated, since the
.page-title-action
element is always printed out in the page.
The only reason I could think this would be delegated is if the button could sometimes be added or the event was needed after the script ran, but I don't see that happening here.
I tested the patch and this looks good; everything worked well in the media library, however when I tried reaching click "Add Media" or "Set Featured Image" on the post edit page, I got a JavaScript error:
Uncaught TypeError: Cannot read property 'attr' of undefined
likely because there isn't a .page-title-action
element on the page.
#15
in reply to:
↑ 14
@
8 years ago
- Keywords needs-refresh added
Replying to adamsilverstein:
I tested the patch and this looks good; everything worked well in the media library, however when I tried reaching click "Add Media" or "Set Featured Image" on the post edit page, I got a JavaScript error
Yep, confirmed. I think the controller is not the same as in the Library.
#16
@
8 years ago
- Keywords needs-refresh removed
37188.4.diff just checks for this.controller.$uploaderToggler
before trying to use it.
This ticket was mentioned in Slack in #core-media by mike. View the logs.
8 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
#19
@
8 years ago
37188.5.diff refreshes the patch after recent changes, also adds some inline comments.
Screenshot before the patch: errors and uploader displayed after the toolbar:
Screenshot with the patch applied: errors and uploader displayed before the toolbar:
#21
@
8 years ago
- Keywords commit added
37188.6.diff adds the missing focus style and improves the color contrast of the "X" close button. Also improves a bit the JS part.
Upload Plugin behaviour