WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 22 months ago

Last modified 14 months ago

#38671 closed defect (bug) (fixed)

Semantic elements for non-link links: async-upload.php

Reported by: Cheffheid Owned by: afercia
Milestone: 5.1 Priority: normal
Severity: normal Version:
Component: Administration Keywords: semantic-buttons has-patch has-screenshots
Focuses: ui, accessibility, javascript Cc:
PR Number:

Description

The "Dismiss" link that appears when an error occurs during the upload should be a button instead.

Related: #26504, #35126

Attachments (8)

38671.patch (864 bytes) - added by Cheffheid 3 years ago.
markup update, no style changes
38671.1.patch (1.2 KB) - added by Cheffheid 3 years ago.
markup update, minimal style updates (positioning)
38671.2.patch (2.5 KB) - added by Cheffheid 3 years ago.
Markup update, full styles update
38671.3.patch (2.1 KB) - added by Cheffheid 3 years ago.
Markup update, full styles update (for reals)
38671.4.patch (1.2 KB) - added by Cheffheid 3 years ago.
markup update, minimal style updates (positioning)
38671.5.patch (2.1 KB) - added by Cheffheid 3 years ago.
Markup update, full styles update (for reals)
Capture d’écran 2018-02-26 à 20.58.42.png (54.5 KB) - added by audrasjb 22 months ago.
Screenshot for this issue.
38671.6.diff (2.0 KB) - added by audrasjb 22 months ago.
Adds type="button" attribute and removes two extra spaces in CSS

Download all attachments as: .zip

Change History (20)

@Cheffheid
3 years ago

markup update, no style changes

@Cheffheid
3 years ago

markup update, minimal style updates (positioning)

#1 @Cheffheid
3 years ago

I'm dumb. Ignore the first patch, minimal style changes are needed to reposition the button to its correct place.

@Cheffheid
3 years ago

Markup update, full styles update

#2 @Cheffheid
3 years ago

To clarify, because I've made such a mess of these patches, I've uploaded two patches that work:

38671.4.patch: Assumes button-link will do all the work (and it should when #35126 goes through)
38671.5.patch: Includes styles to make the button look like a link, in case #35126 takes longer than expected/takes a different direction/whatever.

Last edited 3 years ago by Cheffheid (previous) (diff)

@Cheffheid
3 years ago

Markup update, full styles update (for reals)

@Cheffheid
3 years ago

markup update, minimal style updates (positioning)

@Cheffheid
3 years ago

Markup update, full styles update (for reals)

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


3 years ago

#4 @afercia
3 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Version trunk deleted

#5 @afercia
3 years ago

  • Keywords semantic-buttons added

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


22 months ago

#7 @afercia
22 months ago

  • Milestone changed from Future Release to 5.0

Moving to 5.0 for testing and visibility. A screenshot to clarify to everyone where this button is would be welcome :)

#8 @audrasjb
22 months ago

  • Keywords needs-refresh needs-screenshots added

Hello,

To clarify a bit what happens, here are the few steps to reproduce the issue:

  • Go to wp-admin/media-new.php, then upload a file with a not supported MIME type.
  • The alert have a "Dismiss" link and it should be a button HTML element.

The patch works, however a type="button" attribute is needed because this button is not related to a form or whatever.
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type for further documentation.

@audrasjb
22 months ago

Screenshot for this issue.

@audrasjb
22 months ago

Adds type="button" attribute and removes two extra spaces in CSS

#9 @audrasjb
22 months ago

  • Keywords has-patch has-screenshots added; needs-refresh needs-screenshots removed

#10 @afercia
22 months ago

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

Reviewng last patch, there's no need for all the textra styling, the CSS class button-link already takes care of the necessary styling. Will remove during commit.

#11 @afercia
22 months ago

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

In 42784:

Accessibility: Change the media upload "Dismiss error" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.

Props Cheffheid, audrasjb.
Fixes #38671.

#12 @pento
14 months ago

  • Milestone changed from 5.0 to 5.1
Note: See TracTickets for help on using tickets.