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 all 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
8 changes: 4 additions & 4 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,12 +18,12 @@ function NxDropdownCloseHandlerExample() {
onToggleCollapse={onToggleCollapse}
onCloseClick={(evt: MouseEvent) => evt.preventDefault()}
onCloseKeyDown={(evt: KeyboardEvent) => evt.preventDefault()}>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
<NxDropdown.LinkButton onClick={onClick} href="#/pages/Dropdown">
Link
</a>
<button onClick={onClick} className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.Button onClick={onClick}>
Button
</button>
</NxDropdown.Button>
</NxDropdown>
);
}
Expand Down
4 changes: 2 additions & 2 deletions gallery/src/components/NxDropdown/NxDropdownCustomLabelExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ function NxDropdownCustomLabelExample() {
className="extra-class"
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<button onClick={onClick} className="nx-dropdown-button">
<NxDropdown.Button onClick={onClick}>
<NxFontAwesomeIcon icon={faFrog}/>
<span>Some Action</span>
</button>
</NxDropdown.Button>
</NxDropdown>
);
}
Expand Down
24 changes: 14 additions & 10 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,24 +17,28 @@ function NxDropdownActionsExample() {
className="extra-class"
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<a href="https://www.google.com/" className="nx-dropdown-link">
<NxDropdown.Link href="https://www.google.com/">
<span>Go somewhere</span>
<NxFontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
<a href="https://www.sonatype.com/" className="nx-dropdown-link">
</NxDropdown.Link>
<NxDropdown.Link href="https://www.sonatype.com/">
<span>Go somewhere else</span>
<NxFontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
<a href="https://www.google.com/" className="nx-dropdown-link disabled" onClick={evt => evt.preventDefault()}>
</NxDropdown.Link>
<NxDropdown.Link href="https://www.google.com/"
className="disabled"
onClick={evt => evt.preventDefault()}>
<span>Can't go here though</span>
<NxFontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
<a href="#/" className="nx-dropdown-link">
</NxDropdown.Link>
<NxDropdown.Link href="#/">
<span>Go to homepage</span>
</a>
<a href="#/" className="nx-dropdown-link disabled" onClick={evt => evt.preventDefault()}>
</NxDropdown.Link>
<NxDropdown.Link href="#/"
className="disabled"
onClick={evt => evt.preventDefault()}>
<span>Can't go here either</span>
</a>
</NxDropdown.Link>
</NxDropdown>
);
}
Expand Down
28 changes: 14 additions & 14 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,28 +14,28 @@ function NxDropdownNavigationExample() {

return (
<NxDropdown label="Navigation" isOpen={isOpen} onToggleCollapse={onToggleCollapse}>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
<NxDropdown.LinkButton onClick={onClick} href="#/pages/Dropdown">
Text link 1
</a>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton onClick={onClick} href="#/pages/Dropdown">
Text link 2
</a>
<a onClick={onClick} href="#/pages/Dropdown" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton onClick={onClick} href="#/pages/Dropdown">
Text link 3 - this link should trigger truncation
</a>
<button onClick={onClick} className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.Button onClick={onClick}>
Button Link 4 - this link should trigger truncation
</button>
<button onClick={onClick} className="nx-dropdown-button">
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
Button Link 5
</button>
</NxDropdown.Button>
<NxDropdown.Divider />
<button onClick={onClick} className="nx-dropdown-button">
<NxDropdown.Button onClick={onClick}>
Button Link 6
</button>
<button className="disabled nx-dropdown-button">
</NxDropdown.Button>
<NxDropdown.Button className="disabled">
Button Link 7 Disabled
</button>
</NxDropdown.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
22 changes: 12 additions & 10 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,32 +14,34 @@ function NxDropdownRightButtonsExample() {

return (
<NxDropdown label="Navigation" isOpen={isOpen} onToggleCollapse={onToggleCollapse}>
<a href="#/" className="nx-dropdown-button">
<NxDropdown.LinkButton href="#/">
<span className="nx-dropdown-button-content">Text Link</span>
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
<span className="nx-dropdown-button-content">
Text Link - this link should trigger truncation
</span>
</a>
</NxDropdown.LinkButton>
<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">
<NxDropdown.LinkButton href="#/">
<span className="nx-dropdown-button-content">Button Link2</span>
</a>
</NxDropdown.LinkButton>
<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">
<NxDropdown.LinkButton href="#/">
<span className="nx-dropdown-button-content">Text Link3 - this link should trigger truncation</span>
</a>
</NxDropdown.LinkButton>
</NxDropdown>
);
}
Expand Down
58 changes: 29 additions & 29 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,48 +15,48 @@ function NxDropdownNavigationExample() {
<NxDropdown label="Scrolling - this label also triggers truncation"
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<a href="#/" className="nx-dropdown-button">
<NxDropdown.LinkButton href="#/">
Text Link 1
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 2
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 3
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 4
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 5
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 6
</a>
<a href="#/"
onClick={evt => { evt.preventDefault(); }}
className="disabled nx-dropdown-button"
aria-disabled="true">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/"
onClick={evt => { evt.preventDefault(); }}
className="disabled"
aria-disabled="true">
Text Link 7 Disabled
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 8
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 9
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 10
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 11
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 12
</a>
<a href="#/" className="nx-dropdown-button">
</NxDropdown.LinkButton>
<NxDropdown.LinkButton href="#/">
Text Link 13
</a>
</NxDropdown.LinkButton>
</NxDropdown>
);
}
Expand Down
16 changes: 8 additions & 8 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,18 +14,18 @@ function NxDropdownNavigationExample() {

return (
<NxDropdown className="nx-dropdown--short" label="Navigation" isOpen={isOpen} onToggleCollapse={onToggleCollapse}>
<button onClick={onClick} className="nx-dropdown-button">
<NxDropdown.Button onClick={onClick}>
Button Link 4 - this link should trigger truncation
</button>
<button onClick={onClick} className="nx-dropdown-button">
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
Button Link 5
</button>
<button onClick={onClick} className="nx-dropdown-button">
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
Button Link 6
</button>
<button className="disabled nx-dropdown-button">
</NxDropdown.Button>
<NxDropdown.Button className="disabled">
Button Link 7 Disabled
</button>
</NxDropdown.Button>
</NxDropdown>
);
}
Expand Down
24 changes: 12 additions & 12 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,30 +22,30 @@ function NxDropdownWithNxThreatIndicatorExample() {
<NxDropdown label={labelElement}
isOpen={isOpen}
onToggleCollapse={onToggleCollapse}>
<button className="nx-dropdown-button" onClick={onClick}>
<NxDropdown.Button onClick={onClick}>
<NxThreatIndicator />
<span>Unspecified</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
<NxThreatIndicator threatLevelCategory="none" />
<span>None</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
<NxThreatIndicator threatLevelCategory="low" />
<span>Low</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
<NxThreatIndicator threatLevelCategory="moderate" />
<span>Moderate</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
<NxThreatIndicator threatLevelCategory="severe" />
<span>Severe</span>
</button>
<button className="nx-dropdown-button" onClick={onClick}>
</NxDropdown.Button>
<NxDropdown.Button onClick={onClick}>
<NxThreatIndicator threatLevelCategory="critical" />
<span>Critical</span>
</button>
</NxDropdown.Button>
</NxDropdown>
);
}
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
Loading