Skip to content

Commit 63c950e

Browse files
asudohjoshblacktw15eganemyarod
committed
fix(ui-shell): remove role="menuitem" from header links
* feat(ui-shell): switch header nav role for side nav This change allows users of `<HeaderMenu>` and `<HeaderMenuItem>` to specify their ARIA roles so the a11y structure won't be broken when they are put in side nav for narrow screen. Fixes #3572. * fix(ui-shell): remove role in a tag * chore(UIShell): update snapshot * fix(HeaderMenuItem): style fix * Update packages/components/src/components/ui-shell/_side-nav.scss Co-Authored-By: emyarod <emyarod@users.noreply.github.com> * Update packages/components/src/components/ui-shell/_side-nav.scss Co-Authored-By: emyarod <emyarod@users.noreply.github.com> * fix(HeaderMenu): more style fix Co-authored-by: Josh Black <josh@josh.black> Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: emyarod <emyarod@users.noreply.github.com>
1 parent c4e8bcd commit 63c950e

File tree

7 files changed

+67
-52
lines changed

7 files changed

+67
-52
lines changed

‎packages/components/src/components/ui-shell/_header.scss

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@
175175
margin: 0;
176176
}
177177

178-
a.#{$prefix}--header__menu-item[role='menuitem'] {
178+
a.#{$prefix}--header__menu-item {
179179
display: flex;
180180
align-items: center;
181181
color: $shell-header-text-02;
@@ -196,46 +196,46 @@
196196
border-color $duration--fast-02, color $duration--fast-02;
197197
}
198198

199-
a.#{$prefix}--header__menu-item[role='menuitem']:hover {
199+
a.#{$prefix}--header__menu-item:hover {
200200
background-color: $shell-header-bg-02;
201201
color: $shell-header-text-01;
202202
}
203203

204204
.#{$prefix}--header__action:active,
205-
a.#{$prefix}--header__menu-item[role='menuitem']:active {
205+
a.#{$prefix}--header__menu-item:active {
206206
background-color: $shell-header-bg-03;
207207
color: $shell-header-text-01;
208208
}
209209

210-
a.#{$prefix}--header__menu-item[role='menuitem']:focus {
210+
a.#{$prefix}--header__menu-item:focus {
211211
border-color: $shell-header-focus;
212212
color: $shell-header-text-01;
213213
outline: none;
214214
}
215215

216-
a.#{$prefix}--header__menu-item[role='menuitem']:hover > svg,
217-
a.#{$prefix}--header__menu-item[role='menuitem']:active > svg,
218-
a.#{$prefix}--header__menu-item[role='menuitem']:focus > svg {
216+
a.#{$prefix}--header__menu-item:hover > svg,
217+
a.#{$prefix}--header__menu-item:active > svg,
218+
a.#{$prefix}--header__menu-item:focus > svg {
219219
fill: $shell-header-icon-01;
220220
}
221221

222222
.#{$prefix}--header__submenu {
223223
position: relative;
224224
}
225225

226-
.#{$prefix}--header__menu-title[role='menuitem'][aria-haspopup='true'] {
226+
.#{$prefix}--header__menu-title[aria-haspopup='true'] {
227227
position: relative;
228228
}
229229

230-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
230+
.#{$prefix}--header__menu-title[aria-expanded='true'] {
231231
background-color: $shell-header-bg-06;
232232
color: $shell-header-focus;
233233
// Note: needs to be higher than menu. Adding 1 here instead of moving to
234234
// the next level.
235235
z-index: #{z('header') + 1};
236236
}
237237

238-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
238+
.#{$prefix}--header__menu-title[aria-expanded='true']
239239
> .#{$prefix}--header__menu-arrow {
240240
transform: rotate(180deg);
241241
}
@@ -247,7 +247,7 @@
247247
margin: 0;
248248
}
249249

250-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
250+
.#{$prefix}--header__menu-title[aria-expanded='true']
251251
+ .#{$prefix}--header__menu {
252252
position: absolute;
253253
bottom: 0;
@@ -261,24 +261,23 @@
261261
z-index: z('header');
262262
}
263263

264-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
264+
.#{$prefix}--header__menu-title[aria-expanded='true']
265265
+ .#{$prefix}--header__menu
266266
.#{$prefix}--header__menu-item:hover {
267267
background-color: $shell-header-bg-04;
268268
}
269269

270-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
270+
.#{$prefix}--header__menu-title[aria-expanded='true']
271271
+ .#{$prefix}--header__menu
272272
.#{$prefix}--header__menu-item:active {
273273
background-color: $shell-header-bg-03;
274274
}
275275

276-
.#{$prefix}--header__menu .#{$prefix}--header__menu-item[role='menuitem'] {
276+
.#{$prefix}--header__menu .#{$prefix}--header__menu-item {
277277
height: mini-units(6);
278278
}
279279

280-
.#{$prefix}--header__menu
281-
.#{$prefix}--header__menu-item[role='menuitem']:hover {
280+
.#{$prefix}--header__menu .#{$prefix}--header__menu-item:hover {
282281
background-color: $shell-header-bg-06;
283282
color: $shell-header-text-01;
284283
}

‎packages/components/src/components/ui-shell/_side-nav.scss

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -330,9 +330,9 @@
330330
> .#{$prefix}--side-nav__link:hover,
331331
.#{$prefix}--side-nav__menu[role='menu']
332332
a.#{$prefix}--side-nav__link[role='menuitem']:not(.#{$prefix}--side-nav__link--current):not([aria-current='page']):hover,
333-
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem']:hover,
333+
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item:hover,
334334
.#{$prefix}--side-nav
335-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']:hover {
335+
.#{$prefix}--header__menu-title[aria-expanded='true']:hover {
336336
// TODO: sync color
337337
background-color: $shell-side-nav-bg-04;
338338
color: $ibm-color__gray-100;
@@ -474,9 +474,9 @@
474474
// Side-nav > Link
475475
//----------------------------------------------------------------------------
476476
a.#{$prefix}--side-nav__link,
477-
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem'],
477+
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item,
478478
.#{$prefix}--side-nav
479-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
479+
.#{$prefix}--header__menu-title[aria-expanded='true']
480480
+ .#{$prefix}--header__menu {
481481
@include focus-outline('reset');
482482
@include type-style('productive-heading-01');
@@ -498,7 +498,7 @@
498498

499499
a.#{$prefix}--side-nav__link > .#{$prefix}--side-nav__link-text,
500500
.#{$prefix}--side-nav
501-
a.#{$prefix}--header__menu-item[role='menuitem']
501+
a.#{$prefix}--header__menu-item
502502
.#{$prefix}--text-truncate-end {
503503
@include text-overflow();
504504
color: $shell-side-nav-text-01;
@@ -509,7 +509,7 @@
509509
}
510510

511511
a.#{$prefix}--side-nav__link:focus,
512-
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem']:focus {
512+
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item:focus {
513513
@include focus-outline('outline');
514514
}
515515

@@ -619,7 +619,7 @@
619619
}
620620

621621
//header menu items overrides
622-
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item[role='menuitem'] {
622+
.#{$prefix}--side-nav a.#{$prefix}--header__menu-item {
623623
color: $shell-side-nav-text-01;
624624
white-space: nowrap;
625625
justify-content: space-between;
@@ -630,7 +630,7 @@
630630
}
631631

632632
.#{$prefix}--side-nav
633-
.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true']
633+
.#{$prefix}--header__menu-title[aria-expanded='true']
634634
+ .#{$prefix}--header__menu {
635635
bottom: inherit;
636636
width: 100%;
@@ -643,28 +643,28 @@
643643
width: 100%;
644644
}
645645

646-
& a.#{$prefix}--header__menu-item[role='menuitem'] {
646+
a.#{$prefix}--header__menu-item {
647647
padding-left: 4.25rem;
648648
font-weight: 400;
649649
}
650650

651-
& a.#{$prefix}--header__menu-item[role='menuitem']:hover {
651+
a.#{$prefix}--header__menu-item:hover {
652652
background-color: $shell-side-nav-bg-04;
653653
color: $ibm-color__gray-100;
654654
}
655655
}
656656

657657
.#{$prefix}--side-nav
658658
.#{$prefix}--header__menu
659-
a.#{$prefix}--header__menu-item[role='menuitem'] {
659+
a.#{$prefix}--header__menu-item {
660660
height: inherit;
661661
}
662662

663663
.#{$prefix}--side-nav
664-
a.#{$prefix}--header__menu-item[role='menuitem']:hover
664+
a.#{$prefix}--header__menu-item:hover
665665
.#{$prefix}--header__menu-arrow,
666666
.#{$prefix}--side-nav
667-
a.#{$prefix}--header__menu-item[role='menuitem']:focus
667+
a.#{$prefix}--header__menu-item:focus
668668
.#{$prefix}--header__menu-arrow,
669669
.#{$prefix}--side-nav .#{$prefix}--header__menu-arrow {
670670
fill: $shell-side-nav-text-01;

‎packages/react/src/components/UIShell/HeaderMenu.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,6 @@ class HeaderMenu extends React.Component {
194194
href="#"
195195
onKeyDown={this.handleOnKeyDown}
196196
ref={this.handleMenuButtonRef}
197-
role="menuitem"
198197
tabIndex={0}
199198
{...accessibilityLabel}>
200199
{menuLinkName}

‎packages/react/src/components/UIShell/HeaderMenuItem.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
2222
{...rest}
2323
className={`${prefix}--header__menu-item`}
2424
ref={ref}
25-
role="menuitem"
2625
tabIndex={0}>
2726
<span className={`${prefix}--text-truncate--end`}>{children}</span>
2827
</Link>

‎packages/react/src/components/UIShell/UIShell-story.js

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -182,10 +182,19 @@ storiesOf('UI Shell', module)
182182
isPersistent={false}>
183183
<SideNavItems>
184184
<HeaderSideNavItems>
185-
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
186-
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
187-
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
188-
<HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
185+
<HeaderMenuItem linkRole="link" href="#">
186+
Link 1
187+
</HeaderMenuItem>
188+
<HeaderMenuItem linkRole="link" href="#">
189+
Link 2
190+
</HeaderMenuItem>
191+
<HeaderMenuItem linkRole="link" href="#">
192+
Link 3
193+
</HeaderMenuItem>
194+
<HeaderMenu
195+
linkRole="link"
196+
aria-label="Link 4"
197+
menuLinkName="Link 4">
189198
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
190199
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
191200
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
@@ -306,10 +315,19 @@ storiesOf('UI Shell', module)
306315
isPersistent={false}>
307316
<SideNavItems>
308317
<HeaderSideNavItems>
309-
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
310-
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
311-
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
312-
<HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
318+
<HeaderMenuItem linkRole="link" href="#">
319+
Link 1
320+
</HeaderMenuItem>
321+
<HeaderMenuItem linkRole="link" href="#">
322+
Link 2
323+
</HeaderMenuItem>
324+
<HeaderMenuItem linkRole="link" href="#">
325+
Link 3
326+
</HeaderMenuItem>
327+
<HeaderMenu
328+
linkRole="link"
329+
aria-label="Link 4"
330+
menuLinkName="Link 4">
313331
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
314332
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
315333
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>
@@ -371,10 +389,19 @@ storiesOf('UI Shell', module)
371389
expanded={isSideNavExpanded}>
372390
<SideNavItems>
373391
<HeaderSideNavItems hasDivider={true}>
374-
<HeaderMenuItem href="#">Link 1</HeaderMenuItem>
375-
<HeaderMenuItem href="#">Link 2</HeaderMenuItem>
376-
<HeaderMenuItem href="#">Link 3</HeaderMenuItem>
377-
<HeaderMenu aria-label="Link 4" menuLinkName="Link 4">
392+
<HeaderMenuItem linkRole="link" href="#">
393+
Link 1
394+
</HeaderMenuItem>
395+
<HeaderMenuItem linkRole="link" href="#">
396+
Link 2
397+
</HeaderMenuItem>
398+
<HeaderMenuItem linkRole="link" href="#">
399+
Link 3
400+
</HeaderMenuItem>
401+
<HeaderMenu
402+
linkRole="link"
403+
aria-label="Link 4"
404+
menuLinkName="Link 4">
378405
<HeaderMenuItem href="#">Sub-link 1</HeaderMenuItem>
379406
<HeaderMenuItem href="#">Sub-link 2</HeaderMenuItem>
380407
<HeaderMenuItem href="#">Sub-link 3</HeaderMenuItem>

‎packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ exports[`HeaderMenu should render 1`] = `
1818
className="bx--header__menu-item bx--header__menu-title"
1919
href="#"
2020
onKeyDown={[Function]}
21-
role="menuitem"
2221
tabIndex={0}
2322
>
2423
<defaultRenderMenuContent>
@@ -72,13 +71,11 @@ exports[`HeaderMenu should render 1`] = `
7271
className="bx--header__menu-item"
7372
element="a"
7473
href="/a"
75-
role="menuitem"
7674
tabIndex={0}
7775
>
7876
<a
7977
className="bx--header__menu-item"
8078
href="/a"
81-
role="menuitem"
8279
tabIndex={0}
8380
>
8481
<span
@@ -102,13 +99,11 @@ exports[`HeaderMenu should render 1`] = `
10299
className="bx--header__menu-item"
103100
element="a"
104101
href="/b"
105-
role="menuitem"
106102
tabIndex={0}
107103
>
108104
<a
109105
className="bx--header__menu-item"
110106
href="/b"
111-
role="menuitem"
112107
tabIndex={0}
113108
>
114109
<span
@@ -132,13 +127,11 @@ exports[`HeaderMenu should render 1`] = `
132127
className="bx--header__menu-item"
133128
element="a"
134129
href="/c"
135-
role="menuitem"
136130
tabIndex={0}
137131
>
138132
<a
139133
className="bx--header__menu-item"
140134
href="/c"
141-
role="menuitem"
142135
tabIndex={0}
143136
>
144137
<span

‎packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@ exports[`HeaderMenuItem should render 1`] = `
1212
<Link
1313
className="bx--header__menu-item"
1414
element="a"
15-
role="menuitem"
1615
tabIndex={0}
1716
>
1817
<a
1918
className="bx--header__menu-item"
20-
role="menuitem"
2119
tabIndex={0}
2220
>
2321
<span

0 commit comments

Comments
 (0)