Merge pull request #16274 from desktop/commit-attribution-descriptive…

…-links Commit attribution descriptive links
desktop · Mar 14, 2023 · abb0855 · abb0855 · RamboDonnie · Mar 17, 2023
2 parents 8232bcc + 68f3334
commit abb0855
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 8 deletions.
diff --git a/app/src/ui/changes/commit-message-avatar.tsx b/app/src/ui/changes/commit-message-avatar.tsx
@@ -151,8 +151,11 @@ export class CommitMessageAvatar extends React.Component<
             The email in your global Git config (
             <span className="git-email">{this.props.email}</span>) doesn't match
             your GitHub{accountTypeSuffix} account.{' '}
-            <LinkButton uri="https://docs.github.com/en/github/committing-changes-to-your-project/why-are-my-commits-linked-to-the-wrong-user">
-              Learn more.
+            <LinkButton
+              ariaLabel="Learn more about commit attribution"
+              uri="https://docs.github.com/en/github/committing-changes-to-your-project/why-are-my-commits-linked-to-the-wrong-user"
+            >
+              Learn more
             </LinkButton>
           </div>
         </Row>

diff --git a/app/src/ui/history/unreachable-commits-dialog.tsx b/app/src/ui/history/unreachable-commits-dialog.tsx
@@ -130,7 +130,7 @@ export class UnreachableCommitsDialog extends React.Component<
           : ''}{' '}
         in the ancestry path of the most recent commit in your selection.{' '}
         <LinkButton uri="https://github.com/desktop/desktop/blob/development/docs/learn-more/unreachable-commits.md">
-          Learn more.
+          Learn more about unreachable commits.
         </LinkButton>
       </div>
     )

diff --git a/app/src/ui/lib/git-email-not-found-warning.tsx b/app/src/ui/lib/git-email-not-found-warning.tsx
@@ -74,7 +74,10 @@ export class GitEmailNotFoundWarning extends React.Component<
     const info = !isAttributableEmail ? (
       <>
         Your commits will be wrongly attributed.{' '}
-        <LinkButton uri="https://docs.github.com/en/github/committing-changes-to-your-project/why-are-my-commits-linked-to-the-wrong-user">
+        <LinkButton
+          ariaLabel="Learn more about commit attribution"
+          uri="https://docs.github.com/en/github/committing-changes-to-your-project/why-are-my-commits-linked-to-the-wrong-user"
+        >
           Learn more.
         </LinkButton>
       </>

diff --git a/app/src/ui/lib/link-button.tsx b/app/src/ui/lib/link-button.tsx
@@ -28,6 +28,9 @@ interface ILinkButtonProps {
 
   /** title-text or tooltip for the link */
   readonly title?: string
+
+  /** aria-label for the link */
+  readonly ariaLabel?: string
 }
 
 /**
@@ -53,6 +56,7 @@ export class LinkButton extends React.Component<ILinkButtonProps, {}> {
         onMouseOut={this.props.onMouseOut}
         onClick={this.onClick}
         tabIndex={this.props.tabIndex}
+        aria-label={this.props.ariaLabel}
       >
         {title && <Tooltip target={this.anchorRef}>{title}</Tooltip>}
         {this.props.children}

diff --git a/app/src/ui/repository-settings/git-ignore.tsx b/app/src/ui/repository-settings/git-ignore.tsx
@@ -20,7 +20,7 @@ export class GitIgnore extends React.Component<IGitIgnoreProps, {}> {
           untracked files that Git should ignore. Files already tracked by Git
           are not affected.{' '}
           <LinkButton onClick={this.props.onShowExamples}>
-            Learn more
+            Learn more about gitignore files
           </LinkButton>
         </p>
 

diff --git a/app/src/ui/repository-settings/no-remote.tsx b/app/src/ui/repository-settings/no-remote.tsx
@@ -16,10 +16,11 @@ export class NoRemote extends React.Component<INoRemoteProps, {}> {
     return (
       <DialogContent>
         <CallToAction actionTitle="Publish" onAction={this.props.onPublish}>
-          <div>
+          <div className="no-remote-publish-message">
             Publish your repository to GitHub. Need help?{' '}
-            <LinkButton uri={HelpURL}>Learn more</LinkButton> about remote
-            repositories.
+            <LinkButton uri={HelpURL}>
+              Learn more about remote repositories.
+            </LinkButton>
           </div>
         </CallToAction>
       </DialogContent>

diff --git a/app/styles/ui/_commit-message-avatar.scss b/app/styles/ui/_commit-message-avatar.scss
@@ -89,4 +89,8 @@
 
     width: 300px;
   }
+
+  .link-button-component {
+    display: inline;
+  }
 }
diff --git a/app/styles/ui/_git-email-not-found-warning.scss b/app/styles/ui/_git-email-not-found-warning.scss
@@ -3,6 +3,10 @@
     color: var(--warning-badge-icon-color);
   }
 
+  .link-button-component {
+    display: inline;
+  }
+
   .green-circle {
     background-color: var(--color-new);
     color: var(--background-color);

diff --git a/app/styles/ui/dialogs/_repository-settings.scss b/app/styles/ui/dialogs/_repository-settings.scss
@@ -31,4 +31,10 @@
       margin-bottom: 0;
     }
   }
+
+  .no-remote-publish-message {
+    .link-button-component {
+      display: inline;
+    }
+  }
 }