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

[alh0319]

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:

• #51884
• #57785

Proposed design:

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:
    • Accessibility Meetup ​https://www.meetup.com/wordpress-accessibility-meetup-group/
    • BlackPress Meetup ​https://www.meetup.com/blackpress-meetup/
    • Learn WordPress Online Workshops ​https://www.meetup.com/learn-wordpress-online-workshops/
  • 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.

[alh0319]

Proposed Design, as described in the ticket

[joedolson]

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.

[alh0319]

@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?

[joedolson]

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.

[alh0319]

@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?

[joedolson]

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.