Added missing roles to comcol edit tabs

alexandrevryghem · Apr 23, 2024 · dde5555 · dde5555
1 parent d964049
commit dde5555
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/cypress/e2e/collection-edit.cy.ts b/cypress/e2e/collection-edit.cy.ts
@@ -12,8 +12,11 @@ beforeEach(() => {
 
 describe('Edit Collection > Edit Metadata tab', () => {
   it('should pass accessibility tests', () => {
-    // <ds-edit-collection> tag must be loaded
-    cy.get('ds-edit-collection').should('be.visible');
+    // <ds-collection-form> tag must be loaded
+    cy.get('ds-collection-form').should('be.visible');
+
+    // wait for at least one li to be rendered to prevent the accessibility test to fail
+    cy.get('ul[role="tablist"] li').should('be.visible');
 
     // Analyze <ds-edit-collection> for accessibility issues
     testA11y('ds-edit-collection');

diff --git a/cypress/e2e/community-edit.cy.ts b/cypress/e2e/community-edit.cy.ts
@@ -12,8 +12,11 @@ beforeEach(() => {
 
 describe('Edit Community > Edit Metadata tab', () => {
   it('should pass accessibility tests', () => {
-    // <ds-edit-community> tag must be loaded
-    cy.get('ds-edit-community').should('be.visible');
+    // <ds-community-form> tag must be loaded
+    cy.get('ds-community-form').should('be.visible');
+
+    // wait for at least one li to be rendered to prevent the accessibility test to fail
+    cy.get('ul[role="tablist"] li').should('be.visible');
 
     // Analyze <ds-edit-community> for accessibility issues
     testA11y('ds-edit-community');

diff --git a/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html b/src/app/shared/comcol/comcol-forms/edit-comcol-page/edit-comcol-page.component.html
@@ -11,9 +11,10 @@ <h1>{{ type + '.edit.head' | translate }}</h1>
         </div>
       </div>
       <div class="pt-2">
-        <ul class="nav nav-tabs justify-content-start mb-2">
-          <li *ngFor="let page of pages" class="nav-item">
-            <a class="nav-link"
+        <ul class="nav nav-tabs justify-content-start mb-2" role="tablist">
+          <li *ngFor="let page of pages" class="nav-item" role="presentation">
+            <a class="nav-link" role="tab"
+               [attr.aria-selected]="page === currentPage"
                [ngClass]="{'active' : page === currentPage}"
                [routerLink]="['./' + page]"
                [attr.data-test]="page">