feat: select button accessibility workaround (#500)

* feat: select button accessibility workaround * fix: fix test
onecx · Sep 27, 2024 · 3c24a16 · 3c24a16
1 parent a9b0e9b
commit 3c24a16
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 20 deletions.
diff --git a/libs/angular-accelerator/src/lib/components/diagram/diagram.component.html b/libs/angular-accelerator/src/lib/components/diagram/diagram.component.html
@@ -3,17 +3,18 @@
     <p-selectButton
       [options]="shownDiagramTypes"
       [(ngModel)]="selectedDiagramType"
-      optionLabel="icon"
+      optionLabel="id"
       (onChange)="onDiagramTypeChanged($event)"
       name="diagram-type-select-button"
     >
       <ng-template let-item pTemplate>
         <i
           [class]="item.icon"
-          [pTooltip]="item.title || (item.titleKey | translate)"
+          [pTooltip]="item.tooltip || (item.tooltipKey | translate)"
           tooltipPosition="top"
           tooltipEvent="hover"
         ></i>
+        <label style="display: none" id="{{item.id}}"> {{item.label ? item.label : item.labelKey | translate}} </label>
       </ng-template>
     </p-selectButton>
   </div>

diff --git a/libs/angular-accelerator/src/lib/components/diagram/diagram.component.spec.ts b/libs/angular-accelerator/src/lib/components/diagram/diagram.component.spec.ts
@@ -12,7 +12,7 @@ import { SelectButtonModule } from 'primeng/selectbutton'
 import { DiagramHarness, TestbedHarnessEnvironment } from '../../../../testing'
 import { DiagramType } from '../../model/diagram-type'
 import { DiagramComponent, DiagramLayouts } from './diagram.component'
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 
 describe('DiagramComponent', () => {
   let translateService: TranslateService
@@ -35,18 +35,20 @@ describe('DiagramComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-    declarations: [DiagramComponent],
-    imports: [NoopAnimationsModule,
+      declarations: [DiagramComponent],
+      imports: [
+        NoopAnimationsModule,
         ChartModule,
         MessageModule,
         SelectButtonModule,
         FormsModule,
         TranslateTestingModule.withTranslations({
-            en: require('./../../../../assets/i18n/en.json'),
-            de: require('./../../../../assets/i18n/de.json'),
-        })],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-}).compileComponents()
+          en: require('./../../../../assets/i18n/en.json'),
+          de: require('./../../../../assets/i18n/de.json'),
+        }),
+      ],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()],
+    }).compileComponents()
 
     fixture = TestBed.createComponent(DiagramComponent)
     component = fixture.componentInstance
@@ -118,11 +120,19 @@ describe('DiagramComponent', () => {
 
   it('should render a diagramType select button if supportedDiagramTypes is specified', async () => {
     const expectedDiagramLayouts: DiagramLayouts[] = [
-      { icon: PrimeIcons.CHART_PIE, layout: DiagramType.PIE, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE' },
       {
+        id: 'diagram-pie',
+        icon: PrimeIcons.CHART_PIE,
+        layout: DiagramType.PIE,
+        tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE',
+        labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE',
+      },
+      {
+        id: 'diagram-horizontal-bar',
         icon: PrimeIcons.BARS,
         layout: DiagramType.HORIZONTAL_BAR,
-        titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+        tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+        labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
       },
     ]
 
@@ -169,16 +179,26 @@ describe('DiagramComponent', () => {
 
   it('should dynamically add/remove options to/from the diagramType select button', async () => {
     const allDiagramLayouts: DiagramLayouts[] = [
-      { icon: PrimeIcons.CHART_PIE, layout: DiagramType.PIE, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE' },
       {
+        id: 'diagram-pie',
+        icon: PrimeIcons.CHART_PIE,
+        layout: DiagramType.PIE,
+        tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE',
+        labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE',
+      },
+      {
+        id: 'diagram-horizontal-bar',
         icon: PrimeIcons.BARS,
         layout: DiagramType.HORIZONTAL_BAR,
-        titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+        tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+        labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
       },
       {
+        id: 'diagram-vertical-bar',
         icon: PrimeIcons.CHART_BAR,
         layout: DiagramType.VERTICAL_BAR,
-        titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
+        tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
+        labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
       },
     ]
 

diff --git a/libs/angular-accelerator/src/lib/components/diagram/diagram.component.ts b/libs/angular-accelerator/src/lib/components/diagram/diagram.component.ts
@@ -9,27 +9,40 @@ import { ColorUtils } from '../../utils/colorutils'
 import { PrimeIcon } from '../../utils/primeicon.utils'
 
 export interface DiagramLayouts {
+  id: string
   icon: PrimeIcon
   layout: DiagramType
-  title?: string
-  titleKey: string
+  tooltip?: string
+  tooltipKey: string
+  label?: string
+  labelKey: string
 }
 
 export interface DiagramComponentState {
   activeDiagramType?: DiagramType
 }
 
 const allDiagramTypes: DiagramLayouts[] = [
-  { icon: PrimeIcons.CHART_PIE, layout: DiagramType.PIE, titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE' },
   {
+    id: 'diagram-pie',
+    icon: PrimeIcons.CHART_PIE,
+    layout: DiagramType.PIE,
+    tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE',
+    labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.PIE',
+  },
+  {
+    id: 'diagram-horizontal-bar',
     icon: PrimeIcons.BARS,
     layout: DiagramType.HORIZONTAL_BAR,
-    titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+    tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
+    labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.HORIZONTAL_BAR',
   },
   {
+    id: 'diagram-vertical-bar',
     icon: PrimeIcons.CHART_BAR,
     layout: DiagramType.VERTICAL_BAR,
-    titleKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
+    tooltipKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
+    labelKey: 'OCX_DIAGRAM.SWITCH_DIAGRAM_TYPE.VERTICAL_BAR',
   },
 ]