fix(comparision-table): improve toggle section screen reader output(#…

…1063)
allianz · Nov 16, 2023 · f435eb0 · f435eb0
1 parent 0f44626
commit f435eb0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 5 deletions.
diff --git a/projects/ng-aquila/src/comparison-table/comparison-table.component.html b/projects/ng-aquila/src/comparison-table/comparison-table.component.html
@@ -77,10 +77,11 @@
                 >
                 </nx-comparison-table-desktop-group>
 
-                <!-- add role=table here to prevent screen reader wrong reading. since toggleSection is like another table, -->
-                <div role="table" *ngIf="_isToggleSection(element)" class="nx-comparison-table__toggle-section">
+                <div *ngIf="_isToggleSection(element)" class="nx-comparison-table__toggle-section">
                     <div class="nx-comparison-table__toggle-section-header" role="row">
-                        <ng-container *ngTemplateOutlet="element.toggleSectionHeader._content"></ng-container>
+                        <div>
+                            <ng-container *ngTemplateOutlet="element.toggleSectionHeader._content"></ng-container>
+                        </div>
                     </div>
 
                     <div class="nx-comparison-table__toggle-section-body" [@bodyExpansion]="element.getOpenState()" role="rowgroup">

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
@@ -3,7 +3,7 @@
         <div
             #wrapper
             class="nx-comparison-table-toggle-section__header-wrapper"
-            role="columnheader"
+            role="rowheader"
             [attr.aria-colspan]="_table.viewType === 'desktop' ? _table._getHeaderCells().length + 1 : _table._getHeaderCells().length"
             [attr.aria-expanded]="_toggleSection.isExpanded"
             [attr.id]="id"

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,7 +143,7 @@ describe('ToggleSectionHeaderComponent', () => {
             tick(THROTTLE_TIME);
             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('role')).toBe('rowheader');
             expect(wrapper.getAttribute('aria-colspan')).toBe('2');
         }));