Merge pull request desktop#19649 from desktop/announce-panel-resize-e…

…vents

Announce panel resize events to screen readers

app/src/ui/history/selected-commits.tsx

@@ -318,6 +318,7 @@ export class SelectedCommits extends React.Component<
             maximumWidth={commitSummaryWidth.max}
             onResize={this.onCommitSummaryResize}
             onReset={this.onCommitSummaryReset}
+            description="Selected commit file list"
           >
             {this.renderFileList()}
           </Resizable>

app/src/ui/open-pull-request/pull-request-files-changed.tsx

@@ -268,6 +268,7 @@ export class PullRequestFilesChanged extends React.Component<
         maximumWidth={fileListWidth.max}
         onResize={this.onFileListResize}
         onReset={this.onFileListSizeReset}
+        description="Pull request file list"
       >
         <FileList
           files={files}

app/src/ui/repository.tsx

@@ -351,6 +351,7 @@ export class RepositoryView extends React.Component<
           minimumWidth={this.props.sidebarWidth.min}
           onReset={this.handleSidebarWidthReset}
           onResize={this.handleSidebarResize}
+          description="Repository sidebar"
         >
           {this.renderTabs()}
           {this.renderSidebarContents()}

app/src/ui/resizable/resizable.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import * as React from 'react'
 import { clamp } from '../../lib/clamp'
+import { AriaLiveContainer } from '../accessibility/aria-live-container'
 
 export const DefaultMaxWidth = 350
 export const DefaultMinWidth = 200
@@ -14,17 +15,31 @@ export enum ResizeDirection {
   Decrease = 'Decrease',
 }
 
+export interface IResizableState {
+  /** The message that is announced to screen reader users to inform them of
+   * resizable panel state */
+  readonly resizeMessage: string
+}
+
 /**
  * Component abstracting a resizable panel.
  *
  * Note: this component is pure, consumers must subscribe to the
  * onResize and onReset event and update the width prop accordingly.
  */
-export class Resizable extends React.Component<IResizableProps> {
+export class Resizable extends React.Component<
+  IResizableProps,
+  IResizableState
+> {
   private resizeContainer: HTMLDivElement | null = null
   private startWidth: number | null = null
   private startX: number | null = null
 
+  public constructor(props: IResizableProps) {
+    super(props)
+    this.state = { resizeMessage: '' }
+  }
+
   /**
    * Returns the current width as determined by props.
    *
@@ -69,6 +84,9 @@ export class Resizable extends React.Component<IResizableProps> {
     const deltaX = e.clientX - this.startX
     const newWidth = this.startWidth + deltaX
 
+    this.updateResizeMessage(
+      deltaX > 0 ? ResizeDirection.Increase : ResizeDirection.Decrease
+    )
     this.props.onResize(this.clampWidth(newWidth))
     e.preventDefault()
   }
@@ -120,6 +138,7 @@ export class Resizable extends React.Component<IResizableProps> {
 
     const newWidth = this.clampWidth(changedWidth)
 
+    this.updateResizeMessage(resizeDirection)
     this.props.onResize(this.clampWidth(newWidth))
   }
 
@@ -150,6 +169,24 @@ export class Resizable extends React.Component<IResizableProps> {
     this.resizeContainer = ref
   }
 
+  private getResizePercentage() {
+    const minWidth = this.props.minimumWidth ?? 0
+    const maxWidth = this.props.maximumWidth ?? DefaultMaxWidth
+    return Math.round(
+      ((this.getCurrentWidth() - minWidth) / (maxWidth - minWidth)) * 100
+    )
+  }
+
+  private updateResizeMessage(direction: ResizeDirection) {
+    const directionMessage =
+      direction === ResizeDirection.Increase ? 'increased' : 'decreased'
+    this.setState({
+      resizeMessage: `${
+        this.props.description
+      } width ${directionMessage}. Set to ${this.getResizePercentage()}%`,
+    })
+  }
+
   public render() {
     const style: React.CSSProperties = {
       width: this.getCurrentWidth(),
@@ -170,6 +207,10 @@ export class Resizable extends React.Component<IResizableProps> {
           onDoubleClick={this.props.onReset}
           className="resize-handle"
         />
+        <AriaLiveContainer
+          message={this.state.resizeMessage}
+          trackedUserInput={this.state.resizeMessage}
+        />
       </div>
     )
   }
@@ -194,6 +235,9 @@ export interface IResizableProps {
   /** The optional ID for the root element. */
   readonly id?: string
 
+  /** Used to describe which resizable was updated to screen reader users */
+  readonly description: string
+
   /**
    * Handler called when the width of the component has changed
    * through an explicit resize event (dragging the handle).

app/src/ui/stashing/stash-diff-viewer.tsx

@@ -142,6 +142,7 @@ export class StashDiffViewer extends React.PureComponent<IStashDiffViewerProps>
             maximumWidth={fileListWidth.max}
             onResize={this.onResize}
             onReset={this.onReset}
+            description="Stash file list"
           >
             <FileList
               files={files}

app/src/ui/toolbar/branch-dropdown.tsx

@@ -242,6 +242,7 @@ export class BranchDropdown extends React.Component<IBranchDropdownProps> {
           onResize={this.onResize}
           maximumWidth={this.props.branchDropdownWidth.max}
           minimumWidth={this.props.branchDropdownWidth.min}
+          description="Current branch dropdown button"
         >
           <ToolbarDropdown
             className="branch-button"

app/src/ui/toolbar/push-pull-button.tsx

@@ -420,6 +420,7 @@ export class PushPullButton extends React.Component<
           onResize={this.onResize}
           maximumWidth={this.props.pushPullButtonWidth.max}
           minimumWidth={this.props.pushPullButtonWidth.min}
+          description="Push pull button"
         >
           {this.renderButton()}
           <span id="push-pull-button-state">

app/src/ui/toolbar/revert-progress.tsx

@@ -66,6 +66,7 @@ export class RevertProgress extends React.Component<IRevertProgressProps, {}> {
         onResize={this.onResize}
         maximumWidth={this.props.width.max}
         minimumWidth={this.props.width.min}
+        description="Revert progress button"
       >
         <ToolbarButton
           title="Reverting…"