Add accessibility text

Zarad1993 · Mar 31, 2019 · 8a4b830 · 8a4b830
1 parent 876c7eb
commit 8a4b830
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/frontend/src/AppContainer.js b/frontend/src/AppContainer.js
@@ -36,6 +36,7 @@ class Navigation extends Component {
 
 class SocialButton extends Component {
   render() {
+    const linkName = this.props.displayName + " on " + this.props.name;
     return (
       <Popup
         on="hover"
@@ -47,6 +48,7 @@ class SocialButton extends Component {
             target="_blank"
             rel="noopener noreferrer"
             href={this.props.url}
+            aria-label={linkName}
           >
             <Button.Content visible>
               <Icon name={this.props.icon} />
@@ -58,7 +60,7 @@ class SocialButton extends Component {
         }
       >
         <Popup.Content>
-          {this.props.displayName + " on " + this.props.name}
+          {linkName}
         </Popup.Content>
       </Popup>
     );
@@ -89,6 +91,7 @@ class LanguageDescription extends Component {
         <Image
           className="LanguageDescription-image"
           src={this.props.image_url}
+          alt={"logo of the " + this.props.displayName + " programming language"}
         />
         <div
           className="LanguageDescription-text"

diff --git a/frontend/src/Repository.js b/frontend/src/Repository.js
@@ -146,7 +146,11 @@ class Repository extends Component {
       <Segment>
         <Responsive minWidth={1000}>
           <div className="Repository-container">
-            <Image src={this.props.avatar_url} size="tiny" />
+            <Image
+              src={this.props.avatar_url}
+              size="tiny"
+              alt={"github avatar of " + this.props.name_with_owner}
+            />
             <Stats
               num_stars={this.props.num_stars}
               num_forks={this.props.num_forks}
@@ -165,7 +169,11 @@ class Repository extends Component {
         <Responsive maxWidth={999}>
           <div className="Repository-container">
             <div className="Repository-header">
-              <Image src={this.props.avatar_url} size="tiny" />
+              <Image
+                src={this.props.avatar_url}
+                size="tiny"
+                alt={"github avatar of " + this.props.name_with_owner}
+              />
               <Stats
                 num_stars={this.props.num_stars}
                 num_forks={this.props.num_forks}