fix(comparison-table): correct aria-colspan on toggle-section headers…

… (#74)
allianz · Oct 15, 2020 · e6c3740 · e6c3740
1 parent d13a73d
commit e6c3740
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 7 deletions.
diff --git a/projects/ng-aquila/src/comparison-table/toggle-section/toggle-section-header.component.html b/projects/ng-aquila/src/comparison-table/toggle-section/toggle-section-header.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngIf="_table.viewType === 'desktop' || _table.viewType === 'tablet'">
     <div class="nx-comparison-table-toggle-section__header-wrapper"
          role="columnheader"
-         [attr.aria-colspan]="_getColspan()"
+         [attr.aria-colspan]="_table.viewType === 'desktop' ? _table._getHeaderCells().length + 1 : _table._getHeaderCells().length"
          [attr.aria-expanded]="_toggleSection.isExpanded"
          [attr.id]="id"
          (click)="toggle()"
@@ -22,7 +22,7 @@
   <ng-container *ngIf="_table.viewType === 'mobile'">
     <th class="nx-comparison-table__mobile-toggle-section-header"
         scope="col"
-        [attr.colspan]="_getColspan()"
+        [attr.colspan]="_toggleSection._numberOfRows()"
         [attr.id]="id">
       <ng-container *ngTemplateOutlet="ngContent"></ng-container>
     </th>

diff --git a/...cts/ng-aquila/src/comparison-table/toggle-section/toggle-section-header.component.spec.ts b/...cts/ng-aquila/src/comparison-table/toggle-section/toggle-section-header.component.spec.ts
@@ -143,6 +143,7 @@ describe('ToggleSectionHeaderComponent', () => {
       expect(headerElements[0].attributes['role']).toBe('row');
       const wrapper = headerElements[0].nativeElement.querySelector('.nx-comparison-table-toggle-section__header-wrapper') as HTMLElement;
       expect(wrapper.getAttribute('role')).toBe('columnheader');
+      expect(wrapper.getAttribute('aria-colspan')).toBe('2');
     }));
 
     it('should have set the correct roles / scopes (mobile)', fakeAsync(() => {
@@ -155,6 +156,7 @@ describe('ToggleSectionHeaderComponent', () => {
       mobileHeaderElements = fixture.debugElement.queryAll(By.css('.nx-comparison-table__mobile-toggle-section-header'));
       expect(mobileHeaderElements[0].attributes['role']).toBeUndefined();
       expect(mobileHeaderElements[0].attributes['scope']).toBe('col');
+      expect(mobileHeaderElements[0].attributes['colspan']).toBe('1');
     }));
 
     it('should have set the correct aria-expanded (desktop)', () => {

diff --git a/projects/ng-aquila/src/comparison-table/toggle-section/toggle-section-header.component.ts b/projects/ng-aquila/src/comparison-table/toggle-section/toggle-section-header.component.ts
@@ -51,9 +51,4 @@ export class NxToggleSectionHeaderComponent {
       }
     }
   }
-
-  _getColspan() {
-    return this._toggleSection._numberOfRows();
-  }
-
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,9 +51,4 @@ export class NxToggleSectionHeaderComponent { @@
           }
         }
       }
-      _getColspan() {
-        return this._toggleSection._numberOfRows();
-      }
     }