Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added managed keyboard nav and roles to NxDropdown - RSC-989 #845

Draft
wants to merge 30 commits into
base: main
Choose a base branch
from
Draft

Added managed keyboard nav and roles to NxDropdown - RSC-989 #845

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
5fb9866
Progress on basic keynav. - RSC-989
Nov 2, 2022
6aa16f5
Added basic menu keynav to dropdown menu. - RSC-989
Nov 7, 2022
b4a2f4c
Small cleanup. - RSC-989
Nov 7, 2022
27ab642
Added aria-controls to dropdown. - RSC-989
Nov 8, 2022
e807803
Added dropdown menu test. - RSC-989
Nov 8, 2022
47880d8
Updated unit tests. - RSC-989
Nov 8, 2022
fc40f5d
Fixed a11y tests. - RSC-989
Nov 8, 2022
3041e4b
Merge branch 'main' into RSC-989_add-managed-keynav-and-roles-to-nx-d…
Nov 8, 2022
3353a93
Added convinience components and withWrapper (in progress). - RSC-989
Nov 10, 2022
1ee7a6f
Use inputAttributes. - RSC-989
Nov 10, 2022
775db95
Update lib/src/components/NxDropdownMenu/NxDropdownMenu.tsx
entroform Nov 10, 2022
d9fb143
Allow null for menuId. - RSC-989
Nov 10, 2022
3284aff
Merge branch 'main' into RSC-989_add-managed-keynav-and-roles-to-nx-d…
Nov 14, 2022
a5b3689
Fixed menuId. - RSC-989
Nov 14, 2022
10a9031
Progress on moving keyboard nav logic to DropdownMenu. - RSC-989
Nov 15, 2022
b5267a5
Progress on DropdownMenu. - RSC-989
Nov 17, 2022
0953e28
Progress on exploring wrapper idea. - RSC-989
Nov 17, 2022
127c2ee
Got toggle button to connect to dropdownMenu. - RSC-989
Nov 18, 2022
3693678
Removed backup. - RSC-989
Nov 18, 2022
641905f
Updated withClass implementation. - RSC-989
Nov 18, 2022
680a197
Added disableMenuNav. - RSC-989
Nov 18, 2022
1dff85a
Removed menu focus on reset click - filter dropdown - RSC-989
Nov 18, 2022
443bc32
Progress on KeyNav. - RSC-989
Nov 21, 2022
62b966a
Fixed FilterDropdown. - RSC-989
Nov 21, 2022
e125b0e
Removed comments.
Nov 22, 2022
103669a
Removed separator. - RSC-989
Nov 22, 2022
87d5507
Merge branch 'main' into RSC-989_add-managed-keynav-and-roles-to-nx-d…
Nov 23, 2022
735b679
Fixed some issues. - RSC-989
Nov 25, 2022
8cf86b8
Merge branch 'main' into RSC-989_add-managed-keynav-and-roles-to-nx-d…
Jan 9, 2023
016943a
Merge branch 'main' into RSC-989_add-managed-keynav-and-roles-to-nx-d…
Jan 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions gallery/src/components/NxDropdown/NxDropdownCloseHandlerExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ function NxDropdownCloseHandlerExample() {
onToggleCollapse={onToggleCollapse}
onCloseClick={(evt: MouseEvent) => evt.preventDefault()}
onCloseKeyDown={(evt: KeyboardEvent) => evt.preventDefault()}>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
<a onClick={onClick} href="#/pages/Dropdown" role="menuitem" className="nx-dropdown-button">
Link
</a>
<button onClick={onClick} className="nx-dropdown-button">
<button role="menuitem" onClick={onClick} className="nx-dropdown-button">
Button
</button>
</NxDropdown>
Expand Down
2 changes: 1 addition & 1 deletion gallery/src/components/NxDropdown/NxDropdownCustomLabelExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function NxDropdownCustomLabelExample() {
className="extra-class"
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<button onClick={onClick} className="nx-dropdown-button">
<button role="menuitem" onClick={onClick} className="nx-dropdown-button">
<NxFontAwesomeIcon icon={faFrog}/>
<span>Some Action</span>
</button>
Expand Down
18 changes: 13 additions & 5 deletions gallery/src/components/NxDropdown/NxDropdownLinksExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,30 @@ function NxDropdownActionsExample() {
className="extra-class"
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<a href="https://www.google.com/" className="nx-dropdown-link">
<a href="https://www.google.com/" role="menuitem" className="nx-dropdown-link">
<span>Go somewhere</span>
<NxFontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
<a href="https://www.sonatype.com/" className="nx-dropdown-link">
<a href="https://www.sonatype.com/" role="menuitem" className="nx-dropdown-link">
<span>Go somewhere else</span>
<NxFontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
<a href="https://www.google.com/" className="nx-dropdown-link disabled" onClick={evt => evt.preventDefault()}>
<a href="https://www.google.com/"
role="menuitem"
className="nx-dropdown-link disabled"
onClick={evt => evt.preventDefault()}>
<span>Can't go here though</span>
<NxFontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
<a href="#/" className="nx-dropdown-link">
<a href="#/"
className="nx-dropdown-link"
role="menuitem">
<span>Go to homepage</span>
</a>
<a href="#/" className="nx-dropdown-link disabled" onClick={evt => evt.preventDefault()}>
<a href="#/"
className="nx-dropdown-link disabled"
onClick={evt => evt.preventDefault()}
role="menuitem">
<span>Can't go here either</span>
</a>
</NxDropdown>
Expand Down
14 changes: 7 additions & 7 deletions gallery/src/components/NxDropdown/NxDropdownNavigationExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,26 +14,26 @@ function NxDropdownNavigationExample() {

return (
<NxDropdown label="Navigation" isOpen={isOpen} onToggleCollapse={onToggleCollapse}>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button" role="menuitem">
Text link 1
</a>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button" role="menuitem">
Text link 2
</a>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button" role="menuitem">
Text link 3 - this link should trigger truncation
</a>
<button onClick={onClick} className="nx-dropdown-button">
<button onClick={onClick} className="nx-dropdown-button" role="menuitem">
Button Link 4 - this link should trigger truncation
</button>
<button onClick={onClick} className="nx-dropdown-button">
<button onClick={onClick} className="nx-dropdown-button" role="menuitem">
Button Link 5
</button>
<NxDropdown.Divider />
<button onClick={onClick} className="nx-dropdown-button">
<button onClick={onClick} className="nx-dropdown-button" role="menuitem">
Button Link 6
</button>
<button className="disabled nx-dropdown-button">
<button className="disabled nx-dropdown-button" role="menuitem">
Button Link 7 Disabled
</button>
</NxDropdown>
Expand Down
9 changes: 9 additions & 0 deletions gallery/src/components/NxDropdown/NxDropdownPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,15 @@ const NxDropdownPage = () =>
dropdown not to close.
</NxTable.Cell>
</NxTable.Row>
<NxTable.Row>
<NxTable.Cell>menuId</NxTable.Cell>
<NxTable.Cell>string</NxTable.Cell>
<NxTable.Cell>No</NxTable.Cell>
<NxTable.Cell>
By default aria-controls and the menu is given a unique id.{' '}
This prop allows you to override that id.
</NxTable.Cell>
</NxTable.Row>
<NxTable.Row>
<NxTable.Cell>HTML <NxCode>&lt;div&gt;</NxCode> Attributes</NxTable.Cell>
<NxTable.Cell>
Expand Down
14 changes: 8 additions & 6 deletions gallery/src/components/NxDropdown/NxDropdownRightButtonsExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,30 +14,32 @@ function NxDropdownRightButtonsExample() {

return (
<NxDropdown label="Navigation" isOpen={isOpen} onToggleCollapse={onToggleCollapse}>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
<span className="nx-dropdown-button-content">Text Link</span>
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
<span className="nx-dropdown-button-content">
Text Link - this link should trigger truncation
</span>
</a>
<NxButton onClick={() => alert('icon click')}
className="nx-dropdown-right-button"
variant="icon-only"
title="Delete Button Link2">
title="Delete Button Link2"
role="menuitem">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check with design about how these buttons should be added into the recommended patterns. These are pretty nonstandard, so I think we're on our own in terms of how they behave. Having them just be part of the up/down key cycling doesn't necessarily seem right though.

<NxFontAwesomeIcon icon={faTrash}/>
</NxButton>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
<span className="nx-dropdown-button-content">Button Link2</span>
</a>
<NxButton onClick={() => alert('icon click')}
className="nx-dropdown-right-button"
variant="icon-only"
title="Delete Text Link3">
title="Delete Text Link3"
role="menuitem">
<NxFontAwesomeIcon icon={faTrash}/>
</NxButton>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
<span className="nx-dropdown-button-content">Text Link3 - this link should trigger truncation</span>
</a>
</NxDropdown>
Expand Down
27 changes: 14 additions & 13 deletions gallery/src/components/NxDropdown/NxDropdownScrollingExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,46 +15,47 @@ function NxDropdownNavigationExample() {
<NxDropdown label="Scrolling - this label also triggers truncation"
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 1
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 2
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 3
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 4
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 5
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 6
</a>
<a href="#/"
onClick={evt => { evt.preventDefault(); }}
className="disabled nx-dropdown-button"
aria-disabled="true">
aria-disabled="true"
role="menuitem">
Text Link 7 Disabled
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 8
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 9
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 10
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 11
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 12
</a>
<a href="#/" className="nx-dropdown-button">
<a href="#/" className="nx-dropdown-button" role="menuitem">
Text Link 13
</a>
</NxDropdown>
Expand Down
8 changes: 4 additions & 4 deletions gallery/src/components/NxDropdown/NxDropdownShortExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ function NxDropdownNavigationExample() {

return (
<NxDropdown className="nx-dropdown--short" label="Navigation" isOpen={isOpen} onToggleCollapse={onToggleCollapse}>
<button onClick={onClick} className="nx-dropdown-button">
<button onClick={onClick} className="nx-dropdown-button" role="menuitem">
Button Link 4 - this link should trigger truncation
</button>
<button onClick={onClick} className="nx-dropdown-button">
<button onClick={onClick} className="nx-dropdown-button" role="menuitem">
Button Link 5
</button>
<button onClick={onClick} className="nx-dropdown-button">
<button onClick={onClick} className="nx-dropdown-button" role="menuitem">
Button Link 6
</button>
<button className="disabled nx-dropdown-button">
<button className="disabled nx-dropdown-button" role="menuitem">
Button Link 7 Disabled
</button>
</NxDropdown>
Expand Down
12 changes: 6 additions & 6 deletions gallery/src/components/NxDropdown/NxDropdownWithNxThreatIndicatorExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,27 @@ function NxDropdownWithNxThreatIndicatorExample() {
<NxDropdown label={labelElement}
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<button className="nx-dropdown-button" onClick={onClick}>
<button className="nx-dropdown-button" onClick={onClick} role="menuitem">
<NxThreatIndicator />
<span>Unspecified</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
<button className="nx-dropdown-button" onClick={onClick} role="menuitem">
<NxThreatIndicator threatLevelCategory="none" />
<span>None</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
<button className="nx-dropdown-button" onClick={onClick} role="menuitem">
<NxThreatIndicator threatLevelCategory="low" />
<span>Low</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
<button className="nx-dropdown-button" onClick={onClick} role="menuitem">
<NxThreatIndicator threatLevelCategory="moderate" />
<span>Moderate</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
<button className="nx-dropdown-button" onClick={onClick} role="menuitem">
<NxThreatIndicator threatLevelCategory="severe" />
<span>Severe</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
<button className="nx-dropdown-button" onClick={onClick} role="menuitem">
<NxThreatIndicator threatLevelCategory="critical" />
<span>Critical</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions gallery/src/components/NxSegmentedButton/NxSegmentedButtonCloseHandlerExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ export default function NxSegmentedButtonPrimaryExample() {
buttonContent="Click Here"
onCloseClick={(evt: MouseEvent) => evt.preventDefault()}
onCloseKeyDown={(evt: KeyboardEvent) => evt.preventDefault()}>
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 2
</button>
</NxSegmentedButton>
Expand Down
6 changes: 3 additions & 3 deletions gallery/src/components/NxSegmentedButton/NxSegmentedButtonPrimaryExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export default function NxSegmentedButtonPrimaryExample() {
onToggleOpen={onToggleOpen}
onClick={onMainClick}
buttonContent="Click Here">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 2
</button>
</NxSegmentedButton>
Expand All @@ -36,7 +36,7 @@ export default function NxSegmentedButtonPrimaryExample() {
onToggleOpen={onToggleOpen}
onClick={onMainClick}
buttonContent="Disabled Primary Button">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
</NxSegmentedButton>
Expand Down
6 changes: 3 additions & 3 deletions gallery/src/components/NxSegmentedButton/NxSegmentedButtonSecondaryExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export default function NxSegmentedButtonSecondaryExample() {
onToggleOpen={onToggleOpen}
onClick={onMainClick}
buttonContent="Click Here">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 2
</button>
</NxSegmentedButton>
Expand All @@ -36,7 +36,7 @@ export default function NxSegmentedButtonSecondaryExample() {
onToggleOpen={onToggleOpen}
onClick={onMainClick}
buttonContent="Disabled Primary Button">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
</NxSegmentedButton>
Expand Down
6 changes: 3 additions & 3 deletions gallery/src/components/NxSegmentedButton/NxSegmentedButtonTertiaryExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export default function NxSegmentedButtonTertiaryExample() {
onToggleOpen={onToggleOpen}
onClick={onMainClick}
buttonContent="Click Here">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 2
</button>
</NxSegmentedButton>
Expand All @@ -36,7 +36,7 @@ export default function NxSegmentedButtonTertiaryExample() {
onToggleOpen={onToggleOpen}
onClick={onMainClick}
buttonContent="Disabled Primary Button">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
</NxSegmentedButton>
Expand Down
4 changes: 2 additions & 2 deletions gallery/src/components/NxStatefulSegmentedButton/NxStatefulSegmentedButtonExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ export default function NxStatefulSegmentedButtonPrimaryExample() {

return (
<NxStatefulSegmentedButton variant="primary" onClick={onMainClick} buttonContent="Click Here">
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 1
</button>
<button className="nx-dropdown-button">
<button className="nx-dropdown-button" role="menuitem">
Dropdown item 2
</button>
</NxStatefulSegmentedButton>
Expand Down
3 changes: 3 additions & 0 deletions ...-nx-dropdown-nx-dropdown-links-looks-right-when-focused-via-keyboard-1-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion gallery/visualtests/nxDropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ describe('NxDropdown', function() {
waitAndGetElements,
moveMouseAway,
checkScreenshot,
a11yTest
a11yTest,
getPage
} = setupBrowser('#/pages/Dropdown');

const defaultSelector = '#nx-dropdown-scrolling-example .nx-dropdown',
Expand Down Expand Up @@ -86,6 +87,16 @@ describe('NxDropdown', function() {

await checkScreenshot(targetElement, 251, 218);
});

it('looks right when focused via keyboard', async function() {
const [targetElement] = await waitAndGetElements(selector);
const page = getPage();

await moveMouseAway();
await page.keyboard.press('ArrowLeft');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see any behavior for the Left arrow key defined in the ARIA docs; what's this for?


await checkScreenshot(targetElement, 251, 218);
});
});

describe('NxDropdown with icon', function() {
Expand Down
Loading