[wp-trac] [WordPress Trac] #61585: Modify Events and News Widget to Show Global Events Separate from Local Events + Improve Accessibility of the Widget

[WordPress Trac]

#61585: Modify Events and News Widget to Show Global Events Separate from Local
Events + Improve Accessibility of the Widget
-------------------------------------+-------------------------------------
 Reporter:  alh0319                  |      Owner:  (none)
     Type:  enhancement              |     Status:  new
 Priority:  normal                   |  Milestone:  Awaiting Review
Component:  Administration           |    Version:
 Severity:  normal                   |   Keywords:  needs-design-feedback
  Focuses:  ui, accessibility,       |  needs-patch
  administration                     |
-------------------------------------+-------------------------------------
 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:**
 [[Image(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:
   * 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61585>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform