Merge pull request desktop#16133 from desktop/Misattributed-Commit-Button-Description

Give Misattributed Warning Avatar button a label

Author: tidy-dev

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

@@ -72,7 +72,11 @@ export class CommitMessageAvatar extends React.Component<
     return (
       <div className="commit-message-avatar-component">
         {this.props.warningBadgeVisible && (
-          <Button className="avatar-button" onClick={this.onAvatarClick}>
+          <Button
+            className="avatar-button"
+            ariaLabel="Commit may be misattributed. View warning."
+            onClick={this.onAvatarClick}
+          >
             {this.renderWarningBadge()}
             <Avatar user={this.props.user} title={this.props.title} />
           </Button>

app/src/ui/lib/button.tsx

@@ -77,6 +77,13 @@ export interface IButtonProps {
   readonly role?: string
   readonly ariaExpanded?: boolean
 
+  /**
+   * Typically the contents of a button serve the purpose of describing the
+   * buttons use. However, ariaLabel can be used if the contents do not suffice.
+   * Such as when a button wraps an image and there is no text.
+   */
+  readonly ariaLabel?: 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.
@@ -134,6 +141,7 @@ export class Button extends React.Component<IButtonProps, {}> {
         role={this.props.role}
         aria-expanded={this.props.ariaExpanded}
         aria-disabled={disabled ? 'true' : undefined}
+        aria-label={this.props.ariaLabel}
       >
         {tooltip && (
           <Tooltip