diff --git a/app/src/lib/stores/app-store.ts b/app/src/lib/stores/app-store.ts index 00df5c2815..07de48bd05 100644 --- a/app/src/lib/stores/app-store.ts +++ b/app/src/lib/stores/app-store.ts @@ -6312,10 +6312,6 @@ export class AppStore extends TypedBaseStore { const baseURL = `${htmlURL}/pull/new/${compareString}` await this._openInBrowser(baseURL) - - if (this.currentOnboardingTutorialStep === TutorialStep.OpenPullRequest) { - this._markPullRequestTutorialStepAsComplete(repository) - } } public async _updateExistingUpstreamRemote( diff --git a/app/src/lib/stores/helpers/tutorial-assessor.ts b/app/src/lib/stores/helpers/tutorial-assessor.ts index ab52366eb3..56708e4fc8 100644 --- a/app/src/lib/stores/helpers/tutorial-assessor.ts +++ b/app/src/lib/stores/helpers/tutorial-assessor.ts @@ -22,10 +22,8 @@ export class OnboardingTutorialAssessor { false ) /** Has the user opted to skip the create pull request step? */ - private prStepComplete: boolean = getBoolean( - pullRequestStepCompleteKey, - false - ) + private prStepComplete: boolean = + 1 === 1 ? false : getBoolean(pullRequestStepCompleteKey, false) /** Is the tutorial currently paused? */ private tutorialPaused: boolean = getBoolean(tutorialPausedKey, false) diff --git a/app/src/ui/repository.tsx b/app/src/ui/repository.tsx index 56f446ca44..543f438f31 100644 --- a/app/src/ui/repository.tsx +++ b/app/src/ui/repository.tsx @@ -103,6 +103,7 @@ interface IRepositoryViewProps { interface IRepositoryViewState { readonly changesListScrollTop: number readonly compareListScrollTop: number + readonly tutorialCompletionAnnounced: boolean } const enum Tab { @@ -133,6 +134,7 @@ export class RepositoryView extends React.Component< this.state = { changesListScrollTop: 0, compareListScrollTop: 0, + tutorialCompletionAnnounced: false, } } @@ -450,12 +452,18 @@ export class RepositoryView extends React.Component< this.props.dispatcher.incrementMetric('diffOptionsViewedCount') } + private onTutorialCompletionAnnounced = () => { + this.setState({ tutorialCompletionAnnounced: true }) + } + private renderTutorialPane(): JSX.Element { if (this.props.currentTutorialStep === TutorialStep.AllDone) { return ( ) } else { diff --git a/app/src/ui/tutorial/done.tsx b/app/src/ui/tutorial/done.tsx index 808d4f3b86..fa36a50641 100644 --- a/app/src/ui/tutorial/done.tsx +++ b/app/src/ui/tutorial/done.tsx @@ -25,15 +25,47 @@ interface ITutorialDoneProps { * The currently selected repository */ readonly repository: Repository + + /** + * If this has not happened, the tuturial completion header will be focused so + * that it can be read by screen readers + */ + readonly tutorialCompletionAnnounced: boolean + + /** + * Called when the tutorial completion header has been focused and read by + * screen readers + */ + readonly onTutorialCompletionAnnounced: () => void } + export class TutorialDone extends React.Component { + private header = React.createRef() + + public componentDidMount() { + if (this.header.current && !this.props.tutorialCompletionAnnounced) { + // Add the header into the tab order so that it can be focused + this.header.current.tabIndex = 0 + this.header.current?.focus() + this.props.onTutorialCompletionAnnounced() + + // Remove the header from the tab order after a short delay so that it + // doesn't stay in tab order + setTimeout(() => { + if (this.header.current) { + this.header.current.tabIndex = -1 + } + }, 500) + } + } + public render() { return (
-

You're done!

+

You're done!

You’ve learned the basics on how to use GitHub Desktop. Here are some suggestions for what to do next. diff --git a/app/src/ui/tutorial/tutorial-panel.tsx b/app/src/ui/tutorial/tutorial-panel.tsx index 07ce3d8bc1..0ab88b117e 100644 --- a/app/src/ui/tutorial/tutorial-panel.tsx +++ b/app/src/ui/tutorial/tutorial-panel.tsx @@ -64,7 +64,12 @@ export class TutorialPanel extends React.Component< } private openPullRequest = () => { - this.props.dispatcher.createPullRequest(this.props.repository) + this.props.dispatcher.markPullRequestTutorialStepAsComplete( + this.props.repository + ) + setTimeout(() => { + this.props.dispatcher.createPullRequest(this.props.repository) + }, 500) } private skipEditorInstall = () => {