maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix usage of aria current - html error (#13963)

Browse source 
* 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
This commit is contained in:
Julien Maury 2021-06-15 13:06:17 +02:00 • committed by GitHub
parent 2f356dd3a4
commit f7cc60e84f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/views/articles/index.html.erb
View file

@ -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>

13
app/views/stories/tagged_articles/index.html.erb
View file

@ -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>

16
cypress/integration/homeFeedFlows/feedNavigation.spec.js
View file

@ -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();
});

20
cypress/integration/tagsFlows/tagIndexNavigation.spec.js
View file

@ -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();
});