From f7cc60e84f32027b39da971b50cbff5dbba2caa4 Mon Sep 17 00:00:00 2001
From: Julien Maury <6878027+jmau111@users.noreply.github.com>
Date: Tue, 15 Jun 2021 13:06:17 +0200
Subject: [PATCH] fix usage of aria current - html error (#13963)

* fix usage of aria current - html error

* delete tests for aria current empty value

* delete tests for aria current empty value - tag nav

* missing occurrences should have attr aria current

* e2e tests: make sure other nagivation items do not have attr aria-curent

* e2e tests (tagged nav): make sure other nagivation items do not have attr aria-curent

* missing case @latest

* @latest is only for tagged nav

* every single nav item needs the test for aria-current
---
 app/views/articles/index.html.erb             | 13 ++++++------
 .../stories/tagged_articles/index.html.erb    | 13 ++++++------
 .../homeFeedFlows/feedNavigation.spec.js      | 16 +++++++--------
 .../tagsFlows/tagIndexNavigation.spec.js      | 20 +++++++++----------
 4 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index 800a7d99a..7ca95e4d8 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -44,22 +44,23 @@
         <nav class="crayons-tabs hidden s:flex" aria-label="View posts by">
           <ul class="crayons-tabs__list">
             <li>
-              <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>" aria-current="<%= "page" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>
+              <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"<%= %w[week month year infinity
+                                                                                                                                                                                                     latest].exclude?(params[:timeframe]) ? 'aria-current="page"'.html_safe : "" %>>Feed</a>
             </li>
             <li>
-              <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>" aria-current="<%= "page" if timeframe_check("week") %>">Week</a>
+              <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? 'aria-current="page"'.html_safe : "" %>>Week</a>
             </li>
             <li>
-              <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>" aria-current="<%= "page" if timeframe_check("month") %>">Month</a>
+              <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? 'aria-current="page"'.html_safe : "" %>>Month</a>
             </li>
             <li>
-              <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>" aria-current="<%= "page" if timeframe_check("year") %>">Year</a>
+              <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? 'aria-current="page"'.html_safe : "" %>>Year</a>
             </li>
             <li>
-              <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>" aria-current="<%= "page" if timeframe_check("infinity") %>">Infinity</a>
+              <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? 'aria-current="page"'.html_safe : "" %>>Infinity</a>
             </li>
             <li>
-              <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>" aria-current="<%= "page" if timeframe_check("latest") %>">Latest</a>
+              <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? 'aria-current="page"'.html_safe : "" %>>Latest</a>
             </li>
           </ul>
         </nav>
diff --git a/app/views/stories/tagged_articles/index.html.erb b/app/views/stories/tagged_articles/index.html.erb
index 2899c49f8..e693c48da 100644
--- a/app/views/stories/tagged_articles/index.html.erb
+++ b/app/views/stories/tagged_articles/index.html.erb
@@ -56,22 +56,23 @@
             <nav class="crayons-tabs hidden s:flex" aria-label="View tagged posts by">
               <ul class="crayons-tabs__list">
                 <li>
-                  <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>" aria-current="<%= "page" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>">Feed</a>
+                  <a data-text="Feed" href="<%= list_path %>/" class="crayons-tabs__item <%= "crayons-tabs__item--current" if %w[week month year infinity latest].exclude?(params[:timeframe]) %>"<%= %w[week month year infinity
+                                                                                                                                                                                                         latest].exclude?(params[:timeframe]) ? 'aria-current="page"'.html_safe : "" %>>Feed</a>
                 </li>
                 <li>
-                  <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>" aria-current="<%= "page" if timeframe_check("week") %>">Week</a>
+                  <a data-text="Week" href="<%= list_path %>/top/week" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("week") %>"<%= timeframe_check("week") ? 'aria-current="page"'.html_safe : "" %>>Week</a>
                 </li>
                 <li>
-                  <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>" aria-current="<%= "page" if timeframe_check("month") %>">Month</a>
+                  <a data-text="Month" href="<%= list_path %>/top/month" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("month") %>"<%= timeframe_check("month") ? 'aria-current="page"'.html_safe : "" %>>Month</a>
                 </li>
                 <li>
-                  <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>" aria-current="<%= "page" if timeframe_check("year") %>">Year</a>
+                  <a data-text="Year" href="<%= list_path %>/top/year" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("year") %>"<%= timeframe_check("year") ? 'aria-current="page"'.html_safe : "" %>>Year</a>
                 </li>
                 <li>
-                  <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>" aria-current="<%= "page" if timeframe_check("infinity") %>">Infinity</a>
+                  <a data-text="Infinity" href="<%= list_path %>/top/infinity" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("infinity") %>"<%= timeframe_check("infinity") ? 'aria-current="page"'.html_safe : "" %>>Infinity</a>
                 </li>
                 <li>
-                  <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>" aria-current="<%= "page" if timeframe_check("latest") %>">Latest</a>
+                  <a data-text="Latest" href="<%= list_path %>/latest" class="crayons-tabs__item <%= "crayons-tabs__item--current" if timeframe_check("latest") %>"<%= timeframe_check("latest") ? 'aria-current="page"'.html_safe : "" %>>Latest</a>
                 </li>
               </ul>
             </nav>
diff --git a/cypress/integration/homeFeedFlows/feedNavigation.spec.js b/cypress/integration/homeFeedFlows/feedNavigation.spec.js
index f3c6d833d..19520832e 100644
--- a/cypress/integration/homeFeedFlows/feedNavigation.spec.js
+++ b/cypress/integration/homeFeedFlows/feedNavigation.spec.js
@@ -26,17 +26,17 @@ describe('Home Feed Navigation', () => {
         'page',
       );
 
-      cy.get('@week').should('have.attr', 'aria-current', '');
-      cy.get('@month').should('have.attr', 'aria-current', '');
-      cy.get('@year').should('have.attr', 'aria-current', '');
-      cy.get('@infinity').should('have.attr', 'aria-current', '');
+      cy.get('@week').should('not.have.attr', 'aria-current');
+      cy.get('@month').should('not.have.attr', 'aria-current');
+      cy.get('@year').should('not.have.attr', 'aria-current');
+      cy.get('@infinity').should('not.have.attr', 'aria-current');
     });
   });
 
   it('should navigate to Week view', () => {
     cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
       cy.findByRole('link', { name: 'Week' }).as('week');
-      cy.get('@week').should('have.attr', 'aria-current', '');
+      cy.get('@week').should('not.have.attr', 'aria-current');
       cy.get('@week').click();
     });
 
@@ -54,7 +54,7 @@ describe('Home Feed Navigation', () => {
   it('should navigate to Month view', () => {
     cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
       cy.findByRole('link', { name: 'Month' }).as('month');
-      cy.get('@month').should('have.attr', 'aria-current', '');
+      cy.get('@month').should('not.have.attr', 'aria-current');
       cy.get('@month').click();
     });
 
@@ -72,7 +72,7 @@ describe('Home Feed Navigation', () => {
   it('should navigate to Year view', () => {
     cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
       cy.findByRole('link', { name: 'Year' }).as('year');
-      cy.get('@year').should('have.attr', 'aria-current', '');
+      cy.get('@year').should('not.have.attr', 'aria-current');
       cy.get('@year').click();
     });
 
@@ -90,7 +90,7 @@ describe('Home Feed Navigation', () => {
   it('should navigate to Infinity view', () => {
     cy.findByRole('navigation', { name: 'View posts by' }).within(() => {
       cy.findByRole('link', { name: 'Infinity' }).as('infinity');
-      cy.get('@infinity').should('have.attr', 'aria-current', '');
+      cy.get('@infinity').should('not.have.attr', 'aria-current');
       cy.get('@infinity').click();
     });
 
diff --git a/cypress/integration/tagsFlows/tagIndexNavigation.spec.js b/cypress/integration/tagsFlows/tagIndexNavigation.spec.js
index 329ad8120..51719b8be 100644
--- a/cypress/integration/tagsFlows/tagIndexNavigation.spec.js
+++ b/cypress/integration/tagsFlows/tagIndexNavigation.spec.js
@@ -25,18 +25,18 @@ describe('Tag index page navigation', () => {
         'page',
       );
 
-      cy.get('@week').should('have.attr', 'aria-current', '');
-      cy.get('@month').should('have.attr', 'aria-current', '');
-      cy.get('@year').should('have.attr', 'aria-current', '');
-      cy.get('@infinity').should('have.attr', 'aria-current', '');
-      cy.get('@latest').should('have.attr', 'aria-current', '');
+      cy.get('@week').should('not.have.attr', 'aria-current');
+      cy.get('@month').should('not.have.attr', 'aria-current');
+      cy.get('@year').should('not.have.attr', 'aria-current');
+      cy.get('@infinity').should('not.have.attr', 'aria-current');
+      cy.get('@latest').should('not.have.attr', 'aria-current');
     });
   });
 
   it('should navigate to Week view', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Week' }).as('week');
-      cy.get('@week').should('have.attr', 'aria-current', '');
+      cy.get('@week').should('not.have.attr', 'aria-current');
       cy.get('@week').click();
     });
 
@@ -54,7 +54,7 @@ describe('Tag index page navigation', () => {
   it('should navigate to Month view', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Month' }).as('month');
-      cy.get('@month').should('have.attr', 'aria-current', '');
+      cy.get('@month').should('not.have.attr', 'aria-current');
       cy.get('@month').click();
     });
 
@@ -72,7 +72,7 @@ describe('Tag index page navigation', () => {
   it('should navigate to Year view', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Year' }).as('year');
-      cy.get('@year').should('have.attr', 'aria-current', '');
+      cy.get('@year').should('not.have.attr', 'aria-current');
       cy.get('@year').click();
     });
 
@@ -90,7 +90,7 @@ describe('Tag index page navigation', () => {
   it('should navigate to Infinity view', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Infinity' }).as('infinity');
-      cy.get('@infinity').should('have.attr', 'aria-current', '');
+      cy.get('@infinity').should('not.have.attr', 'aria-current');
       cy.get('@infinity').click();
     });
 
@@ -108,7 +108,7 @@ describe('Tag index page navigation', () => {
   it('should navigate to Latest view', () => {
     cy.findByRole('navigation', { name: 'View tagged posts by' }).within(() => {
       cy.findByRole('link', { name: 'Latest' }).as('latest');
-      cy.get('@latest').should('have.attr', 'aria-current', '');
+      cy.get('@latest').should('not.have.attr', 'aria-current');
       cy.get('@latest').click();
     });