Open stamat opened 2 months ago
@stamat 7. We can maybe have the
ul
element ornav
labeled by the nav heading witharia-labeledby="ID"
? Or maybe this is automatically understood since the heading is inside thenav
element? We should check how the screen reader reads this. This might be useful if we restructure the SubNav a bit to accommodate for other issues.
I ran into something related in this PR.
When trying to add an aria-label
, it didn't seem to work:
But is needed to pass the axe check.
I guess we could use aria-labeledby
and use the <SubNav.Heading>
to label the nav, but in my case, we would like to rather not show a <SubNav.Heading>
. Maybe it's ok to use "screen reader only" styles to visually hide it, e.g. <SubNav.Heading className="sr-only>
, if we want to not allow directly adding an aria-label
.
aria-current="page"
should not be a link if it has a submenu it should be abutton
, if it doesn't have a submenu, if it doesn't have a submenu it can remain a link since it has thearia-current="page"
. Submenu toggles have a button that activates them which is separate from the link. I think it should all be one button. We should basically discourage the usage of#
value for thehref
.aria-haspopup="menu"
? Maybe alsoaria-controls="ID"
if we perform the restructure.ul
element ornav
labeled by the nav heading witharia-labeledby="ID"
? Or maybe this is automatically understood since the heading is inside thenav
element? We should check how the screen reader reads this. This might be useful if we restructure the SubNav a bit to accommodate for other issues.as
like we have on some other components. Could be useful! ✨