Fix nav header accessibility issues #6538
Conversation
| > | ||
| Login as {name} | ||
| </a> | ||
| <li> |
There was a problem hiding this comment.
<li> element within <ul> parent element
There was a problem hiding this comment.
just to clarify, did you mean that we can't have a <a> element within a <ul>? wanted to make sure I understood for future reference!
There was a problem hiding this comment.
ooo sorry I missed this comment. I think there were only three elements that could be direct children of the <ul> element... let me try to see if I can get that error again.
There was a problem hiding this comment.
@fzhao99 it was this error! https://dequeuniversity.com/rules/axe/4.7/list?application=AxeChrome
| @@ -91,6 +93,7 @@ const Dropdown: React.FC<Props & SelectProps> = ({ | |||
| )} | |||
| name={name} | |||
| id={id} | |||
| aria-label={ariaLabel} | |||
There was a problem hiding this comment.
<select>
emyl3
force-pushed
the
elisa/6410-header-user-submenu-acc
branch
from
469fc91 to
14bbb32
Compare
| ref={staffDefailsRef} | ||
| aria-label="Primary navigation" |
There was a problem hiding this comment.
emyl3
force-pushed
the
elisa/6410-header-user-submenu-acc
branch
from
14bbb32 to
3c4bcdb
Compare
|
Kudos, SonarCloud Quality Gate passed! |
FRONTEND PULL REQUEST
Related Issue
Resolves #6410
Changes Proposed
roletobuttoninstead oflinkaria-expandedand set totrue/falsedepending the state of the submenuaria-controls<Header>componentAdditional Information
<Header>component revealed that the axe dev tool test didn't run the tests on certain parts of the nav header unless the Account icon button was clicked and expanded.Testing
Screenshots / Demos
Before
After
<hr>element in a<ul>element