Merge pull request desktop#16340 from desktop/annouce-commit-button-status

Announce Committing Status

Author: tidy-dev

app/src/ui/changes/commit-message.tsx

@@ -36,6 +36,7 @@ import { isEmptyOrWhitespace } from '../../lib/is-empty-or-whitespace'
 import { TooltippedContent } from '../lib/tooltipped-content'
 import { TooltipDirection } from '../lib/tooltip'
 import { pick } from '../../lib/pick'
+import { delay } from 'lodash'
 
 const addAuthorIcon = {
   w: 18,
@@ -140,6 +141,10 @@ interface ICommitMessageState {
    * false when there's no action bar.
    */
   readonly descriptionObscured: boolean
+
+  readonly isCommittingStatusMessage: string
+
+  readonly startedCommitting: number | null
 }
 
 function findUserAutoCompleteProvider(
@@ -178,6 +183,8 @@ export class CommitMessage extends React.Component<
         props.autocompletionProviders
       ),
       descriptionObscured: false,
+      isCommittingStatusMessage: '',
+      startedCommitting: null,
     }
   }
 
@@ -260,6 +267,14 @@ export class CommitMessage extends React.Component<
     ) {
       this.coAuthorInputRef.current?.focus()
     }
+
+    if (
+      prevProps.isCommitting !== this.props.isCommitting &&
+      this.props.isCommitting &&
+      this.state.isCommittingStatusMessage === ''
+    ) {
+      this.setState({ isCommittingStatusMessage: this.getButtonTitle() })
+    }
   }
 
   private clearCommitMessage() {
@@ -316,14 +331,34 @@ export class CommitMessage extends React.Component<
     }
 
     const timer = startTimer('create commit', this.props.repository)
+    this.setState({ startedCommitting: new Date().getTime() })
     const commitCreated = await this.props.onCreateCommit(commitContext)
     timer.done()
 
     if (commitCreated) {
       this.clearCommitMessage()
+      this.updateCommitStatusMessage()
     }
   }
 
+  /** We want to give a couple seconds for voice reader to be able to read the
+   * in progress message when commit is fast. */
+  private updateCommitStatusMessage() {
+    const timeSinceStartedCommitting = Math.abs(
+      (this.state.startedCommitting ?? new Date().getTime()) -
+        new Date().getTime()
+    )
+    const delayed = 2000 - timeSinceStartedCommitting
+    delay(
+      () =>
+        this.setState({
+          isCommittingStatusMessage: 'Committed Just Now',
+          startedCommitting: null,
+        }),
+      delayed > 0 ? delayed : 0
+    )
+  }
+
   private canCommit(): boolean {
     return (
       (this.props.anyFilesSelected === true && this.state.summary.length > 0) ||
@@ -658,53 +693,91 @@ export class CommitMessage extends React.Component<
     this.props.onShowFoldout({ type: FoldoutType.Branch })
   }
 
-  private renderSubmitButton() {
-    const { isCommitting, branch, commitButtonText } = this.props
-    const isSummaryBlank = isEmptyOrWhitespace(this.summaryOrPlaceholder)
-    const buttonEnabled =
-      (this.canCommit() || this.canAmend()) && !isCommitting && !isSummaryBlank
-
-    const loading = isCommitting ? <Loading /> : undefined
-
-    const isAmending = this.props.commitToAmend !== null
+  private getButtonVerb() {
+    const { isCommitting, commitToAmend } = this.props
 
     const amendVerb = isCommitting ? 'Amending' : 'Amend'
     const commitVerb = isCommitting ? 'Committing' : 'Commit'
+    const isAmending = commitToAmend !== null
 
-    const amendTitle = `${amendVerb} last commit`
-    const commitTitle =
-      branch !== null ? `${commitVerb} to ${branch}` : commitVerb
+    return isAmending ? amendVerb : commitVerb
+  }
 
-    let tooltip: string | undefined = undefined
+  private getCommittingButtonText() {
+    const { branch } = this.props
+    const verb = this.getButtonVerb()
 
-    if (buttonEnabled) {
-      tooltip = isAmending ? amendTitle : commitTitle
-    } else {
-      if (isSummaryBlank) {
-        tooltip = `A commit summary is required to commit`
-      } else if (!this.props.anyFilesSelected && this.props.anyFilesAvailable) {
-        tooltip = `Select one or more files to commit`
-      } else if (isCommitting) {
-        tooltip = `Committing changes…`
-      }
+    if (branch === null) {
+      return verb
     }
 
-    const defaultCommitContents =
-      branch !== null ? (
-        <>
-          {commitVerb} to <strong>{branch}</strong>
-        </>
-      ) : (
-        commitVerb
-      )
+    return (
+      <>
+        {verb} to <strong>{branch}</strong>
+      </>
+    )
+  }
+
+  private getCommittingButtonTitle() {
+    const { branch } = this.props
+    const verb = this.getButtonVerb()
+
+    if (branch === null) {
+      return verb
+    }
+
+    return `${verb} to ${branch}`
+  }
+
+  private getButtonText() {
+    const { commitToAmend, commitButtonText } = this.props
 
-    const defaultAmendContents = <>{amendVerb} last commit</>
+    if (commitButtonText) {
+      return commitButtonText
+    }
+
+    const isAmending = commitToAmend !== null
+    return isAmending ? this.getButtonTitle() : this.getCommittingButtonText()
+  }
+
+  private getButtonTitle(): string {
+    const { commitToAmend, commitButtonText } = this.props
 
-    const defaultContents = isAmending
-      ? defaultAmendContents
-      : defaultCommitContents
+    if (commitButtonText) {
+      return commitButtonText
+    }
+
+    const isAmending = commitToAmend !== null
+    return isAmending
+      ? `${this.getButtonVerb()} last commit`
+      : this.getCommittingButtonTitle()
+  }
 
-    const commitButton = commitButtonText ? commitButtonText : defaultContents
+  private getButtonTooltip(buttonEnabled: boolean) {
+    if (buttonEnabled) {
+      return this.getButtonTitle()
+    }
+
+    const isSummaryBlank = isEmptyOrWhitespace(this.summaryOrPlaceholder)
+    if (isSummaryBlank) {
+      return `A commit summary is required to commit`
+    } else if (!this.props.anyFilesSelected && this.props.anyFilesAvailable) {
+      return `Select one or more files to commit`
+    } else if (this.props.isCommitting) {
+      return `Committing changes…`
+    }
+
+    return undefined
+  }
+
+  private renderSubmitButton() {
+    const { isCommitting } = this.props
+    const isSummaryBlank = isEmptyOrWhitespace(this.summaryOrPlaceholder)
+    const buttonEnabled =
+      (this.canCommit() || this.canAmend()) && !isCommitting && !isSummaryBlank
+    const loading = isCommitting ? <Loading /> : undefined
+    const tooltip = this.getButtonTooltip(buttonEnabled)
+    const commitButton = this.getButtonText()
 
     return (
       <Button
@@ -815,6 +888,9 @@ export class CommitMessage extends React.Component<
         {this.renderPermissionsCommitWarning()}
 
         {this.renderSubmitButton()}
+        <span className="sr-only" aria-live="polite">
+          {this.state.isCommittingStatusMessage}
+        </span>
       </div>
     )
   }