WordPress.org

Make WordPress Core

Opened 8 weeks ago

Last modified 5 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:

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

Download all attachments as: .zip

Change History (8)

@AmethystAnswers
8 weeks 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.


6 weeks ago

#2 @ryokuhi
6 weeks 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 6 weeks ago by ryokuhi (previous) (diff)

#3 @chaion07
6 weeks 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
5 weeks 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
5 weeks ago

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

#5 @sabernhardt
5 weeks 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).

Note: See TracTickets for help on using tickets.