WordPress Events and News Widget modification for change location button

[AmethystAnswers]

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.

[AmethystAnswers]

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

[ryokuhi]

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.

[chaion07]

@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

[keoshi]

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]

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

[sabernhardt]

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).

[AmethystAnswers]

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.

[joedolson]

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.