aria-current is not implemented correctly

[epithetic]

Hi,

Just noticed that aria-current isn't implemented correctly in WordPress 5.2.2 in the global navigation menu.

Issue description

aria-current="page" is incorrectly placed on the <a> in the global navigation.

As aria-current="page" is an enumerated type, it's intended to indicate the current place in a set, so for this to happen it needs to placed on the parent <li> that contains the <a> not the actual <a>.

Code sample taken from the main navigation.

<li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-100"><a href="https://foxland.fi/demo/sanse//" aria-current="page">Home</a></li>

Expected markup.

<li id="menu-item-100" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-100" aria-current="page"><a href="https://foxland.fi/demo/sanse//" >Home</a></li>

See ​https://www.w3.org/TR/wai-aria-1.1/#aria-current

[audrasjb]

Hi and welcome to WordPress Core Trac! Thanks for opening this ticket,

The issue here is that we don't have any list-items because of legacy markup.

We'll try to discuss this ticket during next Friday bug scrub. Feel free to join on Make WordPress Slack team :-)

Cheers,
Jb

[SergeyBiryukov]

Introduced in [42808].

[afercia]

@epithetic thanks for your ticket and welcome to Trac.

I'm not sure I fully understand how the fact the aria-current attribute is an enumerated type implies it should be set on the <li> element in a list containing links.

Enumerated type just means its expected values consist of a set of named values.

Reference:
​https://www.w3.org/TR/wai-aria-1.1/#aria-current

Indicates the element that represents the current item within a container or set of related elements

Based on that, seems to me the fact the links are wrapped within <li> elements is not relevant.

See also the breadcrumbs example in the WAI-ARIA Authoring Practices 1.1, where the attribute is placed on the <a> element:
​https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb
​https://www.w3.org/TR/wai-aria-practices-1.1/examples/breadcrumb/index.html

Worth also noting that placing it on the <li> element could make the attribute be ignored depending on the browser / screen reader combination and the navigation mode.

I may be missing something though, please do feel free to share more details.

[epithetic]

Hang on, my bad, you're totally correct - apologies.

I'm running a beta of macOS Catalina and this wasn't being announced as expected for me with VO, so looks like a potential bug - I'll investigate further.

Closing ticket.

[SergeyBiryukov]

Thanks for the follow-up!

[afercia]

Thanks @epithetic. Note: if you were testing with Chrome (75), I'm afraid Chrome doesn't expose aria-current to assistive technologies. Safari 12.1.1 does.