Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#53311 closed enhancement (fixed)

WordPress Events and News Widget modification for change location button

Reported by: amethystanswers's profile AmethystAnswers Owned by: joedolson's profile joedolson
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-patch
Focuses: ui, accessibility, administration Cc:

Description

In the WordPress Events and News widget, after "Attend an upcoming event near you" there is a pencil icon. Clicking this icon opens up a search bar so you can type in what city you are in (or want to find events near). The pencil icon typical represents an ability to edit information. In this case, it's editing, or changing, the location. But there is not enough context to make that clear, unless you are accessing the ARIA labels.

This can be confusing to users with neurological disabilities, as well as users who are nervous about making changes to things on their site they aren't sure about.

I propose changing the icon to a text button that reads something like "Change location" so that it is very clear to all users what its purpose is.


Attachments (3)

events-widget-change-location-icon.png (65.7 KB) - added by AmethystAnswers 3 years ago.
screenshot of the top portion of the WordPress Events and News widget showing the icon described in the ticket
53311.diff (1.2 KB) - added by sabernhardt 3 years ago.
showing text with location icon (HTML + CSS, without editing JS)
events-widget-location.png (4.0 KB) - added by sabernhardt 3 years ago.

Download all attachments as: .zip

Change History (14)

@AmethystAnswers
3 years ago

screenshot of the top portion of the WordPress Events and News widget showing the icon described in the ticket

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


3 years ago

#2 @ryokuhi
3 years ago

  • Milestone changed from Awaiting Review to 5.9

Hello @AmethystAnswers, and thanks for reporting your first bug: good catch!
This ticket was reviewed today during the weekly accessibility team's bug-scrub.
We are considering a few possibilities to solve the issue, but for now we're milestoning it for 5.9.

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

#3 @chaion07
3 years ago

@AmethystAnswers thank you for reporting this. Adding a few resources for context. @keoshi has recently [proposed some tweaks against existing icons]https://make.wordpress.org/design/2021/05/27/proposal-to-tweak-existing-icons-and-add-new-ones/. It would be good idea to include both him and @shaunandrews to this ticket. Additionally noting the link: https://www.figma.com/file/e4tLacmlPuZV47l7901FEs/?node-id=2%3A32 to the Figma file for further reference. Thanks

#4 @keoshi
3 years ago

This came up on #accessibility in Slack a few days ago and the group seemed to agree with your proposal to use text instead of an icon, which could be misleading. To make it even more semantic I'd use the following:

  • “Add location” when no city has been added before.
  • “Change location” when we're editing an existing location.

@sabernhardt
3 years ago

showing text with location icon (HTML + CSS, without editing JS)

#5 follow-up: @sabernhardt
3 years ago

Dashicons includes two location icons already, and the first option probably makes more sense than the one with the map at this size.

53311.diff is a first pass at showing the button text. I chose "Select location" because it fits well enough in both situations. "Add location" and "Change location" could be better, though, if someone wants to edit the script.

Also, the CSS needed to be more specific so it does not visually hide all elements with aria-hidden="true" in the Events section (the icon uses that attribute here).

#6 in reply to: ↑ 5 @AmethystAnswers
3 years ago

Thanks for all the work done on this so far! The icon and wording make much more sense to me. I agree, "Add location" and "Change location" would be even more clear/specific, but as a solution to cover both scenarios, "Select location" seems to be a good choice.

#7 @sabernhardt
3 years ago

  • Keywords has-patch added

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


3 years ago

#9 @joedolson
3 years ago

  • Owner set to joedolson
  • Status changed from new to reviewing

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


3 years ago

#11 @joedolson
3 years ago

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

In 51971:

Widgets: Use a text-based button to select location.

The WordPress Events and News widget used an icon-only button to select a location. The Pencil icon alone provided insufficient context and labeling for accessibility. Add text to clearly describe button action and change icon to represent a location marker.

Props AmethystAnswers, sabernhardt.
Fixes #53311.

Note: See TracTickets for help on using tickets.