Merge pull request #17204 from desktop/stash-button-description

Add aria described by to stash restore button

app/src/ui/dialog/ok-cancel-button-group.tsx

@@ -21,6 +21,9 @@ interface IOkCancelButtonGroupProps {
   /** An optional title (i.e. tooltip) for the Ok button, defaults to none */
   readonly okButtonTitle?: string
 
+  /** Aria description of the ok button */
+  readonly okButtonAriaDescribedBy?: string
+
   /**
    * An optional event handler for when the Ok button is clicked (either
    * explicitly or as the result of a form keyboard submission). If specified
@@ -145,6 +148,7 @@ export class OkCancelButtonGroup extends React.Component<
         disabled={this.props.okButtonDisabled}
         tooltip={this.props.okButtonTitle}
         type={this.props.destructive === true ? 'button' : 'submit'}
+        ariaDescribedBy={this.props.okButtonAriaDescribedBy}
       >
         {this.props.okButtonText || 'Ok'}
       </Button>

app/src/ui/lib/button.tsx

@@ -117,6 +117,10 @@ export interface IButtonProps {
    */
   readonly ariaLabel?: string
 
+  /** If a button has a sentence type further description than it's label or
+   * contents */
+  readonly ariaDescribedBy?: string
+
   /**
    * Whether to only show the tooltip when the tooltip target overflows its
    * bounds. Typically this is used in conjunction with an ellipsis CSS ruleset.
@@ -187,6 +191,7 @@ export class Button extends React.Component<IButtonProps, {}> {
         aria-expanded={this.props.ariaExpanded}
         aria-disabled={disabled ? 'true' : undefined}
         aria-label={this.props.ariaLabel}
+        aria-describedby={this.props.ariaDescribedBy}
         aria-haspopup={this.props.ariaHaspopup}
         aria-pressed={this.props.ariaPressed}
         autoFocus={this.props.autoFocus}

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

@@ -49,8 +49,9 @@ export class StashDiffHeader extends React.Component<
             cancelButtonText="Discard"
             cancelButtonDisabled={isRestoring || isDiscarding}
             onCancelButtonClick={this.onDiscardClick}
+            okButtonAriaDescribedBy="restore-description"
           />
-          <div className="explanatory-text">
+          <div className="explanatory-text" id="restore-description">
             <span className="text">
               <strong>Restore</strong> will move your stashed files to the
               Changes list.