🐛 [BUG] - SubNav.Link marked as current when aria-current="false"

[sergioalvz]

Describe the bug

Version 0.32.0 of @primer/react-brand incorrectly marks SubNav.Link items as "current" when using aria-current="false". According to MDN, false is a valid value for this attribute.

Currently, the styling for SubNav.Link is activated by the mere presence of the aria-current attribute, rather than by its actual value.

brand/packages/react/src/SubNav/SubNav.module.css

Lines 183 to 186 in eaeb50e

	.SubNav__link[aria-current] * {
	color: var(--brand-SubNav-color-link-active);
	text-decoration: none !important; /* dotcom override */
	}

Reproduction steps

https://codepen.io/sergioalvz/pen/rNbrbae

Expected behavior

Only elements with aria-current="page" or aria-current="true" are marked as current

Screenshots

No response

Browsers

No response

OS

No response

[rezrah]

👋 @sergioalvz - thanks for opening this issue.

Is there a need to set "false" here instead of undefined? Per MDN guidance, you only need to set the aria-current attribute for current items, it doesn't need to be set for others:

If the attribute is not present, is an empty string, is present with no value, or is set to aria-current="false" it is not exposed to the user.

While I can verify "false" is a valid value, I'm checking that this isn't blocking you right now?

[sergioalvz]

Hi @rezrah,

I'm checking that this isn't blocking you right now?

No problem. We have changed the code a bit, so we only set aria-current="page" for the current item.