turn all href='#' anchors into <button> & fix bad React attribute (#4367

)
MozillaFoundation · Mar 19, 2020 · 42f8d36 · 42f8d36
1 parent 6c0aa54
commit 42f8d36
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/network-api/networkapi/buyersguide/templates/product_page.html b/network-api/networkapi/buyersguide/templates/product_page.html
@@ -38,7 +38,7 @@
       <div class="row intro d-flex justify-content-between align-items-center">
         <a id="product-company-url" class="product-price small-link col-md-8 mb-3" href="{{product.url}}" target="_blank">{{product.company}} ${{product.price}}</a>
         <div class="copy-link-wrapper col-md-4 mb-3 text-md-right">
-          <a id="product-copy-link-button" class="copy-link small-link" href="#" data-url="{{product.url}}" data-success-text="{% trans "link copied!" %}">{% trans "copy & share link" %}</a>
+          <button id="product-copy-link-button" class="copy-link small-link" data-url="{{product.url}}" data-success-text='{% trans "link copied!" %}'>{% trans "copy & share link" %}</button>
         </div>
         <h2 class="h1-heading col-md-10">{{product.name}}</h2>
         <div class="col-12">

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/static/styleguide.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/static/styleguide.html
@@ -150,7 +150,7 @@ <h3 class="h2-heading mt-5">Paragraphs with links</h3>
 
       <h3 class="h2-heading mt-5">Anchors</h3>
       <hr />
-      <div class="py-2"><a class="cta-link" href="#">.cta-link</a></div>
+      <div class="py-2"><a class="cta-link" href="https://example.com">.cta-link</a></div>
 
       <h3 class="h2-heading mt-5">Dark Theme Headers</h3>
       <hr />

diff --git a/source/js/components/share-button-group/share-button-group.jsx b/source/js/components/share-button-group/share-button-group.jsx
@@ -20,7 +20,7 @@ export default class ShareButtonGroup extends React.Component {
   renderFacebookButton() {
     let label =
       this.props.version === `mini` ? (
-        <span class="sr-only">Share on Facebook</span>
+        <span className="sr-only">Share on Facebook</span>
       ) : (
         `Facebook`
       );
@@ -29,7 +29,7 @@ export default class ShareButtonGroup extends React.Component {
 
     return (
       <a
-        class="btn btn-secondary btn-share facebook-share"
+        className="btn btn-secondary btn-share facebook-share"
         href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
           link
         )}`}
@@ -46,14 +46,14 @@ export default class ShareButtonGroup extends React.Component {
     let link = this.props.link ? ` ${encodeURIComponent(this.props.link)}` : ``;
     let label =
       this.props.version === `mini` ? (
-        <span class="sr-only">Share on Twitter</span>
+        <span className="sr-only">Share on Twitter</span>
       ) : (
         `Twitter`
       );
 
     return (
       <a
-        class="btn btn-secondary btn-share twitter-share"
+        className="btn btn-secondary btn-share twitter-share"
         href={`https://twitter.com/intent/tweet?text=${shareText}${link}`}
       >
         {label}
@@ -68,14 +68,14 @@ export default class ShareButtonGroup extends React.Component {
     let link = this.props.link ? ` ${encodeURIComponent(this.props.link)}` : ``;
     let label =
       this.props.version === `mini` ? (
-        <span class="sr-only">Share by email</span>
+        <span className="sr-only">Share by email</span>
       ) : (
         `Email`
       );
 
     return (
       <a
-        class="btn btn-secondary btn-share email-share"
+        className="btn btn-secondary btn-share email-share"
         href={`mailto:?&body=${shareText}${link}`}
       >
         {label}
@@ -99,7 +99,7 @@ export default class ShareButtonGroup extends React.Component {
     let label = this.state.linkCopied ? `Copied` : `Copy`;
     label =
       this.props.version === `mini` ? (
-        <span class="sr-only">{label} page link</span>
+        <span className="sr-only">{label} page link</span>
       ) : (
         label
       );
@@ -109,14 +109,13 @@ export default class ShareButtonGroup extends React.Component {
     });
 
     return (
-      <a
-        class={classes}
-        href="#"
+      <button
+        className={classes}
         onClick={event => this.handleLinkButtonClick(event)}
         title={tooltip}
       >
         {label}
-      </a>
+      </button>
     );
   }
 

diff --git a/source/js/components/share-button-group/share-button-group.scss b/source/js/components/share-button-group/share-button-group.scss
@@ -74,6 +74,10 @@
         transform: translate(50%, 50%);
       }
     }
+
+    button.btn {
+      display: inline-flex;
+    }
   }
 
   .btn {

diff --git a/source/sass/buyers-guide/views/product.scss b/source/sass/buyers-guide/views/product.scss
@@ -44,7 +44,8 @@ $product-detail-padding-x: (
 .product-detail {
   margin-top: -88px;
 
-  a:not(.btn) {
+  a:not(.btn),
+  button:not(.btn) {
     text-decoration: underline;
 
     @include hover-focus-active {
@@ -59,6 +60,11 @@ $product-detail-padding-x: (
     color: $gray-40;
   }
 
+  button.small-link {
+    border: none;
+    background: none;
+  }
+
   .copy-link-wrapper {
     order: 4;
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,6 +74,10 @@ @@
             transform: translate(50%, 50%);
           }
         }
+        button.btn {
+          display: inline-flex;
+        }
       }
       .btn {
@@ Expand Down @@