WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

Last modified 3 years ago

#31487 closed defect (bug) (fixed)

Semantic elements for non-link links: /wp-admin/customize.php

Reported by: Cheffheid Owned by: afercia
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch semantic-buttons
Focuses: ui, accessibility, javascript Cc:

Description

See main ticket #26504

Elements here that definitely should be replaced, or changed:

Color

  • Select color (change to button)
  • Current color (change to button)

Widget

  • Add a Widget (change to button)

General controls

  • Collapse (change to button)
  • Back (change to button) (appears when clicking Widget or Theme)

Special cases:

  • Theme details

The "Theme Details" span should probably be a button. Would like a second opinion on this. :)

  • Default color

Right now this is an input with type="button". Nothing wrong with that, but while we're changing things to <button>, we may as well be thorough and consistent.

  • Section headers

These are toggling accordions. I've already posed the question in Slack to determine how to deal with this. Adding it here for completeness of the ticket.

Attachments (3)

31487.patch (4.7 KB) - added by Cheffheid 5 years ago.
31487.1.patch (4.9 KB) - added by Cheffheid 5 years ago.
Adjusted width: 100% specific to buttons
31487.2.patch (3.4 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (13)

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


5 years ago

@Cheffheid
5 years ago

@Cheffheid
5 years ago

Adjusted width: 100% specific to buttons

#2 @Cheffheid
5 years ago

  • Keywords has-patch added

Patch should take care of adjustments required for customize.php and CSS tweaks to maintain the look:

  • Main "You are customizing" accordion header
  • Collapse link
  • Widgets "Back" button (it appears after clicking Widgets)
  • Preview/Customize buttons for mobile

Decided to re-do the patch with a more specific width: 100%; for the header to keep everything contained. Putting it on simply accordion-section-title breaks it everywhere else where they've not been converted to buttons yet.

#3 @DrewAPicture
5 years ago

  • Version trunk deleted

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


5 years ago

#5 @celloexpressions
4 years ago

A lot of these issue have been resolved or at least brought up in separate tickets, and because they're generally in very different places in the code we should probably consider breaking this into distinct tickets for each issue that's still outstanding. @afercia do you know which issues are still unfixed?

#6 @afercia
4 years ago

@celloexpressions I'm not sure I completely follow. This ticket is about just one file, customize.php, and the last patch takes care of just 4-5 buttons and probably some of them have been already fixed. I think it is so small that shouldn't be split in separate tickets. Should just be checked and refreshed?

#7 follow-up: @celloexpressions
4 years ago

  • Keywords needs-refresh added

Well, the list of issues on the ticket also covers some things that show up in the customizer, but come from more specific panels/sections. The mobile preview/customize buttons still need to be changed, but the other things in the latest patch were already addressed. If someone from the accessibility team could go back through the list of things and create a new one with the items that are still outstanding, that would be great.

@afercia
4 years ago

#8 in reply to: ↑ 7 @afercia
4 years ago

  • Keywords needs-refresh removed
  • Milestone changed from Awaiting Review to 4.6
  • Owner set to afercia
  • Status changed from new to assigned

Replying to celloexpressions:

Well, the list of issues on the ticket also covers some things that show up in the customizer, but come from more specific panels/sections.

Yep, the original ticket Description is maybe a bit too broad, but then the actual patch focused just on the file customize.php.

Many things have changed here, for example the control-panel-back control was removed in [33599] and the accordions are now sliding panels see [32649]. The refreshed patch:

  • makes the mobile preview/customize toggle a button
  • changes the "Close" link text from 'Cancel' to 'Close the Customizer and go back to the previous page', since this is a link, users need to have a clue about the link destination
  • adds a missing type="button"
  • removes unnecessary keydown events and preventDefault()

#9 @afercia
4 years ago

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

In 37230:

Accessibility: Customizer, improve UI controls in customize.php

  • makes the mobile preview/customize toggle a button
  • changes the "Close" link hidden text from 'Cancel' to 'Close the Customizer and go back to the previous page'
  • adds a missing type="button" attribute
  • removes unnecessary keydown events and preventDefault(): buttons don't need a keydown event and when they have a type="button" attribute there's no default action to prevent

Props Cheffheid, afercia.

Fixes #31487.

#10 @afercia
3 years ago

  • Keywords semantic-buttons added
Note: See TracTickets for help on using tickets.