fix(a11y): make breadcrumb nav more accessible (#45021)

* fix: make breadcrumb nav more accessible

* refactor: cypress test and jest snapshot

* slight adjustment to left breadcrumb focus outline

* feat: translate aria for nav

* chore(tools): update snapshot

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>
This commit is contained in:
Bruce B
2022-02-15 10:44:18 -08:00
committed by GitHub
parent 1f8df61b1e
commit 7abb89326b
6 changed files with 117 additions and 78 deletions

View File

@ -8,23 +8,23 @@ describe('The breadcumbs should work corectly', () => {
it('It should have a superblock and a course', () => {
cy.visit(challengeUrl);
cy.get('.ellipsis').contains('Responsive Web Design').and('be.visible');
cy.get('.breadcrumb-left')
cy.get('.breadcrumb-left > a')
.should('have.attr', 'href')
.and('include', superBlockUrl);
cy.get('.breadcrumb-right')
cy.get('.breadcrumb-right > a')
.contains('Basic HTML and HTML5')
.and('be.visible');
cy.get('.breadcrumb-right')
cy.get('.breadcrumb-right > a')
.should('have.attr', 'href')
.and('include', courseUrl);
});
it('Should redirect to the right url', () => {
cy.visit(challengeUrl);
cy.get('.breadcrumb-left').click();
cy.get('.breadcrumb-left > a').click();
cy.url().should('include', '/responsive-web-design');
cy.visit(challengeUrl);
cy.get('.breadcrumb-right').click();
cy.get('.breadcrumb-right > a').click();
cy.url().should('include', '/responsive-web-design/#basic-html-and-html5');
});
});