From 6fb47a66a83a4b9c88749bd23eb02804ded17260 Mon Sep 17 00:00:00 2001 From: Diego Franchina Date: Thu, 21 Mar 2024 15:47:44 +0100 Subject: [PATCH 1/2] fix accessibility, added aria-label --- src/app/components/api/primengconfig.ts | 3 ++- src/app/components/api/translation.ts | 1 + src/app/components/api/translationkeys.ts | 1 + src/app/components/fileupload/fileupload.ts | 30 +++++++++++++++++++-- 4 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts index 392b3c305f7..c096885cdc7 100644 --- a/src/app/components/api/primengconfig.ts +++ b/src/app/components/api/primengconfig.ts @@ -139,7 +139,8 @@ export class PrimeNGConfig { rotateLeft: 'Rotate Left', listLabel: 'Option List', selectColor: 'Select a color', - removeLabel: 'Remove' + removeLabel: 'Remove', + browseFiles: 'Browse Files' } }; diff --git a/src/app/components/api/translation.ts b/src/app/components/api/translation.ts index bdbc8861547..bc7030211c0 100644 --- a/src/app/components/api/translation.ts +++ b/src/app/components/api/translation.ts @@ -130,4 +130,5 @@ export interface Aria { listLabel?: string; selectColor?: string; removeLabel?: string; + browseFiles?: string; } diff --git a/src/app/components/api/translationkeys.ts b/src/app/components/api/translationkeys.ts index 46424c192bf..998a358e6b0 100644 --- a/src/app/components/api/translationkeys.ts +++ b/src/app/components/api/translationkeys.ts @@ -46,4 +46,5 @@ export class TranslationKeys { public static readonly SELECTION_MESSAGE = 'selectionMessage'; public static readonly ARIA = 'aria'; public static readonly SELECT_COLOR = 'selectColor'; + public static readonly BROWSE_FILES = 'browseFiles'; } diff --git a/src/app/components/fileupload/fileupload.ts b/src/app/components/fileupload/fileupload.ts index 178b58a3068..edd58096d84 100755 --- a/src/app/components/fileupload/fileupload.ts +++ b/src/app/components/fileupload/fileupload.ts @@ -57,7 +57,17 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv [class]="chooseStyleClass" [attr.data-pc-section]="'choosebutton'" > - + @@ -146,7 +156,19 @@ import { FileBeforeUploadEvent, FileProgressEvent, FileRemoveEvent, FileSelectEv {{ basicButtonLabel }} - + `, @@ -889,6 +911,10 @@ export class FileUpload implements AfterViewInit, AfterContentInit, OnInit, OnDe return this.cancelLabel || this.config.getTranslation(TranslationKeys.CANCEL); } + get browseFilesLabel(): string { + return this.config.getTranslation(TranslationKeys.ARIA)[TranslationKeys.BROWSE_FILES]; + } + ngOnDestroy() { if (this.content && this.content.nativeElement) { if (this.dragOverListener) { From 2cdef9b4e7c19aed1fee06bfb32cdd200d242ccc Mon Sep 17 00:00:00 2001 From: Diego Franchina Date: Thu, 21 Mar 2024 15:47:59 +0100 Subject: [PATCH 2/2] Format code --- src/app/components/chip/chip.ts | 12 ++- src/app/components/picklist/picklist.ts | 1 - src/app/components/stepper/stepper.ts | 17 ++--- .../stepper/stepperpanel.interface.ts | 2 +- src/app/components/table/table.ts | 8 +- src/app/components/tieredmenu/tieredmenu.ts | 14 ++-- .../doc/inputotp/inputotpdoc.module.ts | 1 - .../showcase/doc/stepper/accessibilitydoc.ts | 74 +++++++++---------- .../showcase/doc/stepper/stepperdoc.module.ts | 2 +- .../showcase/pages/inputotp/inputotpdemo.ts | 6 +- .../stepper/stepperdemo-routing.module.ts | 2 +- 11 files changed, 70 insertions(+), 69 deletions(-) diff --git a/src/app/components/chip/chip.ts b/src/app/components/chip/chip.ts index 39fee7c100d..efc023c70ac 100755 --- a/src/app/components/chip/chip.ts +++ b/src/app/components/chip/chip.ts @@ -16,7 +16,17 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle';
{{ label }}
- + diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts index e1fb088fe2f..e0f7c2f1327 100755 --- a/src/app/components/picklist/picklist.ts +++ b/src/app/components/picklist/picklist.ts @@ -1574,7 +1574,6 @@ export class PickList implements AfterViewChecked, AfterContentInit { this.resetTargetFilter(); } - findNextItem(item: any): HTMLElement | null { let nextItem = item.nextElementSibling; diff --git a/src/app/components/stepper/stepper.ts b/src/app/components/stepper/stepper.ts index 2e2b146da9f..f6fb8819383 100755 --- a/src/app/components/stepper/stepper.ts +++ b/src/app/components/stepper/stepper.ts @@ -49,14 +49,13 @@ export class StepperHeader { @Input() active: boolean | undefined; - @Input() highlighted: boolean | undefined; + @Input() highlighted: boolean | undefined; - @Input() getStepProp: string | undefined; + @Input() getStepProp: string | undefined; - @Input() ariaControls: string | undefined; + @Input() ariaControls: string | undefined; @Output() onClick = new EventEmitter(); - } @Component({ @@ -76,16 +75,15 @@ export class StepperHeader { export class StepperSeparator { @Input() template: TemplateRef | undefined; - @Input() separatorClass: string | undefined; + @Input() separatorClass: string | undefined; @Input() stepperPanel: StepperPanel; @Input() index: string | undefined; - @Input() active: boolean | undefined; + @Input() active: boolean | undefined; @Input() highlighted: boolean | undefined; - } @Component({ @@ -118,7 +116,7 @@ export class StepperContent { @Input() stepperPanel: StepperPanel; - @Input() index: string | undefined; + @Input() index: string | undefined; @Input() active: boolean | undefined; @@ -129,7 +127,6 @@ export class StepperContent { @Output() onPrevClick = new EventEmitter(); @Output() onNextClick = new EventEmitter(); - } /** @@ -387,7 +384,7 @@ export class Stepper implements AfterContentInit { panels!: StepperPanel[]; - isStepActive(index:number) { + isStepActive(index: number) { return this.activeStep === index; } diff --git a/src/app/components/stepper/stepperpanel.interface.ts b/src/app/components/stepper/stepperpanel.interface.ts index 2816dd53343..e6f6d1a71fa 100644 --- a/src/app/components/stepper/stepperpanel.interface.ts +++ b/src/app/components/stepper/stepperpanel.interface.ts @@ -121,4 +121,4 @@ export interface StepperPanelSeparatorProps { * Current highlighted state of the stepperpanel */ highlighted: boolean; -} \ No newline at end of file +} diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts index c086db2e363..36eb6102f2d 100644 --- a/src/app/components/table/table.ts +++ b/src/app/components/table/table.ts @@ -2432,9 +2432,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable throw new Error('dataKey or groupRowsBy must be defined to use row expansion'); } - let dataKeyValue = this.groupRowsBy ? - String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy)) : - String(ObjectUtils.resolveFieldData(rowData, this.dataKey)); + let dataKeyValue = this.groupRowsBy ? String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy)) : String(ObjectUtils.resolveFieldData(rowData, this.dataKey)); if (this.expandedRowKeys[dataKeyValue] != null) { delete this.expandedRowKeys[dataKeyValue]; @@ -2464,9 +2462,7 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable } isRowExpanded(rowData: any): boolean { - return this.groupRowsBy ? - this.expandedRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy))] === true : - this.expandedRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.dataKey))] === true; + return this.groupRowsBy ? this.expandedRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.groupRowsBy))] === true : this.expandedRowKeys[String(ObjectUtils.resolveFieldData(rowData, this.dataKey))] === true; } isRowEditing(rowData: any): boolean { diff --git a/src/app/components/tieredmenu/tieredmenu.ts b/src/app/components/tieredmenu/tieredmenu.ts index 2138e577a05..cc7348ebf46 100755 --- a/src/app/components/tieredmenu/tieredmenu.ts +++ b/src/app/components/tieredmenu/tieredmenu.ts @@ -288,11 +288,15 @@ export class TieredMenuSub { } getAriaPosInset(index: number) { - return index - this.items.slice(0, index).filter((processedItem) => { - const isItemVisible = this.isItemVisible(processedItem); - const isVisibleSeparator = isItemVisible && this.getItemProp(processedItem, 'separator'); - return !isItemVisible || isVisibleSeparator; - }).length + 1; + return ( + index - + this.items.slice(0, index).filter((processedItem) => { + const isItemVisible = this.isItemVisible(processedItem); + const isVisibleSeparator = isItemVisible && this.getItemProp(processedItem, 'separator'); + return !isItemVisible || isVisibleSeparator; + }).length + + 1 + ); } isItemVisible(processedItem: any): boolean { diff --git a/src/app/showcase/doc/inputotp/inputotpdoc.module.ts b/src/app/showcase/doc/inputotp/inputotpdoc.module.ts index a7fde5cdb9e..93f327f1da6 100644 --- a/src/app/showcase/doc/inputotp/inputotpdoc.module.ts +++ b/src/app/showcase/doc/inputotp/inputotpdoc.module.ts @@ -15,7 +15,6 @@ import { SampleDoc } from './sampledoc'; import { ButtonModule } from 'primeng/button'; import { AccessibilityDoc } from './accessibilitydoc'; - @NgModule({ imports: [CommonModule, RouterModule, AppCodeModule, AppDocModule, FormsModule, ReactiveFormsModule, InputOtpModule, InputTextModule, ButtonModule], exports: [AppDocModule], diff --git a/src/app/showcase/doc/stepper/accessibilitydoc.ts b/src/app/showcase/doc/stepper/accessibilitydoc.ts index e6e79db6f52..63a56183dc8 100644 --- a/src/app/showcase/doc/stepper/accessibilitydoc.ts +++ b/src/app/showcase/doc/stepper/accessibilitydoc.ts @@ -4,44 +4,44 @@ import { Component } from '@angular/core'; selector: 'accessibility-doc', template: `
-

Screen Reader

-

- Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a - tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and - aria-labelledby reference to the header as the accessible name. -

+

Screen Reader

+

+ Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a + tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and + aria-labelledby reference to the header as the accessible name. +

-

Tab Header Keyboard Support

-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
- tab - Moves focus through the header.
- enter - Activates the focused stepper header.
- space - Activates the focused stepper header.
-
+

Tab Header Keyboard Support

+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ tab + Moves focus through the header.
+ enter + Activates the focused stepper header.
+ space + Activates the focused stepper header.
+
` }) diff --git a/src/app/showcase/doc/stepper/stepperdoc.module.ts b/src/app/showcase/doc/stepper/stepperdoc.module.ts index 918eb46d4d2..6aac2de49ea 100644 --- a/src/app/showcase/doc/stepper/stepperdoc.module.ts +++ b/src/app/showcase/doc/stepper/stepperdoc.module.ts @@ -19,7 +19,7 @@ import { ToggleButtonModule } from 'primeng/togglebutton'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; @NgModule({ - imports: [CommonModule, AppCodeModule, AppDocModule, StepperModule, RouterModule,FormsModule, ReactiveFormsModule, ButtonModule, PasswordModule, InputIconModule, IconFieldModule, InputTextModule, ToggleButtonModule], + imports: [CommonModule, AppCodeModule, AppDocModule, StepperModule, RouterModule, FormsModule, ReactiveFormsModule, ButtonModule, PasswordModule, InputIconModule, IconFieldModule, InputTextModule, ToggleButtonModule], exports: [AppDocModule], declarations: [ImportDoc, BasicDoc, VerticalDoc, LinearDoc, TemplateDoc, AccessibilityDoc] }) diff --git a/src/app/showcase/pages/inputotp/inputotpdemo.ts b/src/app/showcase/pages/inputotp/inputotpdemo.ts index 093d7d0b67b..7b9f5bf5a7c 100755 --- a/src/app/showcase/pages/inputotp/inputotpdemo.ts +++ b/src/app/showcase/pages/inputotp/inputotpdemo.ts @@ -47,10 +47,6 @@ export class InputOtpDemo { id: 'accessibility', label: 'Accessibility', component: AccessibilityDoc - }, - - - - + } ]; } diff --git a/src/app/showcase/pages/stepper/stepperdemo-routing.module.ts b/src/app/showcase/pages/stepper/stepperdemo-routing.module.ts index a8a4cbc217c..253d2bc594c 100755 --- a/src/app/showcase/pages/stepper/stepperdemo-routing.module.ts +++ b/src/app/showcase/pages/stepper/stepperdemo-routing.module.ts @@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router'; import { StepperDemo } from './stepperdemo'; @NgModule({ - imports: [RouterModule.forChild([{ path: '', component: StepperDemo}])], + imports: [RouterModule.forChild([{ path: '', component: StepperDemo }])], exports: [RouterModule] }) export class StepperDemoRoutingModule {}