Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: diagram component accessibility improvements #484

Merged
merged 3 commits into from
Sep 25, 2024
Merged

feat: diagram component accessibility improvements #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e2be50f
feat: aria label for chart
markuczy Sep 20, 2024
7901cee
feat: enhance chart aria label and tooltip for select button
markuczy Sep 24, 2024
8f0c42f
Merge branch 'main' into feat/diagram-accessibility
markuczy Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions libs/angular-accelerator/assets/i18n/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@
"HOME_ARIA_LABEL": "Zu {{page}} navigieren"
},
"OCX_DIAGRAM": {
"ARIA_LABEL": "Diagramm: Gesamtanzahl: {{total}}. {{valueString}}.",
"EMPTY_ARIA_LABEL": "Diagramm ohne Daten",
"SUM": "Gesamtanzahl",
"NO_DATA": "Es sind keine Daten vorhanden",
"SWITCH_DIAGRAM_TYPE": {
Expand Down
2 changes: 2 additions & 0 deletions libs/angular-accelerator/assets/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,8 @@
"HOME_ARIA_LABEL": "Go to {{page}} home page"
},
"OCX_DIAGRAM": {
"ARIA_LABEL": "Chart: Total amount: {{total}}. {{valueString}}.",
"EMPTY_ARIA_LABEL": "Chart with no data",
"SUM": "Total",
"NO_DATA": "There is no data available",
"SWITCH_DIAGRAM_TYPE": {
Expand Down
28 changes: 17 additions & 11 deletions libs/angular-accelerator/src/lib/components/diagram/diagram.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
<ng-container *ngIf="this.data">
<div class="flex justify-content-center pb-2" *ngIf="shownDiagramTypes.length > 1">
<p-selectButton
[options]="shownDiagramTypes"
[(ngModel)]="selectedDiagramType"
optionLabel="icon"
(onChange)="onDiagramTypeChanged($event)"
name="diagram-type-select-button"
>
<ng-template let-item pTemplate>
<i [class]="item.icon" [title]="item.title || (item.titleKey | translate)"></i>
</ng-template>
</p-selectButton>
<p-selectButton
[options]="shownDiagramTypes"
[(ngModel)]="selectedDiagramType"
optionLabel="icon"
(onChange)="onDiagramTypeChanged($event)"
name="diagram-type-select-button"
>
<ng-template let-item pTemplate>
<i
[class]="item.icon"
[pTooltip]="item.title || (item.titleKey | translate)"
tooltipPosition="top"
tooltipEvent="hover"
></i>
</ng-template>
</p-selectButton>
</div>
<div class="w-full flex justify-content-center">
<p-chart
Expand All @@ -20,6 +25,7 @@
[responsive]="false"
[options]="chartOptions"
(onDataSelect)="dataClicked($event)"
[ariaLabel]="(data ? 'OCX_DIAGRAM.ARIA_LABEL' : 'OCX_DIAGRAM.EMPTY_ARIA_LABEL') | translate: {total: generateTotal(data), valueString: generateDiagramValueString(data)}"
></p-chart>
</div>
<div class="w-full flex justify-content-center mt-2 sumKey">
Expand Down
11 changes: 9 additions & 2 deletions libs/angular-accelerator/src/lib/components/diagram/diagram.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,14 @@ export class DiagramComponent implements OnInit, OnChanges {
}
}

generateTotal(data: DiagramData[]): number {
return data.reduce((acc, current) => acc + current.value, 0)
}

generateDiagramValueString(data: DiagramData[]): string {
return data.map((item) => `${item.label}:${item.value}`).join(', ')
}

private diagramTypeToChartType(
value: DiagramType
): 'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar' {
Expand All @@ -133,15 +141,14 @@ export class DiagramComponent implements OnInit, OnChanges {

dataClicked(event: []) {
this.dataSelected.emit(event.length)

}

onDiagramTypeChanged(event: any) {
this.diagramType = event.value.layout
this.generateChart(this.colorScale, this.colorRangeInfo)
this.diagramTypeChanged.emit(event.value.layout)
this.componentStateChanged.emit({
activeDiagramType: event.value.layout
activeDiagramType: event.value.layout,
})
}
}
Expand Down
2 changes: 2 additions & 0 deletions libs/portal-integration-angular/assets/i18n/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,8 @@
"HOME_ARIA_LABEL": "Zu {{page}} navigieren"
},
"OCX_DIAGRAM": {
"ARIA_LABEL": "Diagramm: Gesamtanzahl: {{total}}. {{valueString}}.",
"EMPTY_ARIA_LABEL": "Diagramm ohne Daten",
"SUM": "Gesamtanzahl",
"NO_DATA": "Es sind keine Daten vorhanden",
"SWITCH_DIAGRAM_TYPE": {
Expand Down
2 changes: 2 additions & 0 deletions libs/portal-integration-angular/assets/i18n/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,8 @@
"HOME_ARIA_LABEL": "Go to {{page}} home page"
},
"OCX_DIAGRAM": {
"ARIA_LABEL": "Chart: Total amount: {{total}}. {{valueString}}.",
"EMPTY_ARIA_LABEL": "Chart with no data",
"SUM": "Total",
"NO_DATA": "There is no data available",
"SWITCH_DIAGRAM_TYPE": {
Expand Down
Loading