primeng 16.5.1 → 16.7.0

package/fesm2022/primeng-inputnumber.mjs

@@ -3,15 +3,15 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { PrimeTemplate, SharedModule } from 'primeng/api';
 import * as i3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { DomHandler } from 'primeng/dom';
+import { AngleDownIcon } from 'primeng/icons/angledown';
+import { AngleUpIcon } from 'primeng/icons/angleup';
+import { TimesIcon } from 'primeng/icons/times';
 import * as i2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
-import { PrimeTemplate, SharedModule } from 'primeng/api';
-import { TimesIcon } from 'primeng/icons/times';
-import { AngleUpIcon } from 'primeng/icons/angleup';
-import { AngleDownIcon } from 'primeng/icons/angledown';
 
 const INPUTNUMBER_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -82,6 +82,11 @@ class InputNumber {
      * @group Props
      */
     title;
+    /**
+     * Specifies one or more IDs in the DOM that labels the input field.
+     * @group Props
+     */
+    ariaLabelledBy;
     /**
      * Used to define a string that labels the input element.
      * @group Props
@@ -468,15 +473,21 @@ class InputNumber {
             this.clearTimer();
             return;
         }
-        this.input?.nativeElement.focus();
-        this.repeat(event, null, 1);
-        event.preventDefault();
+        if (!this.disabled) {
+            this.input?.nativeElement.focus();
+            this.repeat(event, null, 1);
+            event.preventDefault();
+        }
     }
     onUpButtonMouseUp() {
-        this.clearTimer();
+        if (!this.disabled) {
+            this.clearTimer();
+        }
     }
     onUpButtonMouseLeave() {
-        this.clearTimer();
+        if (!this.disabled) {
+            this.clearTimer();
+        }
     }
     onUpButtonKeyDown(event) {
         if (event.keyCode === 32 || event.keyCode === 13) {
@@ -484,25 +495,35 @@ class InputNumber {
         }
     }
     onUpButtonKeyUp() {
-        this.clearTimer();
+        if (!this.disabled) {
+            this.clearTimer();
+        }
     }
     onDownButtonMouseDown(event) {
         if (event.button === 2) {
             this.clearTimer();
             return;
         }
-        this.input?.nativeElement.focus();
-        this.repeat(event, null, -1);
-        event.preventDefault();
+        if (!this.disabled) {
+            this.input?.nativeElement.focus();
+            this.repeat(event, null, -1);
+            event.preventDefault();
+        }
     }
     onDownButtonMouseUp() {
-        this.clearTimer();
+        if (!this.disabled) {
+            this.clearTimer();
+        }
     }
     onDownButtonMouseLeave() {
-        this.clearTimer();
+        if (!this.disabled) {
+            this.clearTimer();
+        }
     }
     onDownButtonKeyUp() {
-        this.clearTimer();
+        if (!this.disabled) {
+            this.clearTimer();
+        }
     }
     onDownButtonKeyDown(event) {
         if (event.keyCode === 32 || event.keyCode === 13) {
@@ -534,38 +555,33 @@ class InputNumber {
         if (event.altKey) {
             event.preventDefault();
         }
-        switch (event.which) {
-            //up
-            case 38:
+        switch (event.code) {
+            case 'ArrowUp':
                 this.spin(event, 1);
                 event.preventDefault();
                 break;
-            //down
-            case 40:
+            case 'ArrowDown':
                 this.spin(event, -1);
                 event.preventDefault();
                 break;
-            //left
-            case 37:
+            case 'ArrowLeft':
                 if (!this.isNumeralChar(inputValue.charAt(selectionStart - 1))) {
                     event.preventDefault();
                 }
                 break;
-            //right
-            case 39:
+            case 'ArrowRight':
                 if (!this.isNumeralChar(inputValue.charAt(selectionStart))) {
                     event.preventDefault();
                 }
                 break;
-            //enter
-            case 13:
+            case 'Tab':
+            case 'Enter':
                 newValueStr = this.validateValue(this.parseValue(this.input.nativeElement.value));
                 this.input.nativeElement.value = this.formatValue(newValueStr);
                 this.input.nativeElement.setAttribute('aria-valuenow', newValueStr);
                 this.updateModel(event, newValueStr);
                 break;
-            //backspace
-            case 8: {
+            case 'Backspace': {
                 event.preventDefault();
                 if (selectionStart === selectionEnd) {
                     const deleteChar = inputValue.charAt(selectionStart - 1);
@@ -605,8 +621,7 @@ class InputNumber {
                 }
                 break;
             }
-            // del
-            case 46:
+            case 'Delete':
                 event.preventDefault();
                 if (selectionStart === selectionEnd) {
                     const deleteChar = inputValue.charAt(selectionStart);
@@ -645,6 +660,18 @@ class InputNumber {
                     this.updateValue(event, newValueStr, null, 'delete-range');
                 }
                 break;
+            case 'Home':
+                if (this.min) {
+                    this.updateModel(event, this.min);
+                    event.preventDefault();
+                }
+                break;
+            case 'End':
+                if (this.max) {
+                    this.updateModel(event, this.max);
+                    event.preventDefault();
+                }
+                break;
             default:
                 break;
         }
@@ -1022,10 +1049,10 @@ class InputNumber {
     onInputBlur(event) {
         this.focused = false;
         let newValue = this.validateValue(this.parseValue(this.input.nativeElement.value));
+        this.onBlur.emit(event);
         this.input.nativeElement.value = this.formatValue(newValue);
         this.input.nativeElement.setAttribute('aria-valuenow', newValue);
         this.updateModel(event, newValue);
-        this.onBlur.emit(event);
     }
     formattedValue() {
         const val = !this.value && !this.allowEmpty ? 0 : this.value;
@@ -1070,7 +1097,7 @@ class InputNumber {
         return this.numberFormat;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: InputNumber, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputNumber, selector: "p-inputNumber", inputs: { showButtons: "showButtons", format: "format", buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", title: "title", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", name: "name", required: "required", autocomplete: "autocomplete", min: "min", max: "max", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: "readonly", step: "step", allowEmpty: "allowEmpty", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: "showClear", disabled: "disabled" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused", "class.p-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "p-element p-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: InputNumber, selector: "p-inputNumber", inputs: { showButtons: "showButtons", format: "format", buttonLayout: "buttonLayout", inputId: "inputId", styleClass: "styleClass", style: "style", placeholder: "placeholder", size: "size", maxlength: "maxlength", tabindex: "tabindex", title: "title", ariaLabelledBy: "ariaLabelledBy", ariaLabel: "ariaLabel", ariaRequired: "ariaRequired", name: "name", required: "required", autocomplete: "autocomplete", min: "min", max: "max", incrementButtonClass: "incrementButtonClass", decrementButtonClass: "decrementButtonClass", incrementButtonIcon: "incrementButtonIcon", decrementButtonIcon: "decrementButtonIcon", readonly: "readonly", step: "step", allowEmpty: "allowEmpty", locale: "locale", localeMatcher: "localeMatcher", mode: "mode", currency: "currency", currencyDisplay: "currencyDisplay", useGrouping: "useGrouping", minFractionDigits: "minFractionDigits", maxFractionDigits: "maxFractionDigits", prefix: "prefix", suffix: "suffix", inputStyle: "inputStyle", inputStyleClass: "inputStyleClass", showClear: "showClear", disabled: "disabled" }, outputs: { onInput: "onInput", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onClear: "onClear" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused", "class.p-inputnumber-clearable": "showClear && buttonLayout != \"vertical\"" }, classAttribute: "p-element p-inputwrapper" }, providers: [INPUTNUMBER_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <span
             [ngClass]="{
                 'p-inputnumber p-component': true,
@@ -1080,29 +1107,36 @@ class InputNumber {
             }"
             [ngStyle]="style"
             [class]="styleClass"
+            [attr.data-pc-name]="'inputnumber'"
+            [attr.data-pc-section]="'root'"
         >
             <input
+                pInputText
                 #input
+                [attr.id]="inputId"
+                role="spinbutton"
                 [ngClass]="'p-inputnumber-input'"
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
-                pInputText
                 [value]="formattedValue()"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="value"
+                [disabled]="disabled"
+                [readonly]="readonly"
                 [attr.placeholder]="placeholder"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.title]="title"
-                [attr.id]="inputId"
                 [attr.size]="size"
                 [attr.name]="name"
                 [attr.autocomplete]="autocomplete"
                 [attr.maxlength]="maxlength"
                 [attr.tabindex]="tabindex"
-                [attr.aria-label]="ariaLabel"
                 [attr.aria-required]="ariaRequired"
-                [disabled]="disabled"
                 [attr.required]="required"
                 [attr.min]="min"
                 [attr.max]="max"
-                [readonly]="readonly"
                 inputmode="decimal"
                 (input)="onUserInput($event)"
                 (keydown)="onInputKeyDown($event)"
@@ -1111,15 +1145,15 @@ class InputNumber {
                 (click)="onInputClick()"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
+                [attr.data-pc-section]="'input'"
             />
-            <ng-container *ngIf="buttonLayout != 'vertical' && showClear && (value || value === 0)">
-                <TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" />
-                <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon">
+            <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
+                <TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+                <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
                     <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
-
-            <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'">
+            <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
                 <button
                     type="button"
                     pButton
@@ -1127,16 +1161,18 @@ class InputNumber {
                     class="p-button-icon-only"
                     [class]="incrementButtonClass"
                     [disabled]="disabled"
+                    tabindex="-1"
                     (mousedown)="onUpButtonMouseDown($event)"
                     (mouseup)="onUpButtonMouseUp()"
                     (mouseleave)="onUpButtonMouseLeave()"
                     (keydown)="onUpButtonKeyDown($event)"
                     (keyup)="onUpButtonKeyUp()"
-                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [attr.data-pc-section]="'incrementbutton'"
                 >
-                    <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon"></span>
+                    <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
                     <ng-container *ngIf="!incrementButtonIcon">
-                        <AngleUpIcon *ngIf="!incrementButtonIconTemplate" />
+                        <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                         <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
                     </ng-container>
                 </button>
@@ -1147,59 +1183,65 @@ class InputNumber {
                     class="p-button-icon-only"
                     [class]="decrementButtonClass"
                     [disabled]="disabled"
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
                     (mousedown)="onDownButtonMouseDown($event)"
                     (mouseup)="onDownButtonMouseUp()"
                     (mouseleave)="onDownButtonMouseLeave()"
                     (keydown)="onDownButtonKeyDown($event)"
                     (keyup)="onDownButtonKeyUp()"
-                    tabindex="-1"
+                    [attr.data-pc-section]="decrementbutton"
                 >
-                    <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon"></span>
+                    <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                     <ng-container *ngIf="!decrementButtonIcon">
-                        <AngleDownIcon *ngIf="!decrementButtonIconTemplate" />
+                        <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                         <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
                     </ng-container>
                 </button>
             </span>
             <button
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 pButton
                 [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
                 [class]="incrementButtonClass"
                 class="p-button-icon-only"
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 [disabled]="disabled"
+                tabindex="-1"
+                [attr.aria-hidden]="true"
                 (mousedown)="onUpButtonMouseDown($event)"
                 (mouseup)="onUpButtonMouseUp()"
                 (mouseleave)="onUpButtonMouseLeave()"
                 (keydown)="onUpButtonKeyDown($event)"
                 (keyup)="onUpButtonKeyUp()"
-                tabindex="-1"
+                [attr.data-pc-section]="'incrementbutton'"
             >
-                <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon"></span>
+                <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
                 <ng-container *ngIf="!incrementButtonIcon">
-                    <AngleUpIcon *ngIf="!incrementButtonIconTemplate" />
+                    <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
             <button
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 pButton
                 [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
                 class="p-button-icon-only"
                 [class]="decrementButtonClass"
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 [disabled]="disabled"
+                tabindex="-1"
+                [attr.aria-hidden]="true"
                 (mousedown)="onDownButtonMouseDown($event)"
                 (mouseup)="onDownButtonMouseUp()"
                 (mouseleave)="onDownButtonMouseLeave()"
                 (keydown)="onDownButtonKeyDown($event)"
                 (keyup)="onDownButtonKeyUp()"
-                tabindex="-1"
+                [attr.data-pc-section]="'decrementbutton'"
             >
-                <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon"></span>
+                <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                 <ng-container *ngIf="!decrementButtonIcon">
-                    <AngleDownIcon *ngIf="!decrementButtonIconTemplate" />
+                    <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
@@ -1218,29 +1260,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }"
             [ngStyle]="style"
             [class]="styleClass"
+            [attr.data-pc-name]="'inputnumber'"
+            [attr.data-pc-section]="'root'"
         >
             <input
+                pInputText
                 #input
+                [attr.id]="inputId"
+                role="spinbutton"
                 [ngClass]="'p-inputnumber-input'"
                 [ngStyle]="inputStyle"
                 [class]="inputStyleClass"
-                pInputText
                 [value]="formattedValue()"
+                [attr.aria-valuemin]="min"
+                [attr.aria-valuemax]="max"
+                [attr.aria-valuenow]="value"
+                [disabled]="disabled"
+                [readonly]="readonly"
                 [attr.placeholder]="placeholder"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
                 [attr.title]="title"
-                [attr.id]="inputId"
                 [attr.size]="size"
                 [attr.name]="name"
                 [attr.autocomplete]="autocomplete"
                 [attr.maxlength]="maxlength"
                 [attr.tabindex]="tabindex"
-                [attr.aria-label]="ariaLabel"
                 [attr.aria-required]="ariaRequired"
-                [disabled]="disabled"
                 [attr.required]="required"
                 [attr.min]="min"
                 [attr.max]="max"
-                [readonly]="readonly"
                 inputmode="decimal"
                 (input)="onUserInput($event)"
                 (keydown)="onInputKeyDown($event)"
@@ -1249,15 +1298,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 (click)="onInputClick()"
                 (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
+                [attr.data-pc-section]="'input'"
             />
-            <ng-container *ngIf="buttonLayout != 'vertical' && showClear && (value || value === 0)">
-                <TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" />
-                <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon">
+            <ng-container *ngIf="buttonLayout != 'vertical' && showClear && value">
+                <TimesIcon *ngIf="!clearIconTemplate" [ngClass]="'p-inputnumber-clear-icon'" (click)="clear()" [attr.data-pc-section]="'clearIcon'" />
+                <span *ngIf="clearIconTemplate" (click)="clear()" class="p-inputnumber-clear-icon" [attr.data-pc-section]="'clearIcon'">
                     <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
-
-            <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'">
+            <span class="p-inputnumber-button-group" *ngIf="showButtons && buttonLayout === 'stacked'" [attr.data-pc-section]="'buttonGroup'">
                 <button
                     type="button"
                     pButton
@@ -1265,16 +1314,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     class="p-button-icon-only"
                     [class]="incrementButtonClass"
                     [disabled]="disabled"
+                    tabindex="-1"
                     (mousedown)="onUpButtonMouseDown($event)"
                     (mouseup)="onUpButtonMouseUp()"
                     (mouseleave)="onUpButtonMouseLeave()"
                     (keydown)="onUpButtonKeyDown($event)"
                     (keyup)="onUpButtonKeyUp()"
-                    tabindex="-1"
+                    [attr.aria-hidden]="true"
+                    [attr.data-pc-section]="'incrementbutton'"
                 >
-                    <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon"></span>
+                    <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
                     <ng-container *ngIf="!incrementButtonIcon">
-                        <AngleUpIcon *ngIf="!incrementButtonIconTemplate" />
+                        <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                         <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
                     </ng-container>
                 </button>
@@ -1285,59 +1336,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     class="p-button-icon-only"
                     [class]="decrementButtonClass"
                     [disabled]="disabled"
+                    tabindex="-1"
+                    [attr.aria-hidden]="true"
                     (mousedown)="onDownButtonMouseDown($event)"
                     (mouseup)="onDownButtonMouseUp()"
                     (mouseleave)="onDownButtonMouseLeave()"
                     (keydown)="onDownButtonKeyDown($event)"
                     (keyup)="onDownButtonKeyUp()"
-                    tabindex="-1"
+                    [attr.data-pc-section]="decrementbutton"
                 >
-                    <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon"></span>
+                    <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                     <ng-container *ngIf="!decrementButtonIcon">
-                        <AngleDownIcon *ngIf="!decrementButtonIconTemplate" />
+                        <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                         <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
                     </ng-container>
                 </button>
             </span>
             <button
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 pButton
                 [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-up': true }"
                 [class]="incrementButtonClass"
                 class="p-button-icon-only"
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 [disabled]="disabled"
+                tabindex="-1"
+                [attr.aria-hidden]="true"
                 (mousedown)="onUpButtonMouseDown($event)"
                 (mouseup)="onUpButtonMouseUp()"
                 (mouseleave)="onUpButtonMouseLeave()"
                 (keydown)="onUpButtonKeyDown($event)"
                 (keyup)="onUpButtonKeyUp()"
-                tabindex="-1"
+                [attr.data-pc-section]="'incrementbutton'"
             >
-                <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon"></span>
+                <span *ngIf="incrementButtonIcon" [ngClass]="incrementButtonIcon" [attr.data-pc-section]="'incrementbuttonicon'"></span>
                 <ng-container *ngIf="!incrementButtonIcon">
-                    <AngleUpIcon *ngIf="!incrementButtonIconTemplate" />
+                    <AngleUpIcon *ngIf="!incrementButtonIconTemplate" [attr.data-pc-section]="'incrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="incrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
             <button
+                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 type="button"
                 pButton
                 [ngClass]="{ 'p-inputnumber-button p-inputnumber-button-down': true }"
                 class="p-button-icon-only"
                 [class]="decrementButtonClass"
-                *ngIf="showButtons && buttonLayout !== 'stacked'"
                 [disabled]="disabled"
+                tabindex="-1"
+                [attr.aria-hidden]="true"
                 (mousedown)="onDownButtonMouseDown($event)"
                 (mouseup)="onDownButtonMouseUp()"
                 (mouseleave)="onDownButtonMouseLeave()"
                 (keydown)="onDownButtonKeyDown($event)"
                 (keyup)="onDownButtonKeyUp()"
-                tabindex="-1"
+                [attr.data-pc-section]="'decrementbutton'"
             >
-                <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon"></span>
+                <span *ngIf="decrementButtonIcon" [ngClass]="decrementButtonIcon" [attr.data-pc-section]="'decrementbuttonicon'"></span>
                 <ng-container *ngIf="!decrementButtonIcon">
-                    <AngleDownIcon *ngIf="!decrementButtonIconTemplate" />
+                    <AngleDownIcon *ngIf="!decrementButtonIconTemplate" [attr.data-pc-section]="'decrementbuttonicon'" />
                     <ng-template *ngTemplateOutlet="decrementButtonIconTemplate"></ng-template>
                 </ng-container>
             </button>
@@ -1373,6 +1430,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], title: [{
                 type: Input
+            }], ariaLabelledBy: [{
+                type: Input
             }], ariaLabel: [{
                 type: Input
             }], ariaRequired: [{