Merge pull request #213 from Financial-Times/no-tabbing-video-image-l…

…inks Apply no tabbing for video image links. This is part of fixing DAC issues.
Financial-Times · Jun 11, 2019 · dd3ee87 · dd3ee87
2 parents 97e9258 + 37012f2
commit dd3ee87
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 25 deletions.
diff --git a/bower.json b/bower.json
@@ -10,12 +10,9 @@
     "tests"
   ],
   "dependencies": {
-    "n-ui-foundations": "^2.5.0",
+    "n-ui-foundations": "^3.0.0",
     "o-teaser": "^2.0.0",
     "o-labels": "^3.0.0",
     "n-image": "^5.0.0"
-  },
-  "resolutions": {
-    "n-ui-foundations": "^2.5.0"
   }
 }
diff --git a/src/presenters/teaser-presenter.js b/src/presenters/teaser-presenter.js
@@ -87,7 +87,7 @@ class TeaserPresenter {
 		) {
 			return true;
 		}
-			return false;
+		return false;
 	}
 
 	// returns all top level class names appropriate for the teaser
@@ -309,12 +309,10 @@ class TeaserPresenter {
 
 	// returns title either standard or promotional based on flag
 	get displayTitle () {
-		const altTitles = this.data.alternativeTitles;
-
 		if (this.isTeaserTestActive && this.teaserTestVariant === 'variant2') {
 			return this.teaserTestVariantText;
 		}
-		
+
 		if (this.isTeaserPromoActive) {
 			return this.teaserPromoTitleText;
 		}
@@ -332,7 +330,7 @@ class TeaserPresenter {
 		return this.data.promotionalImage || this.data.mainImage;
 	}
 
-	// returns true if there the teaser promo flag is enabled AND teaser promo text has been configured 
+	// returns true if there the teaser promo flag is enabled AND teaser promo text has been configured
 	get isTeaserPromoActive () {
 		return (this.data.flags && this.data.flags.teaserUsePromotionalTitle && this.teaserPromoTitleText) ? true : false;
 	}
@@ -348,16 +346,16 @@ class TeaserPresenter {
 		return null;
 	}
 
-	// returns true if there is a active teaser testing flag created for this story AND a variant headline has been configured 
+	// returns true if there is a active teaser testing flag created for this story AND a variant headline has been configured
 	get isTeaserTestActive () {
 		return (this.teaserTestVariant && this.teaserTestVariantText) ? true : false;
 	}
 
-	// returns the variant name specified by this teaser's flag 
+	// returns the variant name specified by this teaser's flag
 	get teaserTestVariant () {
 		const teaserTestFlagName = 'teaser-test-' + this.data.id;
 		if (this.data.flags && this.data.flags[teaserTestFlagName]) {
-			return this.data.flags[teaserTestFlagName] 
+			return this.data.flags[teaserTestFlagName];
 		}
 		return null;
 	}

diff --git a/templates/partials/main-image.html b/templates/partials/main-image.html
@@ -4,13 +4,9 @@
 			href="{{{relativeUrl}}}{{{referrerTracking}}}"
 			data-trackable="image"
 			{{#if @nTeaserPresenter.headlineTestingVariant}}data-trackable-context-headline-variant="{{{@nTeaserPresenter.headlineTestingVariant}}}"{{/if}}
-			{{#if @nTeaserPresenter.isVideo}}
-			aria-label="Watch video {{@nTeaserPresenter.displayTitle}}"
-			{{else}}
 			aria-hidden="true"
 			tabindex="-1"
 			title="{{@nTeaserPresenter.data.title}}"
-			{{/if}}
 		>
 			{{#ifEquals lazyLoad false}}
 				{{#nImagePresenter srcSet=@nTeaserPresenter.displayImage.url placeholder=@nTeaserPresenter.displayImage.ratio colspan=colspan position=position widths=widths lazyLoad=false wrapperClasses="o-teaser__image-placeholder" classes="o-teaser__image" sourceParam=@nTeaserPresenter.displayImage.sourceParam}}

diff --git a/templates/partials/title.html b/templates/partials/title.html
@@ -5,8 +5,8 @@
 		data-content-id="{{this.id}}"
 		data-trackable="main-link"
 		{{#ifEquals type 'promoted-content'}}target="_blank"{{/ifEquals}}
+		{{#if @nTeaserPresenter.isVideo}}aria-label="Watch video {{@nTeaserPresenter.displayTitle}}"{{/if}}
 		{{#if @nTeaserPresenter.headlineTestingVariant}}data-trackable-context-headline-variant="{{{@nTeaserPresenter.headlineTestingVariant}}}"{{/if}}
-
 		{{#if @nTeaserPresenter.isTeaserTestActive}}
 			data-trackable-context-teaser-variant="{{{@nTeaserPresenter.teaserTestVariant}}}"
 		{{/if}}
@@ -16,4 +16,4 @@
 	{{#if isPremium}}
 		<span class="o-labels o-labels--premium" aria-label="Premium content">Premium</span>
 	{{/if}}
-</div>
+</div>
diff --git a/tests/presenters/teaser-presenter.spec.js b/tests/presenters/teaser-presenter.spec.js
@@ -656,7 +656,7 @@ describe('Teaser Presenter', () => {
 		const promotionalTitle = { promotionalTitle: 'promotional' };
 		const alternativeTitles = { alternativeTitles: { contentPackageTitle: 'contentTitle', promotionalTitleVariant: 'variantHeadline' }};
 		const allTitles = Object.assign({}, title, promotionalTitle, alternativeTitles);
-		
+
 		it('Returns the title if teaserTest inactive and teaserPromo inactive', () => {
 			const content = Object.assign({}, allTitles);
 			subject = new Presenter(content);
@@ -702,7 +702,7 @@ describe('Teaser Presenter', () => {
 	});
 
 	describe('get isTeaserPromoActive', () => {
-		const flagOn =  { teaserUsePromotionalTitle: true };
+		const flagOn = { teaserUsePromotionalTitle: true };
 
 		it('returns true if promo title configured AND flag is on', () => {
 			const flags = Object.assign({}, flagOn);
@@ -731,7 +731,7 @@ describe('Teaser Presenter', () => {
 		const allTitles = Object.assign({}, title, promotionalTitle, alternativeTitles);
 
 		it('uses promotionalTitle if present', () => {
-			const content = Object.assign({},  allTitles );
+			const content = Object.assign({}, allTitles );
 			subject = new Presenter(Object.assign({}, content ));
 			expect(subject.teaserPromoTitleText).to.equal('promotional');
 		});
@@ -743,7 +743,7 @@ describe('Teaser Presenter', () => {
 		});
 
 		it('returns null if neither promoTitle found', () => {
-			const content = Object.assign({}, { title: 'the-title',  alternativeTitles: { promotionalTitleVariant: 'variantHeadline' } } );
+			const content = Object.assign({}, { title: 'the-title', alternativeTitles: { promotionalTitleVariant: 'variantHeadline' } } );
 			subject = new Presenter(Object.assign({}, content ));
 			expect(subject.teaserPromoTitleText).to.equal(null);
 		});
@@ -752,9 +752,9 @@ describe('Teaser Presenter', () => {
 	describe('get teaserTestVariant', () => {
 		it('inspects the right flag to see what variant specified for this particular teaser', () => {
 			const flags = {'teaser-test-content-uuid-1': 'variant1', 'teaser-test-content-uuid-2': 'variant2'};
-			subject1 = new Presenter(Object.assign({}, {id: 'content-uuid-1'}, {flags} ));
-			subject2 = new Presenter(Object.assign({}, {id: 'content-uuid-2'}, {flags} ));
-			subject3 = new Presenter(Object.assign({}, {id: 'content-uuid-3'}, {flags} ));  // no flag at all for this teaser
+			const subject1 = new Presenter(Object.assign({}, {id: 'content-uuid-1'}, {flags} ));
+			const subject2 = new Presenter(Object.assign({}, {id: 'content-uuid-2'}, {flags} ));
+			const subject3 = new Presenter(Object.assign({}, {id: 'content-uuid-3'}, {flags} ));  // no flag at all for this teaser
 			expect(subject1.teaserTestVariant).to.equal('variant1');
 			expect(subject2.teaserTestVariant).to.equal('variant2');
 			expect(subject3.teaserTestVariant).to.equal(null);