Skip to content

fix(Wizard): put focus in drawer when opened in wizard #8540

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

Merged
kmcfaul merged 5 commits into from
Jan 17, 2023
Merged

fix(Wizard): put focus in drawer when opened in wizard #8540

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
93e19ae
chore(Wizard): move focus into the wizard's drawer when expanded
nicolethoen Jan 9, 2023
7916b21
fix(Wizard): put focus in drawer when opened in wizard
nicolethoen Jan 12, 2023
d84e35c
fix linting
nicolethoen Jan 12, 2023
d76e193
fix linting
nicolethoen Jan 12, 2023
ca73bf2
update demo behavior
nicolethoen Jan 13, 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
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Alert/examples/Alert.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -360,4 +360,4 @@ Alerts that are asynchronously appended into dynamic [alert groups](/components/

This example shows how an alert could be triggered by an asynchronous event in the application. Note that you can customize how the alert will be announced to assistive technology. See the [https://www.patternfly.org/v4/components/alert/accessibility](alert accessibility) for more information.
```ts file="AlertAsyncLiveRegion.tsx"
```
```
7 changes: 6 additions & 1 deletion packages/react-core/src/components/Wizard/Wizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
hasDrawer?: boolean;
/** Flag indicating the wizard drawer is expanded */
isDrawerExpanded?: boolean;
/** Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. */
onExpandDrawer?: () => void;
}

interface WizardState {
Expand Down Expand Up @@ -149,7 +151,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
isOpen: undefined,
isNavExpandable: false,
hasDrawer: false,
isDrawerExpanded: false
isDrawerExpanded: false,
onExpandDrawer: () => undefined as any
};
private titleId: string;
private descriptionId: string;
Expand Down Expand Up @@ -408,6 +411,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
onCurrentStepChanged,
hasDrawer,
isDrawerExpanded,
onExpandDrawer,
...rest
/* eslint-enable @typescript-eslint/no-unused-vars */
} = this.props;
Expand Down Expand Up @@ -539,6 +543,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
<WizardToggle
hasDrawer={hasDrawer}
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={onExpandDrawer}
mainAriaLabel={mainAriaLabel}
isInPage={isOpen === undefined}
mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}
Expand Down
4 changes: 3 additions & 1 deletion packages/react-core/src/components/Wizard/WizardBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface WizardBodyProps {
/** Flag indicating the wizard drawer is expanded */
isDrawerExpanded?: boolean;
/** Callback function for when the drawer is toggled */
onExpandDrawer?: () => void;
}

export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
Expand All @@ -32,6 +33,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
mainComponent = 'div',
hasDrawer,
isDrawerExpanded,
onExpandDrawer,
activeStep
}: WizardBodyProps) => {
const MainComponent = mainComponent;
Expand All @@ -40,7 +42,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
<WizardDrawerWrapper
hasDrawer={hasDrawer && activeStep.drawerPanelContent}
wrapper={(children: React.ReactNode) => (
<Drawer isInline isExpanded={isDrawerExpanded}>
<Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpandDrawer}>
<DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
</Drawer>
)}
Expand Down
6 changes: 5 additions & 1 deletion packages/react-core/src/components/Wizard/WizardToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export interface WizardToggleProps {
hasDrawer?: boolean;
/** Flag indicating the wizard drawer is expanded */
isDrawerExpanded?: boolean;
/** Callback function for when the drawer is toggled */
onExpandDrawer?: () => void;
}

export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
Expand All @@ -48,7 +50,8 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
mainAriaLabel = null,
isInPage = true,
hasDrawer,
isDrawerExpanded
isDrawerExpanded,
onExpandDrawer
}: WizardToggleProps) => {
let activeStepIndex;
let activeStepName;
Expand Down Expand Up @@ -99,6 +102,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
hasNoBodyPadding={hasNoBodyPadding}
activeStep={activeStep}
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={onExpandDrawer}
hasDrawer={hasDrawer}
>
{hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}
Expand Down
5 changes: 5 additions & 0 deletions packages/react-core/src/components/Wizard/examples/WizardWithDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => {

const drawerRef = React.useRef<HTMLSpanElement>(null);

const onExpandDrawer = () => {
drawerRef.current && drawerRef.current.focus();
};

const onOpenClick = () => {
setIsDrawerExpanded(true);
};
Expand Down Expand Up @@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
<Wizard
height={400}
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={onExpandDrawer}
hasDrawer
navAriaLabel={`${title} steps`}
steps={steps}
Expand Down
4 changes: 4 additions & 0 deletions packages/react-core/src/demos/Wizard/WizardDemo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,7 @@ class WizardModalWithDrawerDemo extends React.Component {
navAriaLabel={`${title} steps`}
hasDrawer
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={this.onExpand}
mainAriaLabel={`${title} content`}
titleId="wiz-modal-demo-title"
descriptionId="wiz-modal-demo-description"
Expand Down Expand Up @@ -539,6 +540,7 @@ class WizardModalWithDrawerDemo extends React.Component {
navAriaLabel={`${title} steps`}
hasDrawer
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={this.onExpand}
mainAriaLabel={`${title} content`}
titleId="wiz-modal-demo-title"
descriptionId="wiz-modal-demo-description"
Expand Down Expand Up @@ -877,6 +879,7 @@ class FullPageWizard extends React.Component {
<Wizard
hasDrawer
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={this.onExpand}
navAriaLabel={`${title} steps`}
mainAriaLabel={`${title} content`}
steps={steps}
Expand Down Expand Up @@ -1194,6 +1197,7 @@ class FullPageWizard extends React.Component {
<Wizard
hasDrawer
isDrawerExpanded={isDrawerExpanded}
onExpandDrawer={this.onExpand}
navAriaLabel={`${title} steps`}
mainAriaLabel={`${title} content`}
steps={steps}
Expand Down
11 changes: 9 additions & 2 deletions packages/react-core/src/next/components/Wizard/examples/WizardKitchenSink.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,14 +76,21 @@ const CustomWizardFooter = () => {

const StepContentWithDrawer = () => {
const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
const drawerRef = React.useRef<HTMLSpanElement>(null);

const onWizardExpand = () => {
drawerRef.current && drawerRef.current.focus();
};

return (
<Drawer isInline isExpanded={isDrawerExpanded}>
<Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
<DrawerContent
panelContent={
<DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
<DrawerHead>
<span tabIndex={isDrawerExpanded ? 0 : -1}>drawer content</span>
<span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
drawer content
</span>
<DrawerActions>
<DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
</DrawerActions>
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3616,10 +3616,10 @@
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.222.4.tgz#5d988779c50df3dafc989d6e807d16971e34d228"
integrity sha512-+0fk4dzxEbWn+hgaOnR0BjfeUdEeVVrqfH7+GFeFc+RKjEMjIR/BZbWWN8YQDezmDv6A32gHmEKaY3Uwbt06Lw==

"@patternfly/react-catalog-view-extension@^4.93.16":
version "4.95.0"
resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.0.tgz#db18dc22f7f33647adcbab98f5e939279c660dcc"
integrity sha512-G69nisvARMqXj7SPBrRinEhltbggcETodepxVSziJ56DneI88Lp6IdR6YNXh7jJtJ7LyiMyTvZ1N3CO9Y+2EiA==
"@patternfly/react-catalog-view-extension@^4.93.24":
version "4.95.1"
resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.1.tgz#a8ff4b14364a8505ff5156e3be6737032a70e277"
integrity sha512-GqWyih2GHagI+Yt9+VDmGRC8pv/989nExrisDLWbMNYaRKeZXEmr/LaWXTGJzD+fmZFYjc4wqd5tuJ0VkAp/jg==
dependencies:
"@patternfly/patternfly" "4.222.4"
"@patternfly/react-core" "^4.267.6"
Expand Down