Merge pull request #8 from edx/abutterworth/unique-ids

fix: add unique ids to Icon components
openedx · Mar 8, 2019 · 349a458 · 349a458
2 parents 7f2c5b3 + abe3d03
commit 349a458
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap b/src/lib/components/SiteFooter/__snapshots__/SiteFooter.test.jsx.snap
@@ -188,7 +188,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             <span
               aria-hidden={true}
               className="fa fa-facebook-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-facebook"
             />
             <span
               className="sr-only"
@@ -208,7 +208,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             <span
               aria-hidden={true}
               className="fa fa-twitter-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-twitter"
             />
             <span
               className="sr-only"
@@ -228,7 +228,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             <span
               aria-hidden={true}
               className="fa fa-youtube-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-youtube"
             />
             <span
               className="sr-only"
@@ -248,7 +248,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             <span
               aria-hidden={true}
               className="fa fa-linkedin-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-linkedin"
             />
             <span
               className="sr-only"
@@ -268,7 +268,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             <span
               aria-hidden={true}
               className="fa fa-google-plus-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-google"
             />
             <span
               className="sr-only"
@@ -720,7 +720,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             <span
               aria-hidden={true}
               className="fa fa-facebook-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-facebook"
             />
             <span
               className="sr-only"
@@ -740,7 +740,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             <span
               aria-hidden={true}
               className="fa fa-twitter-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-twitter"
             />
             <span
               className="sr-only"
@@ -760,7 +760,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             <span
               aria-hidden={true}
               className="fa fa-youtube-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-youtube"
             />
             <span
               className="sr-only"
@@ -780,7 +780,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             <span
               aria-hidden={true}
               className="fa fa-linkedin-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-linkedin"
             />
             <span
               className="sr-only"
@@ -800,7 +800,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             <span
               aria-hidden={true}
               className="fa fa-google-plus-square fa-2x"
-              id="Icon1"
+              id="edx-footer-icon-google"
             />
             <span
               className="sr-only"

diff --git a/src/lib/components/SiteFooter/index.jsx b/src/lib/components/SiteFooter/index.jsx
@@ -59,7 +59,7 @@ class SiteFooter extends React.Component {
               target="_blank"
               onClick={this.externalLinkClickHandler}
             >
-              <Icon className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText={`Like ${siteName} on Facebook`} />
+              <Icon id="edx-footer-icon-facebook" className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText={`Like ${siteName} on Facebook`} />
             </a>
           </li>
 
@@ -72,7 +72,7 @@ class SiteFooter extends React.Component {
               target="_blank"
               onClick={this.externalLinkClickHandler}
             >
-              <Icon className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Twitter`} />
+              <Icon id="edx-footer-icon-twitter" className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Twitter`} />
             </a>
           </li>
           <li>
@@ -83,7 +83,7 @@ class SiteFooter extends React.Component {
               target="_blank"
               onClick={this.externalLinkClickHandler}
             >
-              <Icon className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} YouTube channel`} />
+              <Icon id="edx-footer-icon-youtube" className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} YouTube channel`} />
             </a>
           </li>
           <li>
@@ -94,7 +94,7 @@ class SiteFooter extends React.Component {
               target="_blank"
               onClick={this.externalLinkClickHandler}
             >
-              <Icon className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on LinkedIn`} />
+              <Icon id="edx-footer-icon-linkedin" className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on LinkedIn`} />
             </a>
           </li>
           <li>
@@ -105,7 +105,7 @@ class SiteFooter extends React.Component {
               target="_blank"
               onClick={this.externalLinkClickHandler}
             >
-              <Icon className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Google+`} />
+              <Icon id="edx-footer-icon-google" className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Google+`} />
             </a>
           </li>
           <li>