Skip to content

Commit

Permalink
[WNMGDS-963] updating vertical nav for improved accessibility (#1111)
Browse files Browse the repository at this point in the history
* Update build script to include  branch. (#1104)

* [WNMGDS-986]Set up linting  (#1102)

* add precommit file

* update stylelint disable rule

* TSX linting

* JSON linting

* adding typescript to linting

* adding husky install

* update husky to v7

* [WNMGDS-977] Table typescript conversion (#1088)

* Log console warning msg for data cell and non-space header cell only

* Use React Context to replace prop drilling for _stackable prop

* Add context

* Add warningDisabled prop to prevent logging of console.warn on stacked table id/headers checks

* Update tests

* Update typedef file to add warningDisabled prop

* Convert table component to typescript

* Remove table typedef files

* Remove table typedef files

* Rename index file type to ts

* TS type export update

Co-authored-by: Scott Weber <[email protected]>
Co-authored-by: Sarah <[email protected]>
Co-authored-by: Anna Kammeyer <[email protected]>

* Bump prismjs from 1.23.0 to 1.24.0 in /packages/design-system-docs (#1072)

Bumps [prismjs](https://github.com/PrismJS/prism) from 1.23.0 to 1.24.0.
- [Release notes](https://github.com/PrismJS/prism/releases)
- [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md)
- [Commits](PrismJS/prism@v1.23.0...v1.24.0)

---
updated-dependencies:
- dependency-name: prismjs
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump prismjs from 1.23.0 to 1.24.0 in /packages/design-system-scripts (#1074)

Bumps [prismjs](https://github.com/PrismJS/prism) from 1.23.0 to 1.24.0.
- [Release notes](https://github.com/PrismJS/prism/releases)
- [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md)
- [Commits](PrismJS/prism@v1.23.0...v1.24.0)

---
updated-dependencies:
- dependency-name: prismjs
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* [WNMGDS-1002] updating doc site to display TS prop types correctly (#1105)

* updating doc site to display TS prop types correctly

* alert prop updates

* lint update

* [NO-TICKET] Bugfix/typescript export updates (#1099)

* autocomplete TS type update

* badge TS export updates

* form label TS type export update

* spinner TS type export update

* updating vertical nav for improved accessibility

* Patch/2.7.2 - Dev branch (#1101)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094)

* Add export for DateFieldYearValue in <DateField />. (#1095)

* Export several types and interfaces from <Dropdown />. (#1096)

* Review TS types/interfaces for TextField components. (#1098)

* alert and choice list typescript type export updates (#1097)

* alert component TS definition updates

* updated alert TS omit props

* ChoiceList component TS definition updates

* updated ChoiceProps to be exported

* comment cleanup in alert

* Patch/2.7.2 - Master branch (#1100)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Add export for DateFieldYearValue in <DateField />. (#1095)

* Export several types and interfaces from <Dropdown />. (#1096)

* Review TS types/interfaces for TextField components. (#1098)

* alert and choice list typescript type export updates (#1097)

* alert component TS definition updates

* updated alert TS omit props

* ChoiceList component TS definition updates

* updated ChoiceProps to be exported

* comment cleanup in alert

Co-authored-by: Anna Scheuler Kammeyer <[email protected]>

* core-2.7.2 (#1103)

* Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS."

This reverts commit b9bc6aa.

* Reverting ts reverts (#1107)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS."

This reverts commit b9bc6aa.

Co-authored-by: Anna Scheuler Kammeyer <[email protected]>

* WNMGDS-1008 aligning doc site footer links (#1109)

* aligning doc site footer links

* simplifying border 0 application

* Add accessibility docs for nav landmarks

* PR feedback updates

* autocomplete aria attribute update (#1108)

Co-authored-by: Scott Weber <[email protected]>

* [WNMGDS-916] Feature/secondary tertiary buttons (#1106)

* Adding SCSS variables

* Update example

* add variations for secondary and tertiary

* Add button line height and improve descriptions

* add specific button line height variable

* Add button font-weight variable

* move order of styles to fix build

* Remove focus if statements and update SCSS

* organizing SCSS better

* update SCSS button mapping

* set bg on transparent buttons to be transparent

* Update text decoration for disabled buttons

* add inverse primary styles and clean up scss

* add type to button

* Bump path-parse from 1.0.6 to 1.0.7 (#1112)

Bumps [path-parse](https://github.com/jbgutierrez/path-parse) from 1.0.6 to 1.0.7.
- [Release notes](https://github.com/jbgutierrez/path-parse/releases)
- [Commits](https://github.com/jbgutierrez/path-parse/commits/v1.0.7)

---
updated-dependencies:
- dependency-name: path-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Add text-decoration to buttons (#1117)

* [NO-TICKET] Remove getting started and guideline pages from backstop (#1110)

* Remove getting started and guideline pages

* update backstop to remove content pages

* Bump jszip from 3.5.0 to 3.7.1 in /packages/design-system-scripts (#1113)

Bumps [jszip](https://github.com/Stuk/jszip) from 3.5.0 to 3.7.1.
- [Release notes](https://github.com/Stuk/jszip/releases)
- [Changelog](https://github.com/Stuk/jszip/blob/master/CHANGES.md)
- [Commits](Stuk/jszip@v3.5.0...v3.7.1)

---
updated-dependencies:
- dependency-name: jszip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Bump jszip from 3.5.0 to 3.7.1 (#1115)

Bumps [jszip](https://github.com/Stuk/jszip) from 3.5.0 to 3.7.1.
- [Release notes](https://github.com/Stuk/jszip/releases)
- [Changelog](https://github.com/Stuk/jszip/blob/master/CHANGES.md)
- [Commits](Stuk/jszip@v3.5.0...v3.7.1)

---
updated-dependencies:
- dependency-name: jszip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <[email protected]>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* button ts type updates (#1118)

* Revert dateFormatter to original type. (#1119)

* core-2.7.4

* WNMGDS-1064 - Fix text-underline bug  (#1125)

* Update to auto

* kick off GHA

* [NO-TICKET] Update chromedriver from version 91 to 93 (#1136)

* Chore/branch alignment (#1137)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094)

* Patch/2.7.2 - Master branch (#1100)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Add export for DateFieldYearValue in <DateField />. (#1095)

* Export several types and interfaces from <Dropdown />. (#1096)

* Review TS types/interfaces for TextField components. (#1098)

* alert and choice list typescript type export updates (#1097)

* alert component TS definition updates

* updated alert TS omit props

* ChoiceList component TS definition updates

* updated ChoiceProps to be exported

* comment cleanup in alert

Co-authored-by: Anna Scheuler Kammeyer <[email protected]>

* core-2.7.2 (#1103)

* Reverting ts reverts (#1107)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS."

This reverts commit b9bc6aa.

* Revert dateformatter in datefield interface to previous type. (#1120)

* Release 2.7.3 (#1121)

* core-2.7.2

* core-2.7.3

* WNMGDS-1064 - Fix text-underline bug (#1126)

Summary
ISSUE: Mobile view: Underlines in various texts seems to be broken 

DESCRIPTION: When PCII is open in mobile view, texts which are underlined, there seems to be line that is broken in pieces instead of continuous line.
https://jira.cms.gov/browse/WNMGPCII-1515

Fixed
changed value of text-underline-offset from 0 to auto where the browser chooses the appropriate offset for underlines.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

How to test
take a look at the demo url on an iOS device to ensure that the links are not looking broken
http://design-system-demo.s3-website-us-east-1.amazonaws.com/WNMGDS-1064-text-underline-fix-master

* Bugfix/master ts export updates (#1127)

* core-2.7.2

* core-2.7.3

* button TS export updates

* autocomplete ts export update

* badge ts export update

* formlabel ts export update

* spinner ts export update

* linting

* core-2.7.4

* core-2.7.4 (#1128)

Co-authored-by: Sarah <[email protected]>
Co-authored-by: Scott Weber <[email protected]>

* NO-TICKET/Windows is now able to build DS (#1132)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094)

* Patch/2.7.2 - Master branch (#1100)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Add export for DateFieldYearValue in <DateField />. (#1095)

* Export several types and interfaces from <Dropdown />. (#1096)

* Review TS types/interfaces for TextField components. (#1098)

* alert and choice list typescript type export updates (#1097)

* alert component TS definition updates

* updated alert TS omit props

* ChoiceList component TS definition updates

* updated ChoiceProps to be exported

* comment cleanup in alert

Co-authored-by: Anna Scheuler Kammeyer <[email protected]>

* core-2.7.2 (#1103)

* Reverting ts reverts (#1107)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS."

This reverts commit b9bc6aa.

* Revert dateformatter in datefield interface to previous type. (#1120)

* Release 2.7.3 (#1121)

* core-2.7.2

* core-2.7.3

* WNMGDS-1064 - Fix text-underline bug (#1126)

Summary
ISSUE: Mobile view: Underlines in various texts seems to be broken 

DESCRIPTION: When PCII is open in mobile view, texts which are underlined, there seems to be line that is broken in pieces instead of continuous line.
https://jira.cms.gov/browse/WNMGPCII-1515

Fixed
changed value of text-underline-offset from 0 to auto where the browser chooses the appropriate offset for underlines.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

How to test
take a look at the demo url on an iOS device to ensure that the links are not looking broken
http://design-system-demo.s3-website-us-east-1.amazonaws.com/WNMGDS-1064-text-underline-fix-master

* Bugfix/master ts export updates (#1127)

* core-2.7.2

* core-2.7.3

* button TS export updates

* autocomplete ts export update

* badge ts export update

* formlabel ts export update

* spinner ts export update

* linting

* core-2.7.4 (#1128)

* Windows is now able to build DS

* updated test to handle windows

* handle subfolders as well

Co-authored-by: Sarah <[email protected]>
Co-authored-by: Anna Scheuler Kammeyer <[email protected]>
Co-authored-by: Scott Weber <[email protected]>

* Revert #1106 and #1117 (secondary/tertiary buttons) (#1138)

* Revert "Add text-decoration to buttons (#1117)"

This reverts commit a95cc37.

* Revert "[WNMGDS-916] Feature/secondary tertiary buttons (#1106)"

This reverts commit 159778a.

* [WNMGWINSHOP-934] Add more customization options to Autocomplete items (#1133)

* Add children property to items for custom item rendering

* Add custom className option for each item

* Use custom class in new Autocomplete example to make it more realistic

* Place the example CSS in its canonical home and make example even truer to life

Using the now-available DS focus styles

* Less outlandish custom styles for the example

* Add ability to ignore certain items with regards to the result count in screen-reader messages

* Keep a11y message from announcing twice

* Be more clear about this comment

* Duplicate AutocompleteItems documentation in a hand-crafted table

I'd rather not do this, but we're limited by the current react-docgen setup. There's a precedent for it in `_HelpDrawer.docs.scss`

* Just use Enzyme for the snapshots

Because nowadays Enzyme objects serialized are actually really great

* Fixed documentation mismatch for props

* Fix children/className docs issue

* adding transparent bg (#1140)

* [WNMGWINSHOP-934] Revert one prop type change for Autocomplete (#1141)

Revert change to `getA11yStatusMessage` type so we aren't enforcing strict compliance to our `AutocompleteItems` interface

* [WNMGDS-843] updated spinner markup for improved accessibility (#1131)

* updated spinner markup for improved accessibility

* updated documentation examples

* updating chromedriver to 93 for e2e tests

* updated spinner in button example

* WNMGDS 814/e2e tool update (#1130)

* e2e test upgrades

* cleanup

* removing unit timeout extension

* [NO-TICKET] Simplify analytics API (#1142)

* Simplify underlying analytics functions to use in child design systems

and add a new Analytics component that may or may not be helpful. Might delete it in a subsequent commit

* Remove new `Analytics` component, as it will only be helpful for a subset of events

* Revert Alert example changes that I was using for development

* Simplified the analytics props for the Alert component

Right now I don't think there is any use case for modifying the analytics events beyond overriding the dynamic content that is being sent to GA to remove PII. Therefore I'm simplifing the props to only take a scalar value for that specific overridden string.

* Fix case mismatch in import

(I previously tried changing the case of the directory and then realized that was a terrible idea.)

* Remove debug logging

* Fixed case mismatch

* Fix case mismatch

* Update Dialog and HelpDrawer to match, and update all tests

* Expose `sendLinkEvent` as well

* Merge master into development to resolve conflicts (#1144)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS. (#1094)

* Patch/2.7.2 - Master branch (#1100)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Add export for DateFieldYearValue in <DateField />. (#1095)

* Export several types and interfaces from <Dropdown />. (#1096)

* Review TS types/interfaces for TextField components. (#1098)

* alert and choice list typescript type export updates (#1097)

* alert component TS definition updates

* updated alert TS omit props

* ChoiceList component TS definition updates

* updated ChoiceProps to be exported

* comment cleanup in alert

Co-authored-by: Anna Scheuler Kammeyer <[email protected]>

* core-2.7.2 (#1103)

* Reverting ts reverts (#1107)

* Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS.

* Revert "Implement gitflow, revert work for: bash script for testing, Badge TS, Spinner TS, Prism version bump, Alert TS definitions, Link styles, stackable Table, FormLabel TS, Button TS."

This reverts commit b9bc6aa.

* Revert dateformatter in datefield interface to previous type. (#1120)

* Release 2.7.3 (#1121)

* core-2.7.2

* core-2.7.3

* WNMGDS-1064 - Fix text-underline bug (#1126)

Summary
ISSUE: Mobile view: Underlines in various texts seems to be broken 

DESCRIPTION: When PCII is open in mobile view, texts which are underlined, there seems to be line that is broken in pieces instead of continuous line.
https://jira.cms.gov/browse/WNMGPCII-1515

Fixed
changed value of text-underline-offset from 0 to auto where the browser chooses the appropriate offset for underlines.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset

How to test
take a look at the demo url on an iOS device to ensure that the links are not looking broken
http://design-system-demo.s3-website-us-east-1.amazonaws.com/WNMGDS-1064-text-underline-fix-master

* Bugfix/master ts export updates (#1127)

* core-2.7.2

* core-2.7.3

* button TS export updates

* autocomplete ts export update

* badge ts export update

* formlabel ts export update

* spinner ts export update

* linting

* core-2.7.4 (#1128)

Co-authored-by: Sarah <[email protected]>
Co-authored-by: Anna Scheuler Kammeyer <[email protected]>
Co-authored-by: Scott Weber <[email protected]>

* [NO-TICKET] Expose type definitions for analytics modules (#1145)

Had to explicitly add the `analytics` module to the export list for TS types

* update table example to fix right aligned header (#1153)

* [NO-TICKET] Update link to Jenkins job (#1149)

* [NO-TICKET] Add clearInputOnBlur prop to Autocomplete (#1135)

Add `clearInputOnBlur` default prop that can be turned off to keep input after blur

* yarn lock update

* reversing GHA build script to only build master branch

Co-authored-by: Sarah <[email protected]>
Co-authored-by: Scott Weber <[email protected]>
Co-authored-by: Ni Chia <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: David Kennedy <[email protected]>
Co-authored-by: Patrick Wolfert <[email protected]>
Co-authored-by: David Carek <[email protected]>
  • Loading branch information
8 people authored Sep 28, 2021
1 parent 738a4eb commit 77274f1
Show file tree
Hide file tree
Showing 7 changed files with 120 additions and 76 deletions.
4 changes: 1 addition & 3 deletions lerna.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
{
"npmClient": "yarn",
"packages": [
"packages/*"
],
"packages": ["packages/*"],
"ignoreChanges": [
"packages/stylelint-config-design-system/**",
"packages/eslint-config-design-system/**"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ Link.propTypes = { children: PropTypes.node };
ReactDOM.render(
<VerticalNav
selectedId="team"
ariaNavLabel="Primary"
items={[
{
label: 'Parent link',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,10 @@ if you're using the React components.
- If your navigation list is longer than 3 items, consider using a skip navigation link. This allows screen reader and keyboard users to skip to the main content area(s).
- If a skip navigation link is not an option, consider using:
* A valid, descriptive page header
* Landmark regions like `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`
* A `role` attribute like `<div role="navigation">`
* Landmark regions like `<header>`, `<main>`, `<aside>`, `<footer>`
- When naming the optional `ariaNavLabel` prop, keep in mind:
* This prop is necessary only when there is more than one nav element on a page.
* Don't include the word "Menu" in the label. Most screen readers will announce that information already. Instead, provide more context to what's in the menu and/or its location. Like "Main" or "Social".
### Related patterns
Expand Down
Original file line number Diff line number Diff line change
@@ -1,57 +1,59 @@
<ul class="ds-c-vertical-nav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Parent link
</a>
</li>
<li class="ds-c-vertical-nav__item">
<button
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent"
title="Collapse sub-navigation"
aria-expanded="true"
>
Current page
</button>
<ul class="ds-c-vertical-nav__subnav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Child link
</a>
</li>
<li class="ds-c-vertical-nav__item">
<button
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent"
title="Collapse sub-navigation"
aria-expanded="true"
>
Child link
</button>
<ul class="ds-c-vertical-nav__subnav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Grandchild link
</a>
</li>
<li class="ds-c-vertical-nav__item">
<a
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current"
href="javascript:void(0);"
>
Grandchild link
</a>
</li>
</ul>
</li>
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Child link
</a>
</li>
</ul>
</li>
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Parent link
</a>
</li>
</ul>
<nav>
<ul class="ds-c-vertical-nav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Parent link
</a>
</li>
<li class="ds-c-vertical-nav__item">
<button
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent"
title="Collapse sub-navigation"
aria-expanded="true"
>
Current page
</button>
<ul class="ds-c-vertical-nav__subnav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Child link
</a>
</li>
<li class="ds-c-vertical-nav__item">
<button
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current ds-c-vertical-nav__label--parent"
title="Collapse sub-navigation"
aria-expanded="true"
>
Child link
</button>
<ul class="ds-c-vertical-nav__subnav">
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Grandchild link
</a>
</li>
<li class="ds-c-vertical-nav__item">
<a
class="ds-c-vertical-nav__label ds-c-vertical-nav__label--current"
href="javascript:void(0);"
>
Grandchild link
</a>
</li>
</ul>
</li>
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Child link
</a>
</li>
</ul>
</li>
<li class="ds-c-vertical-nav__item">
<a class="ds-c-vertical-nav__label" href="javascript:void(0);">
Parent link
</a>
</li>
</ul>
</nav>
14 changes: 11 additions & 3 deletions packages/design-system/src/components/VerticalNav/VerticalNav.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,11 +36,14 @@ export class VerticalNav extends React.PureComponent {
},
this.props.className
);
const navProps = this.props.ariaNavLabel ? { 'aria-label': this.props.ariaNavLabel } : {};

return (
<ul className={classes} id={this.props.id}>
{this.renderItems()}
</ul>
<nav {...navProps}>
<ul className={classes} id={this.props.id}>
{this.renderItems()}
</ul>
</nav>
);
}
}
Expand All @@ -50,6 +53,11 @@ VerticalNav.defaultProps = {
};

VerticalNav.propTypes = {
/**
* An optional arial label for the `<nav>` element in this component.
* This prop is necessary when there is more than one nav element on a page.
*/
ariaNavLabel: PropTypes.string,
/**
* Additional classes to be added to the root element
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,39 +19,67 @@ describe('VerticalNav', () => {
it('renders list', () => {
const data = render();
const wrapper = data.wrapper;
const listEl = wrapper.find('ul');

expect(wrapper.is('ul')).toBe(true);
expect(wrapper.hasClass('ds-c-vertical-nav')).toBe(true);
expect(data.wrapper.hasClass('ds-c-vertical-nav__subnav')).toBe(false);
expect(data.wrapper.hasClass('ds-u-display--none')).toBe(false);
expect(listEl.is('ul')).toBe(true);
expect(listEl.hasClass('ds-c-vertical-nav')).toBe(true);
expect(listEl.hasClass('ds-c-vertical-nav__subnav')).toBe(false);
expect(listEl.hasClass('ds-u-display--none')).toBe(false);
expect(wrapper.find('VerticalNavItem').length).toBe(data.props.items.length);
expect(wrapper.find('VerticalNavItem').first().prop('onClick')).toBeUndefined();
});

it('adds additional class names', () => {
const data = render({ className: 'foo' });
const listEl = data.wrapper.find('ul');

expect(data.wrapper.hasClass('ds-c-vertical-nav')).toBe(true);
expect(data.wrapper.hasClass('foo')).toBe(true);
expect(listEl.hasClass('ds-c-vertical-nav')).toBe(true);
expect(listEl.hasClass('foo')).toBe(true);
});

describe('aria-label', () => {
it('has aria-label attribute if passed prop', () => {
const data = render({ ariaNavLabel: 'side menu' });
const wrapper = data.wrapper;

const navEl = wrapper.find('nav');
const ariaLabelAttr = navEl.prop('aria-label');

expect(ariaLabelAttr).toBeTruthy();
expect(ariaLabelAttr).toEqual('side menu');
});

it('does not have aria-label by default', () => {
const data = render();
const wrapper = data.wrapper;

const navEl = wrapper.find('nav');
const ariaLabelAttr = navEl.prop('aria-label');

expect(ariaLabelAttr).toBeFalsy();
});
});

it('has an id attribute', () => {
const data = render({ id: 'foo' });
const listEl = data.wrapper.find('ul');

expect(data.wrapper.prop('id')).toBe(data.props.id);
expect(listEl.prop('id')).toBe(data.props.id);
});

it('is a subnav list', () => {
const data = render({ nested: true });
const listEl = data.wrapper.find('ul');

expect(data.wrapper.hasClass('ds-c-vertical-nav')).toBe(false);
expect(data.wrapper.hasClass('ds-c-vertical-nav__subnav')).toBe(true);
expect(listEl.hasClass('ds-c-vertical-nav')).toBe(false);
expect(listEl.hasClass('ds-c-vertical-nav__subnav')).toBe(true);
});

it('is collapsed', () => {
const data = render({ collapsed: true });
const listEl = data.wrapper.find('ul');

expect(data.wrapper.hasClass('ds-u-display--none')).toBe(true);
expect(listEl.hasClass('ds-u-display--none')).toBe(true);
});

it('passes onLinkClick to items', () => {
Expand Down
7 changes: 6 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -12904,7 +12904,12 @@ pretty-hrtime@^1.0.0:
resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=

[email protected], prismjs@^1.11.0:
[email protected]:
version "1.25.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==

prismjs@^1.11.0:
version "1.24.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.24.0.tgz#0409c30068a6c52c89ef7f1089b3ca4de56be2ac"
integrity sha512-SqV5GRsNqnzCL8k5dfAjCNhUrF3pR0A9lTDSCUZeh/LIshheXJEaP0hwLz2t4XHivd2J/v2HR+gRnigzeKe3cQ==
Expand Down

0 comments on commit 77274f1

Please sign in to comment.