-
Notifications
You must be signed in to change notification settings - Fork 164
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: Table grid navigation register context (#1860)
- Loading branch information
Showing
11 changed files
with
303 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
68 changes: 68 additions & 0 deletions
68
src/internal/context/__tests__/single-tab-stop-navigation-context.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import React, { useRef } from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { | ||
| SingleTabStopNavigationContext, | ||
| useSingleTabStopNavigation, | ||
| } from '../../../../lib/components/internal/context/single-tab-stop-navigation-context'; | ||
| import { renderWithSingleTabStopNavigation } from './utils'; | ||
|
|
||
| function Button(props: React.HTMLAttributes<HTMLButtonElement>) { | ||
| const buttonRef = useRef<HTMLButtonElement>(null); | ||
| const { tabIndex } = useSingleTabStopNavigation(buttonRef, { tabIndex: props.tabIndex }); | ||
| return <button {...props} ref={buttonRef} tabIndex={tabIndex} />; | ||
| } | ||
|
|
||
| test('does not override tab index when keyboard navigation is not active', () => { | ||
| renderWithSingleTabStopNavigation(<Button id="button" />); | ||
| expect(document.querySelector('#button')).not.toHaveAttribute('tabIndex'); | ||
| }); | ||
|
|
||
| test('overrides tab index when keyboard navigation is active', () => { | ||
| const { setCurrentTarget } = renderWithSingleTabStopNavigation( | ||
| <div> | ||
| <Button id="button1" /> | ||
| <Button id="button2" /> | ||
| </div> | ||
| ); | ||
| setCurrentTarget(document.querySelector('#button1')); | ||
| expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '0'); | ||
| expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-1'); | ||
| }); | ||
|
|
||
| test('does not override explicit tab index with 0', () => { | ||
| const { setCurrentTarget } = renderWithSingleTabStopNavigation( | ||
| <div> | ||
| <Button id="button1" tabIndex={-2} /> | ||
| <Button id="button2" tabIndex={-2} /> | ||
| </div> | ||
| ); | ||
| setCurrentTarget(document.querySelector('#button1')); | ||
| expect(document.querySelector('#button1')).toHaveAttribute('tabIndex', '-2'); | ||
| expect(document.querySelector('#button2')).toHaveAttribute('tabIndex', '-1'); | ||
| }); | ||
|
|
||
| test('propagates keyboard navigation state', () => { | ||
| function Component() { | ||
| const { navigationActive } = useSingleTabStopNavigation(null); | ||
| return <div>{String(navigationActive)}</div>; | ||
| } | ||
|
|
||
| const { rerender } = render( | ||
| <SingleTabStopNavigationContext.Provider value={{ navigationActive: true, focusTarget: null }}> | ||
| <Component /> | ||
| </SingleTabStopNavigationContext.Provider> | ||
| ); | ||
|
|
||
| expect(document.querySelector('div')).toHaveTextContent('true'); | ||
|
|
||
| rerender( | ||
| <SingleTabStopNavigationContext.Provider value={{ navigationActive: false, focusTarget: null }}> | ||
| <Component /> | ||
| </SingleTabStopNavigationContext.Provider> | ||
| ); | ||
|
|
||
| expect(document.querySelector('div')).toHaveTextContent('false'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import React, { createRef, forwardRef, useImperativeHandle, useState } from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { SingleTabStopNavigationContext } from '../../../../lib/components/internal/context/single-tab-stop-navigation-context'; | ||
|
|
||
| interface ProviderRef { | ||
| setCurrentTarget(element: null | Element): void; | ||
| } | ||
|
|
||
| const FakeSingleTabStopNavigationProvider = forwardRef( | ||
| ({ children }: { children: React.ReactNode }, ref: React.Ref<ProviderRef>) => { | ||
| const [focusTarget, setFocusTarget] = useState<null | Element>(null); | ||
|
|
||
| useImperativeHandle(ref, () => ({ setCurrentTarget: setFocusTarget })); | ||
|
|
||
| return ( | ||
| <SingleTabStopNavigationContext.Provider value={{ focusTarget, navigationActive: !!focusTarget }}> | ||
| {children} | ||
| </SingleTabStopNavigationContext.Provider> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export function renderWithSingleTabStopNavigation(ui: React.ReactNode) { | ||
| const providerRef = createRef<ProviderRef>(); | ||
| const { container, rerender } = render( | ||
| <FakeSingleTabStopNavigationProvider ref={providerRef}>{ui}</FakeSingleTabStopNavigationProvider> | ||
| ); | ||
| return { | ||
| container, | ||
| rerender, | ||
| setCurrentTarget: (element: null | Element) => { | ||
| if (!providerRef.current) { | ||
| throw new Error('Provider is not ready'); | ||
| } | ||
| providerRef.current.setCurrentTarget(element); | ||
| }, | ||
| }; | ||
| } |
32 changes: 32 additions & 0 deletions
32
src/internal/context/single-tab-stop-navigation-context.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. | ||
| // SPDX-License-Identifier: Apache-2.0 | ||
|
|
||
| import { createContext, useContext } from 'react'; | ||
|
|
||
| /** | ||
| * Single tab stop navigation context is used together with keyboard navigation that requires a single tab stop. | ||
| * It instructs interactive elements to override tab indices for just a single one to remain user-focusable. | ||
| */ | ||
| export const SingleTabStopNavigationContext = createContext<{ | ||
| focusTarget: null | Element; | ||
| navigationActive: boolean; | ||
| }>({ | ||
| focusTarget: null, | ||
| navigationActive: false, | ||
| }); | ||
|
|
||
| export function useSingleTabStopNavigation( | ||
| focusable: null | React.RefObject<HTMLElement>, | ||
| options?: { tabIndex?: number } | ||
| ) { | ||
| const { focusTarget, navigationActive } = useContext(SingleTabStopNavigationContext); | ||
|
|
||
| const focusTargetActive = Boolean(focusable && focusable.current === focusTarget); | ||
|
|
||
| let tabIndex: undefined | number = options?.tabIndex; | ||
| if (navigationActive) { | ||
| tabIndex = !focusTargetActive ? -1 : tabIndex ?? 0; | ||
| } | ||
|
|
||
| return { navigationActive, tabIndex }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.