Make WordPress Core

Opened 7 months ago

Last modified 3 weeks ago

#61585 accepted enhancement

Modify Events and News Widget to Show Global Events Separate from Local Events + Improve Accessibility of the Widget

Reported by: alh0319's profile alh0319 Owned by: joedolson's profile joedolson
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-design-feedback needs-patch reporter-feedback
Focuses: ui, accessibility, administration Cc:

Description

In February 2023, a proposal was published on the community team blog to modify the Events and News widget to show topic-based meetups worldwide. This proposal was supported by all who commented, however it appears that a Trac ticket was never opened.

The original proposal can be read at https://make.wordpress.org/community/2023/02/27/proposal-modify-the-events-and-news-widget-to-show-topic-based-meetups-worldwide/

I'm opening this ticket with a proposed design and notes on functionality and accessibility enhancements that can be made at the same time. I expect that my team can submit a patch for this enhancement.

This ticket is related to:

Proposed design:
https://equalizedigital.com/wp-content/uploads/2024/07/Screenshot-2024-07-06-at-5.20.45 PM.png

Design Notes
This design also includes some functionality and accessibility enhancements to the current widget. Here are notes on the changes from the top to the bottom.

  • Add an H3 "Local Events" above the existing community-events section for easier screen reader navigation.
  • Change the community-events-toggle-location button text from "Select location" to "Change location" - this is more clear (as stated in my comment on #51884) since there is not a select UI for the city.
  • Add a "Clear Location" button to the right of the cancel button in the accordion for setting the city.
  • Add a new "Global Events" section with the following:
    • H3 "Global Events"
    • "Filter by group:" text in line with filters.
    • Filters should be coded as tabs. In this design, I have used the core default and alternate button styles to indicate which tab is currently selected. I am open to other styles for these tabs, but styling them as buttons makes the most sense from an accessibility perspective to me.
    • Events would be pulled from the three global meetup groups. The "All" tab would show three upcoming from all groups, the other filters if selected would show three upcoming events from that group. If no upcoming events were scheduled for a group then a tab would not show. Groups:
    • The layout for the global events would be the same as for the local events, with two changes:
      • Different dashicons to distinguish groups (dashicons-welcome-learn-more for Learn and dashicons-universal-access for Accessibility Meetup).
      • Changing the "Meetup" text that appears below the event name to the name of the group.
  • Add an H3 "News" above the news section for easier screen reader navigation.
  • Add an H3 "Additional Resources:" in line with the footer links for easier screen reader navigation and to clarify that these links are not part of the News section.
  • Footer links should be coded in a list for accessibility - they can be styled as they are, though the pipes should be hidden from screen reader users (added as CSS borders).
  • Make the H3s bold so they are visually distinct from text.
  • Underline links that do not have a new window icon so they are visually distinct from text and don't rely on color alone to indicate they are a link (WCAG requirement).

Other Notes
In the comments on the original proposal, @harishanker suggested that we include the hosting meetup as well; however, that meetup group appears to have been deleted, so I have not included it in the mockup.

The current location for all global meetups is San Francisco. We likely want to exclude these three meetups from appearing in the Local Events section if the user has set their location to San Francisco or nearby, so as to avoid repetition and ensure only local meetup[s show in that section.

Some thought needs to be given to where WordCamps appear. For now, I propose leaving them in the Local Events section since they are typically attended in person rather than online.

Attachments (1)

Screenshot 2024-07-06 at 5.20.45 PM.png (355.9 KB) - added by alh0319 7 months ago.
Proposed Design, as described in the ticket

Download all attachments as: .zip

Change History (20)

@alh0319
7 months ago

Proposed Design, as described in the ticket

#1 @joedolson
7 months ago

The main discussion on underlining links will need to be one of scope; applying underlines only in the Events and News panel is probably not going to happen, since it wouldn't align with other panels. So we need to set a guideline for how a panel should determine whether links will be underlined or not.

Essentially it all comes down to "does this come off as a list of links", and that's a highly subjective question. Right now, the rule is "underlined in a paragraph, not underlined in a list." But that doesn't account for the context of the links

There are some clear problem cases, e.g. in Quick Drafts, the list of recent drafts has a linked title and an unlinked date; the boundaries of that link are not visible due to the lack of an underline.

But cases like the list of News links is hardly any different from a sidebar widget with a list of links; it's a list and everything is linked.

#2 @alh0319
7 months ago

@joedolson do you think I should open a separate ticket about underlining links in the dashboard? Or can this ticket have a broader scope and add underlines in other places where needed?

#3 @joedolson
7 months ago

Since the two issues don't depend on each other in any way, I think it would be better to have the underlines as a separate issue. It's preferable to keep tickets as discrete as possible, to minimize the points of debate and possible blockers.

#4 @alh0319
7 months ago

@williampatton - when you work on this can you ignore the underline on links from the design and writeup above? I'll open a different ticket for that suggested change that can impact all applicable links on the dashboard.

Also, have you had a chance to look into this and whether it can be accomplished without a change to the events API?

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


7 months ago

#6 @joedolson
7 months ago

  • Milestone changed from Awaiting Review to 6.7
  • Owner set to joedolson
  • Status changed from new to accepted

Reading the proposal post, this seems to have broad support from the community, and solves a real problem - the global events being surfaced *only* in specific regions is an issue.

Milestoning for 6.7 to look at.

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


6 months ago

#8 @stevejonesdev
5 months ago

My team has done a little bit of exploring on this already. I will take on this ticket during contributor day.

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


5 months ago

#10 @joedolson
5 months ago

Hi, @stevejonesdev! With no patch and a week until beta, this is probably a candidate for punting; but since I know you spent most of contributor day working on it, let me know how close you are to a patch.

#11 @joedolson
5 months ago

  • Milestone changed from 6.7 to Future Release

Chatted with Steve and following feedback from Meetup about their API, we're going to have to take the hard route to separate these event types, so this is probably not going to make this release. Punting to future release; but intend to add to 6.8.

#12 @joedolson
5 months ago

  • Milestone changed from Future Release to 6.8

#13 @kaitohm
3 months ago

Just noting I'm from the Training Team and am excited to see this move forward. Let Training know if there's anything we can do to help.

#14 @sumitsingh
3 months ago

Hey Team,

I have created a ticket for small things until Widgets thinks. it can hugely impact the traffic to learn.wordpress.org with this just link on the "WordPress Events and News" Dashboard Widget.

https://core.trac.wordpress.org/ticket/62512

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


4 weeks ago

#16 @joedolson
4 weeks ago

  • Keywords reporter-feedback added

Because there are problems with the Meetup API that are delaying the ability to separate these two groups of links, it would be very helpful to split this into two separate tickets: one with the accessibility improvements, and leaving this one as the ticket to separate the global and local events. Can you split this up, @alh0319?

#17 @luehrsen
4 weeks ago

The proposed improvements to the "WordPress Events and News" widget introduce useful enhancements, particularly in organizing local and global events. However, there are a few areas where the design could be refined further for better usability and clarity.

1. Low Visual Hierarchy

  • Currently, many elements are competing for attention, making it difficult to quickly scan and comprehend the most important information.
  • The new section headings (Local Events, Global Events, etc.) might require better separation and additional whitespace to create clearer divisions.
  • Consider adjusting typography (e.g., weight, size, or spacing) to guide the eye more effectively through the widget.

2. Competing Styles for Similar Elements

  • There are inconsistencies in visual weight between elements performing similar functions.
    • The filter buttons (All, Accessibility, etc.) and the Submit button have different weights, which might make interactions feel disjointed.
    • Local events have spacing/margin, whereas global events seem to lack that (which may be an artifact of the draft state).
  • Standardizing these styles across the widget will improve visual coherence and usability.

3. High Information Density

  • The widget currently packs a lot of different types of information into a small space, making it feel crammed.
  • Some suggestions to improve this:
    • Increase spacing between event listings and sections.
    • Adjust the alignment and padding of elements for better readability.
    • Introduce subtle dividers or background variations to break up sections visually.

4. Location Selection UX Issues

  • If the UX remains similar to the current version, the "Clear Location" button disappears on refresh, requiring users to click "Change Location" first to access it again.
  • This could be improved by:
    • Dynamically replacing "Change Location" with "Clear Location" depending on the state.
    • Grouping "Change Location" and "Clear Location" together so they are always accessible without an extra click.
    • Ensuring that the interface provides clear feedback when an action (like clearing location) has been successfully completed.

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


3 weeks ago

#19 @joedolson
3 weeks ago

  • Milestone changed from 6.8 to Future Release

Moving this to future release due to the external factors. If the accessibility issues can be split out into a separate ticket or tickets, those can still be slated for the upcoming release; but the meetup API is a blocker for now.

Note: See TracTickets for help on using tickets.