1 files changed, 40 insertions, 36 deletions
diff --git a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
index 6aef56fb33..f3e1eab503 100644
--- a/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
+++ b/browser/components/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
@@ -85,8 +85,9 @@ export const DefaultMeta = ({
   sponsor,
   sponsored_by_override,
   saveToPocketCard,
-  isRecentSave,
   ctaButtonVariant,
+  dispatch,
+  spocMessageVariant,
 }) => (
   <div className="meta">
     <div className="info-wrap">
@@ -100,9 +101,7 @@ export const DefaultMeta = ({
           sponsored_by_override={sponsored_by_override}
         />
       )}
-      <header title={title} className="title clamp">
-        {title}
-      </header>
+      <header className="title clamp">{title}</header>
       {excerpt && <p className="excerpt clamp">{excerpt}</p>}
     </div>
     {!newSponsoredLabel && (
@@ -113,6 +112,8 @@ export const DefaultMeta = ({
         sponsored_by_override={sponsored_by_override}
         cta_button_variant={ctaButtonVariant}
         source={source}
+        dispatch={dispatch}
+        spocMessageVariant={spocMessageVariant}
       />
     )}
     {/* Sponsored label is normally in the way of any message.
@@ -183,7 +184,7 @@ export class _DSCard extends React.PureComponent {
     ];
   }
 
-  onLinkClick(event) {
+  onLinkClick() {
     if (this.props.dispatch) {
       this.props.dispatch(
         ac.DiscoveryStreamUserEvent({
@@ -223,7 +224,7 @@ export class _DSCard extends React.PureComponent {
     }
   }
 
-  onSaveClick(event) {
+  onSaveClick() {
     if (this.props.dispatch) {
       this.props.dispatch(
         ac.AlsoToMain({
@@ -408,43 +409,28 @@ export class _DSCard extends React.PureComponent {
     };
 
     return (
-      <div
+      <article
         className={`ds-card ${compactImagesClassName} ${imageGradientClassName} ${titleLinesName} ${descLinesClassName} ${ctaButtonClassName} ${ctaButtonVariantClassName}`}
         ref={this.setContextMenuButtonHostRef}
       >
+        <div className="img-wrapper">
+          <DSImage
+            extraClassNames="img"
+            source={this.props.image_src}
+            rawSource={this.props.raw_image_src}
+            sizes={this.dsImageSizes}
+            url={this.props.url}
+            title={this.props.title}
+            isRecentSave={isRecentSave}
+          />
+        </div>
         <SafeAnchor
           className="ds-card-link"
           dispatch={this.props.dispatch}
           onLinkClick={!this.props.placeholder ? this.onLinkClick : undefined}
           url={this.props.url}
+          title={this.props.title}
         >
-          <div className="img-wrapper">
-            <DSImage
-              extraClassNames="img"
-              source={this.props.image_src}
-              rawSource={this.props.raw_image_src}
-              sizes={this.dsImageSizes}
-              url={this.props.url}
-              title={this.props.title}
-              isRecentSave={isRecentSave}
-            />
-          </div>
-          {ctaButtonVariant === "variant-b" && (
-            <div className="cta-header">Shop Now</div>
-          )}
-          <DefaultMeta
-            source={source}
-            title={this.props.title}
-            excerpt={excerpt}
-            newSponsoredLabel={newSponsoredLabel}
-            timeToRead={timeToRead}
-            context={this.props.context}
-            context_type={this.props.context_type}
-            sponsor={this.props.sponsor}
-            sponsored_by_override={this.props.sponsored_by_override}
-            saveToPocketCard={saveToPocketCard}
-            ctaButtonVariant={ctaButtonVariant}
-          />
           <ImpressionStats
             flightId={this.props.flightId}
             rows={[
@@ -461,6 +447,24 @@ export class _DSCard extends React.PureComponent {
             source={this.props.type}
           />
         </SafeAnchor>
+        {ctaButtonVariant === "variant-b" && (
+          <div className="cta-header">Shop Now</div>
+        )}
+        <DefaultMeta
+          source={source}
+          title={this.props.title}
+          excerpt={excerpt}
+          newSponsoredLabel={newSponsoredLabel}
+          timeToRead={timeToRead}
+          context={this.props.context}
+          context_type={this.props.context_type}
+          sponsor={this.props.sponsor}
+          sponsored_by_override={this.props.sponsored_by_override}
+          saveToPocketCard={saveToPocketCard}
+          ctaButtonVariant={ctaButtonVariant}
+          dispatch={this.props.dispatch}
+          spocMessageVariant={this.props.spocMessageVariant}
+        />
         {saveToPocketCard && (
           <div className="card-stp-button-hover-background">
             <div className="card-stp-button-position-wrapper">
@@ -512,7 +516,7 @@ export class _DSCard extends React.PureComponent {
             isRecentSave={isRecentSave}
           />
         )}
-      </div>
+      </article>
     );
   }
 }
@@ -526,4 +530,4 @@ export const DSCard = connect(state => ({
   DiscoveryStream: state.DiscoveryStream,
 }))(_DSCard);
 
-export const PlaceholderDSCard = props => <DSCard placeholder={true} />;
+export const PlaceholderDSCard = () => <DSCard placeholder={true} />;