Make WordPress Core

Opened 4 months ago

Last modified 7 weeks ago

#53311 new enhancement

WordPress Events and News Widget modification for change location button

Reported by: AmethystAnswers Owned by:
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Widgets Keywords:
Focuses: ui, accessibility, administration Cc:


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 4 months 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 months ago.
showing text with location icon (HTML + CSS, without editing JS)
events-widget-location.png (4.0 KB) - added by sabernhardt 3 months ago.

Download all attachments as: .zip

Change History (9)

4 months 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 months ago

#2 @ryokuhi
3 months 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 possibility to solve the issue, but for now we're milestoning it for 5.9.

Version 0, edited 3 months ago by ryokuhi (next)

#3 @chaion07
3 months 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 months 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.

3 months ago

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

#5 follow-up: @sabernhardt
3 months 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
7 weeks 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.

Note: See TracTickets for help on using tickets.