Merge pull request #16267 from SoyDiego/fix-accessibility-steps

fix(Steps): remove aria-expanded for a11y and text correction

src/app/components/accordion/accordion.ts

@@ -230,7 +230,11 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
 
     accordion: Accordion;
 
-    constructor(@Inject(forwardRef(() => Accordion)) accordion: Accordion, public el: ElementRef, public changeDetector: ChangeDetectorRef) {
+    constructor(
+        @Inject(forwardRef(() => Accordion)) accordion: Accordion,
+        public el: ElementRef,
+        public changeDetector: ChangeDetectorRef
+    ) {
         this.accordion = accordion as Accordion;
         this.id = UniqueComponentId();
     }
@@ -437,7 +441,10 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
 
     public tabs: AccordionTab[] = [];
 
-    constructor(public el: ElementRef, public changeDetector: ChangeDetectorRef) {}
+    constructor(
+        public el: ElementRef,
+        public changeDetector: ChangeDetectorRef
+    ) {}
 
     @HostListener('keydown', ['$event'])
     onKeydown(event) {

src/app/components/animate/animate.ts

@@ -27,7 +27,11 @@ export class Animate implements OnInit, AfterViewInit {
 
     timeout: any;
 
-    constructor(private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {}
+    constructor(
+        private host: ElementRef,
+        public el: ElementRef,
+        public renderer: Renderer2
+    ) {}
 
     ngOnInit() {
         console.log('pAnimate directive is deprecated in 16.7.0 and will be removed in the future. Use pAnimateOnScroll directive instead');

src/app/components/animateonscroll/animateonscroll.ts

@@ -60,7 +60,13 @@ export class AnimateOnScroll implements OnInit, AfterViewInit {
 
     animationEndListener: VoidFunction | undefined;
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private host: ElementRef, public el: ElementRef, public renderer: Renderer2) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private host: ElementRef,
+        public el: ElementRef,
+        public renderer: Renderer2
+    ) {}
 
     ngOnInit() {
         if (isPlatformBrowser(this.platformId)) {

src/app/components/autocomplete/autocomplete.ts

@@ -880,11 +880,13 @@ export class AutoComplete implements AfterViewChecked, AfterContentInit, OnDestr
         return typeof this.modelValue() === 'string' && this.optionValue;
     }
 
+
     get isVisibleClearIcon(): boolean | undefined {
         return this.modelValue() != null && this.hasSelectedOption() && this.showClear && !this.disabled && !this.loading;
     }
 
     constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public config: PrimeNGConfig, public overlayService: OverlayService, private zone: NgZone) {
+
         effect(() => {
             this.filled = ObjectUtils.isNotEmpty(this.modelValue());
         });

src/app/components/badge/badge.ts

@@ -70,7 +70,11 @@ export class BadgeDirective implements OnChanges, AfterViewInit {
         return this.id && !this.disabled;
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, private renderer: Renderer2) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        private renderer: Renderer2
+    ) {}
 
     public ngOnChanges({ value, size, severity, disabled, badgeStyle, badgeStyleClass }: SimpleChanges): void {
         if (disabled) {

src/app/components/blockui/blockui.ts

@@ -96,7 +96,14 @@ export class BlockUI implements AfterViewInit, OnDestroy {
 
     contentTemplate: TemplateRef<any> | undefined;
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig, private renderer: Renderer2, @Inject(PLATFORM_ID) public platformId: any) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public cd: ChangeDetectorRef,
+        public config: PrimeNGConfig,
+        private renderer: Renderer2,
+        @Inject(PLATFORM_ID) public platformId: any
+    ) {}
 
     ngAfterViewInit() {
         if (this._blocked) this.block();

src/app/components/button/button.ts

@@ -155,7 +155,10 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);
 
-    constructor(public el: ElementRef, @Inject(DOCUMENT) private document: Document) {}
+    constructor(
+        public el: ElementRef,
+        @Inject(DOCUMENT) private document: Document
+    ) {}
 
     ngAfterViewInit() {
         DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));

src/app/components/calendar/calendar.ts

@@ -1169,7 +1169,15 @@ export class Calendar implements OnInit, OnDestroy, ControlValueAccessor {
         return this.currentView === 'year' ? this.getTranslation('nextDecade') : this.currentView === 'month' ? this.getTranslation('nextYear') : this.getTranslation('nextMonth');
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, private zone: NgZone, private config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        private zone: NgZone,
+        private config: PrimeNGConfig,
+        public overlayService: OverlayService
+    ) {
         this.window = this.document.defaultView as Window;
     }
 

src/app/components/carousel/carousel.ts

@@ -357,7 +357,15 @@ export class Carousel implements AfterContentInit {
 
     window: Window;
 
-    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, private config: PrimeNGConfig) {
+    constructor(
+        public el: ElementRef,
+        public zone: NgZone,
+        public cd: ChangeDetectorRef,
+        private renderer: Renderer2,
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        private config: PrimeNGConfig
+    ) {
         this.totalShiftedItems = this.page * this.numScroll * -1;
         this.window = this.document.defaultView as Window;
     }

src/app/components/cascadeselect/cascadeselect.ts

@@ -142,7 +142,10 @@ export class CascadeSelectSub implements OnInit {
         return this.config.getTranslation(TranslationKeys.ARIA)['listLabel'];
     }
 
-    constructor(private el: ElementRef, public config: PrimeNGConfig) {}
+    constructor(
+        private el: ElementRef,
+        public config: PrimeNGConfig
+    ) {}
 
     ngOnInit() {
         if (!this.root) {
@@ -1303,7 +1306,12 @@ export class CascadeSelect implements OnInit, AfterContentInit {
         return grouped ? this.getOptionGroupLabel(processedOption.option) : this.getOptionLabel(processedOption.option);
     }
 
-    constructor(private el: ElementRef, private cd: ChangeDetectorRef, private config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(
+        private el: ElementRef,
+        private cd: ChangeDetectorRef,
+        private config: PrimeNGConfig,
+        public overlayService: OverlayService
+    ) {
         effect(() => {
             const activeOptionPath = this.activeOptionPath();
             if (ObjectUtils.isNotEmpty(activeOptionPath)) {

src/app/components/chart/chart.ts

@@ -107,7 +107,11 @@ export class UIChart implements AfterViewInit, OnDestroy {
 
     chart: any;
 
-    constructor(@Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, private zone: NgZone) {}
+    constructor(
+        @Inject(PLATFORM_ID) private platformId: any,
+        public el: ElementRef,
+        private zone: NgZone
+    ) {}
 
     ngAfterViewInit() {
         this.initChart();

src/app/components/checkbox/checkbox.ts

@@ -247,7 +247,11 @@ export class Checkbox implements ControlValueAccessor {
 
     focused: boolean = false;
 
-    constructor(public cd: ChangeDetectorRef, private readonly injector: Injector, public config: PrimeNGConfig) {}
+    constructor(
+        public cd: ChangeDetectorRef,
+        private readonly injector: Injector,
+        public config: PrimeNGConfig
+    ) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {

src/app/components/chips/chips.ts

@@ -310,7 +310,12 @@ export class Chips implements AfterContentInit, ControlValueAccessor {
         return this.max && this.value && this.max === this.value.length;
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public cd: ChangeDetectorRef,
+        public config: PrimeNGConfig
+    ) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {

src/app/components/confirmdialog/confirmdialog.ts

@@ -442,7 +442,15 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     translationSubscription: Subscription | undefined;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig, @Inject(DOCUMENT) private document: Document) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        private confirmationService: ConfirmationService,
+        public zone: NgZone,
+        private cd: ChangeDetectorRef,
+        public config: PrimeNGConfig,
+        @Inject(DOCUMENT) private document: Document
+    ) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();

src/app/components/contextmenu/contextmenu.ts

@@ -233,7 +233,14 @@ export class ContextMenuSub {
 
     @ViewChild('sublist') sublistViewChild: ElementRef;
 
-    constructor(@Inject(DOCUMENT) private document: Document, public el: ElementRef, public renderer: Renderer2, private cd: ChangeDetectorRef, @Inject(forwardRef(() => ContextMenu)) public contextMenu: ContextMenu, private ref: ViewContainerRef) {}
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        public el: ElementRef,
+        public renderer: Renderer2,
+        private cd: ChangeDetectorRef,
+        @Inject(forwardRef(() => ContextMenu)) public contextMenu: ContextMenu,
+        private ref: ViewContainerRef
+    ) {}
 
     getItemProp(processedItem: any, name: string, params: any | null = null) {
         return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name], params) : undefined;

src/app/components/dataview/dataview.ts

@@ -76,7 +76,7 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da
             ></p-paginator>
 
             <div class="p-dataview-content">
-                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice : (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>
+                <ng-container *ngTemplateOutlet="itemTemplate; context: { $implicit: paginator ? (filteredValue || value | slice: (lazy ? 0 : first) : (lazy ? 0 : first) + rows) : filteredValue || value }"></ng-container>
 
                 <div *ngIf="isEmpty() && !loading">
                     <div class="p-dataview-emptymessage">
@@ -358,7 +358,12 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU
         return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
     }
 
-    constructor(public el: ElementRef, public cd: ChangeDetectorRef, public filterService: FilterService, public config: PrimeNGConfig) {}
+    constructor(
+        public el: ElementRef,
+        public cd: ChangeDetectorRef,
+        public filterService: FilterService,
+        public config: PrimeNGConfig
+    ) {}
 
     ngOnInit() {
         if (this.lazy && this.lazyLoadOnInit) {

src/app/components/defer/defer.ts

@@ -27,7 +27,14 @@ export class DeferredLoader implements AfterViewInit, OnDestroy {
 
     window: Window;
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public renderer: Renderer2, public viewContainer: ViewContainerRef, private cd: ChangeDetectorRef) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public viewContainer: ViewContainerRef,
+        private cd: ChangeDetectorRef
+    ) {
         this.window = this.document.defaultView as Window;
     }
 

src/app/components/dialog/dialog.ts

@@ -547,7 +547,15 @@ export class Dialog implements AfterContentInit, OnInit, OnDestroy {
         return this.config.getTranslation(TranslationKeys.ARIA)['maximizeLabel'];
     }
 
-    constructor(@Inject(DOCUMENT) private document: Document, @Inject(PLATFORM_ID) private platformId: any, public el: ElementRef, public renderer: Renderer2, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {
+    constructor(
+        @Inject(DOCUMENT) private document: Document,
+        @Inject(PLATFORM_ID) private platformId: any,
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public zone: NgZone,
+        private cd: ChangeDetectorRef,
+        public config: PrimeNGConfig
+    ) {
         this.window = this.document.defaultView as Window;
     }
 

src/app/components/dock/dock.ts

@@ -164,7 +164,10 @@ export class Dock implements AfterContentInit {
         return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
     }
 
-    constructor(private el: ElementRef, public cd: ChangeDetectorRef) {
+    constructor(
+        private el: ElementRef,
+        public cd: ChangeDetectorRef
+    ) {
         this.currentIndex = -3;
     }
 

src/app/components/dragdrop/dragdrop.ts

@@ -53,7 +53,11 @@ export class Draggable implements AfterViewInit, OnDestroy {
 
     _pDraggableDisabled: boolean = false;
 
-    constructor(public el: ElementRef, public zone: NgZone, private renderer: Renderer2) {}
+    constructor(
+        public el: ElementRef,
+        public zone: NgZone,
+        private renderer: Renderer2
+    ) {}
 
     @Input() get pDraggableDisabled(): boolean {
         return this._pDraggableDisabled;
@@ -195,7 +199,11 @@ export class Droppable implements AfterViewInit, OnDestroy {
      */
     @Output() onDrop: EventEmitter<DragEvent> = new EventEmitter();
 
-    constructor(public el: ElementRef, public zone: NgZone, private renderer: Renderer2) {}
+    constructor(
+        public el: ElementRef,
+        public zone: NgZone,
+        private renderer: Renderer2
+    ) {}
 
     dragOverListener: VoidListener;
 

src/app/components/dropdown/dropdown.ts

@@ -1018,7 +1018,14 @@ export class Dropdown implements OnInit, AfterViewInit, AfterContentInit, AfterV
 
     editableInputValue = computed(() => this.getOptionLabel(this.selectedOption) || this.modelValue() || '');
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {
+    constructor(
+        public el: ElementRef,
+        public renderer: Renderer2,
+        public cd: ChangeDetectorRef,
+        public zone: NgZone,
+        public filterService: FilterService,
+        public config: PrimeNGConfig
+    ) {
         effect(() => {
             const modelValue = this.modelValue();
             const visibleOptions = this.visibleOptions();

src/app/components/dynamicdialog/dialogservice.ts

@@ -14,7 +14,11 @@ import { ObjectUtils } from 'primeng/utils';
 export class DialogService {
     dialogComponentRefMap: Map<DynamicDialogRef<any>, ComponentRef<DynamicDialogComponent>> = new Map();
 
-    constructor(private appRef: ApplicationRef, private injector: Injector, @Inject(DOCUMENT) private document: Document) {}
+    constructor(
+        private appRef: ApplicationRef,
+        private injector: Injector,
+        @Inject(DOCUMENT) private document: Document
+    ) {}
     /**
      * Displays the dialog using the dynamic dialog object options.
      * @param {*} componentType - Dynamic component for content template.

src/app/components/dynamicdialog/dynamicdialog-injector.ts

@@ -1,7 +1,10 @@
 import { InjectOptions, Injector, ProviderToken, InjectFlags } from '@angular/core';
 
 export class DynamicDialogInjector implements Injector {
-    constructor(private _parentInjector: Injector, private _additionalTokens: WeakMap<any, any>) {}
+    constructor(
+        private _parentInjector: Injector,
+        private _additionalTokens: WeakMap<any, any>
+    ) {}
 
     get<T>(token: ProviderToken<T>, notFoundValue?: T, options?: InjectOptions | InjectFlags): T {
         const value = this._additionalTokens.get(token);

src/app/components/dynamicdialog/dynamicdialog.spec.ts

@@ -12,7 +12,10 @@ import { DynamicDialogRef } from './dynamicdialog-ref';
     template: ` <h2>PrimeNG ROCKS!</h2> `
 })
 export class TestComponent {
-    constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig) {}
+    constructor(
+        public ref: DynamicDialogRef,
+        public config: DynamicDialogConfig
+    ) {}
 }
 
 @Component({

src/app/components/editor/editor.ts

@@ -194,7 +194,10 @@ export class Editor implements AfterContentInit, ControlValueAccessor {
 
     private quillElements!: { editorElement: HTMLElement; toolbarElement: HTMLElement };
 
-    constructor(public el: ElementRef, @Inject(PLATFORM_ID) private platformId: object) {
+    constructor(
+        public el: ElementRef,
+        @Inject(PLATFORM_ID) private platformId: object
+    ) {
         /**
          * Read or write the DOM once, when initializing non-Angular (Quill) library.
          */