Widgets: current-page links are not programmatically labelled as such

[audrasjb]

Note: this issue was first reported by Karl Groves (@karlgroves) in Gutenberg Github repository.
​https://github.com/WordPress/gutenberg/issues/15333

Current-page link is not programmatically labelled as such

Severity: Medium

Affected Populations:
Low-Vision
Cognitively Impaired

Platform(s):
All / Universal

Components affected:
Output Markup
Issue description

When a page is created and users view it, its name appears in the
sidebar under "Recent Posts", however there is no visual or semantic
indication that this link relates to the current page.

Since it's possible for authors to create multiple articles with the
same name, the lack of indication may cause confusion for users with
cognitive disabilities and screen reader users.

Issue Code:

    <li>
        <a href="...">...</a>
    </li>

Remediation Guidance
Whenever the current page is reflected in a menu on that page, add
aria-current="page" to the applicable link.

Use the aria-current attribute as a hook to add a distinctive visual
style to separate it from other links.

Recommended Code:

    <li>
        <a href="..." aria-current="page">...</a>
    </li>

    widget_recent_entries a[aria-current] {
        /*  styles */
    }

Relevant standards:
2.4.4 Link Purpose (In Context) (Level A)
​https://www.w3.org/TR/WCAG20/#navigation-mechanisms-refs
2.4.8 Location (Level AAA)
​https://www.w3.org/TR/WCAG20/#navigation-mechanisms-location

[audrasjb]

Also, at least Recent Posts, Pages, Archives, Categories, and Navigation Menu Widgets are concerned.

[audrasjb]

Adds aria-current attribute to Recent Posts Widget

[audrasjb]

Recent Post Widget is fixed in 47094.1.diff.

Navigation Menu Widget and Page Widget are already ok.

Category Widget needs an update in wp_list_categories function.
Archives Widget needs an update in wp_get_archives function.

[melchoyce]

Screenshot for reference

[audrasjb]

This ticket still needs a patch to handle the 2 last widgets that should use this attribute ;)

Category Widget needs an update in wp_list_categories function.
Archives Widget needs an update in wp_get_archives function.

[audrasjb]

add aria-current='page' to wp_list_categories()

[audrasjb]

Handle Archive widget as well

[audrasjb]

I believe 47094.3.diff handles all the use case for aria-current in Core Widgets.

This is tested with success on my side.
FYI Menu and Page Widgets were both already adding aria-current attribute.

Ping @afercia and @welcher for review.

Also, we should add some styles for the current items but I'll open a new ticket since it should be fixed in Bundled Themes Component.

I'm also adding needs-dev-note keyword.

Cheers,
Jb

[audrasjb]

I drafted a dev note for this ticket: ​https://docs.google.com/document/d/1WAHQVrrfY0xapf5j4H9LFY4tXIF9av4Rq_pw6rhicSY/edit?usp=sharing

Adding commit keyword.
I'll open other tickets to add support for a[aria-current] in Bundled Themes stylesheets as soon as this ticket can be committed in 5.3.

Cheers,
Jb

[afercia]

Tested a bit the patch and noticed something to address for the Recent Posts widget. To reproduce:

• add the Recent Posts and the Archives widget to your site
• make sure to have 2-3 published post in August 2019
• in any case, set the Recent Posts widget to display a number of posts that includes all the ones from August
• go to the monthly Archive yoursite.test/2019/08
• at this point, "August 2019" in the Archive widget will have the aria-current="page" attribute
• however, also the oldest post from August in the Recent Posts widget will have the aria-current="page" attribute, which is incorrect because this is an archive page
• seems related to the use of get_the_ID()
• in 47094.diff​ I'm trying to avoid this checking also for is_single(), not sure if there are better ways to avoid the attribute gets printed out also in pages that aren't posts /Cc @audrasjb @SergeyBiryukov

Some additional minor adjustments:

• Categories: in order to avoid to use an additional foreach I thought to use the existing one and then manipulate the link string. Something like: $link = str_replace( '<a', '<a aria-current="page"', $link );
• Archives: use only one ternary
• applied some coding standards

Some review and testing would be nice :)

[afercia]

in 47094.diff​ I'm trying to avoid this checking also for is_single(), not sure if there are better ways to avoid the attribute gets printed out also in pages that aren't posts

I think one option could be using get_queried_object_id(), any thoughts welcome.

[afercia]

I'd like some feedback from devs more experienced than me about the two options. The current patch uses this check:

if ( is_single() && get_the_ID() === $recent_post->ID ) { ...

I think it could be simplified to:

if ( get_queried_object_id() === $recent_post->ID ) { ...

Pinging the Widgets component maintainers @welcher and @audrasjb.

[audrasjb]

replaces is_single()&&get_the_ID() check with get_queried_object_ID() single check

[audrasjb]

Sounds great @afercia ;-)

I successfully tested the patch and added get_queried_object_id() which is exactly what's needed here.
Patch refreshed in 47094.4.diff.

[afercia]

In 46163:

Accessibility: Add aria-current to the Archives, Categories, and Recent Posts widgets output.

The aria-current attribute is a simple, effective, way to help assistive technology users orientate themselves within a list of items.

Continues the introduction in core of the aria-current attribute after [41359] and following changes.

Props audrasjb, melchoyce.
Fixes #47094.

[audrasjb]

Dev note published on Make/core: ​https://make.wordpress.org/core/2019/09/23/core-widgets-new-aria-current-attribute-in-wordpress-5-3/