Skip to content

Commit 1453b27

Browse files
Mash707mattnolting
authored andcommitted
feat(navigation) - add inert attribute to NavExpandable (patternfly#11749)
* feat(navigation) - add inert attribute to NavExpandable * updated inert attribute value to empty string * added two unit tests * reworked the unit tests
1 parent 5139c3e commit 1453b27

File tree

4 files changed

+25
-1
lines changed

4 files changed

+25
-1
lines changed

packages/react-core/src/components/Nav/NavExpandable.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
141141
</button>
142142
)}
143143
</PageSidebarContext.Consumer>
144-
<section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
144+
<section
145+
className={css(styles.navSubnav)}
146+
aria-labelledby={this.id}
147+
hidden={expandedState ? null : true}
148+
{...(!expandedState && { inert: '' })}
149+
>
145150
{srText && (
146151
<h2 className="pf-v6-screen-reader" id={this.id}>
147152
{srText}

packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
3939
aria-labelledby="''"
4040
class="pf-v6-c-nav__subnav"
4141
hidden=""
42+
inert=""
4243
>
4344
<h2
4445
class="pf-v6-screen-reader"
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { render, screen } from '@testing-library/react';
2+
import '@testing-library/jest-dom';
3+
import { NavExpandable } from '../NavExpandable';
4+
5+
test('Renders with the inert attribute by default', () => {
6+
render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
7+
8+
expect(screen.getByLabelText('NavExpandable')).toHaveAttribute('inert', '');
9+
});
10+
11+
test('Does not render with the inert attribute when isExpanded is true', () => {
12+
render(<NavExpandable id="grp-1" title="NavExpandable" isExpanded={true}></NavExpandable>);
13+
14+
expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
15+
});

packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,6 +223,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
223223
aria-labelledby="grp-1"
224224
class="pf-v6-c-nav__subnav"
225225
hidden=""
226+
inert=""
226227
>
227228
<ul
228229
class="pf-v6-c-nav__list"
@@ -355,6 +356,7 @@ exports[`Nav Expandable Nav List 1`] = `
355356
aria-labelledby="grp-1"
356357
class="pf-v6-c-nav__subnav"
357358
hidden=""
359+
inert=""
358360
>
359361
<ul
360362
class="pf-v6-c-nav__list"
@@ -486,6 +488,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
486488
aria-labelledby="grp-1"
487489
class="pf-v6-c-nav__subnav"
488490
hidden=""
491+
inert=""
489492
>
490493
<h2
491494
class="pf-v6-screen-reader"

0 commit comments

Comments
 (0)