From 65ab98c0676ead2fcbeb2df54322e52965a34f82 Mon Sep 17 00:00:00 2001
From: Tarun Tomar <ttomar@taruns-mbp.corp.adobe.com>
Date: Wed, 19 Jul 2023 11:12:13 +0530
Subject: [PATCH 1/5] fix(number-field): update button label text

---
 packages/number-field/src/NumberField.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
index 02b34734e8c..b896912ee8d 100644
--- a/packages/number-field/src/NumberField.ts
+++ b/packages/number-field/src/NumberField.ts
@@ -19,6 +19,7 @@ import {
 import {
     property,
     query,
+    state,
 } from '@spectrum-web-components/base/src/decorators.js';
 import {
     LanguageResolutionController,
@@ -100,6 +101,9 @@ export class NumberField extends TextfieldBase {
         return [...super.styles, styles, chevronStyles];
     }
 
+    @state()
+    appliedLabel?: string;
+
     @query('.buttons')
     private buttons!: HTMLDivElement;
 
@@ -549,6 +553,10 @@ export class NumberField extends TextfieldBase {
         return this.focused ? this._numberParserFocused : this._numberParser;
     }
 
+    applyFocusElementLabel = (value?: string): void => {
+        this.appliedLabel = value;
+    };
+
     private _numberParser?: NumberParser;
     private _numberParserFocused?: NumberParser;
 
@@ -587,7 +595,8 @@ export class NumberField extends TextfieldBase {
                       >
                           <sp-action-button
                               class="step-up"
-                              label="Increment"
+                              aria-describedby=${this.helpTextId}
+                              label=${'Increase ' + this.appliedLabel}
                               tabindex="-1"
                               ?focused=${this.focused}
                               ?disabled=${this.disabled ||
@@ -600,7 +609,8 @@ export class NumberField extends TextfieldBase {
                           </sp-action-button>
                           <sp-action-button
                               class="step-down"
-                              label="Decrement"
+                              aria-describedby=${this.helpTextId}
+                              label=${'Decrease ' + this.appliedLabel}
                               tabindex="-1"
                               ?focused=${this.focused}
                               ?disabled=${this.disabled ||

From 986c109270823fd57efe69c53be44505bd30b689 Mon Sep 17 00:00:00 2001
From: Tarun Tomar <ttomar@taruns-mbp.corp.adobe.com>
Date: Wed, 19 Jul 2023 18:04:19 +0530
Subject: [PATCH 2/5] fix(field-label): updated conditions to apply target
 labels on focusable elements

---
 packages/field-label/src/FieldLabel.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts
index 5efc2e5021c..e0f159fa642 100644
--- a/packages/field-label/src/FieldLabel.ts
+++ b/packages/field-label/src/FieldLabel.ts
@@ -101,9 +101,11 @@ export class FieldLabel extends SizedMixin(SpectrumElement) {
             const applyLabel = this.target.applyFocusElementLabel;
             const focusable = this.target.focusElement || this.target;
             const targetParent = focusable.getRootNode() as HTMLElement;
+
             if (typeof applyLabel !== 'undefined') {
                 applyLabel(this.labelText);
-            } else if (targetParent === (this.getRootNode() as HTMLElement)) {
+            }
+            if (targetParent === (this.getRootNode() as HTMLElement)) {
                 const conditionAttribute = target
                     ? conditionAttributeWithId
                     : conditionAttributeWithoutId;

From 4b31501f20f58c96122fb3924abc06bffb8b170d Mon Sep 17 00:00:00 2001
From: Tarun Tomar <ttomar@taruns-mbp.corp.adobe.com>
Date: Thu, 20 Jul 2023 11:32:43 +0530
Subject: [PATCH 3/5] fix(textfield): update textfield to use appliedlabel
 incase of no focuselementlabel

---
 packages/field-label/src/FieldLabel.ts   |  3 +--
 packages/number-field/src/NumberField.ts |  2 +-
 packages/textfield/src/Textfield.ts      | 11 +++++++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts
index e0f159fa642..1543ba438b0 100644
--- a/packages/field-label/src/FieldLabel.ts
+++ b/packages/field-label/src/FieldLabel.ts
@@ -104,8 +104,7 @@ export class FieldLabel extends SizedMixin(SpectrumElement) {
 
             if (typeof applyLabel !== 'undefined') {
                 applyLabel(this.labelText);
-            }
-            if (targetParent === (this.getRootNode() as HTMLElement)) {
+            } else if (targetParent === (this.getRootNode() as HTMLElement)) {
                 const conditionAttribute = target
                     ? conditionAttributeWithId
                     : conditionAttributeWithoutId;
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
index b896912ee8d..a4c9c0e3fd9 100644
--- a/packages/number-field/src/NumberField.ts
+++ b/packages/number-field/src/NumberField.ts
@@ -102,7 +102,7 @@ export class NumberField extends TextfieldBase {
     }
 
     @state()
-    appliedLabel?: string;
+    override appliedLabel?: string;
 
     @query('.buttons')
     private buttons!: HTMLDivElement;
diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
index c01dac090af..e64fa7c1873 100644
--- a/packages/textfield/src/Textfield.ts
+++ b/packages/textfield/src/Textfield.ts
@@ -52,6 +52,9 @@ export class TextfieldBase extends ManageHelpText(
         return [textfieldStyles, checkmarkStyles];
     }
 
+    @state()
+    appliedLabel?: string;
+
     @property({ attribute: 'allowed-keys' })
     allowedKeys = '';
 
@@ -235,7 +238,9 @@ export class TextfieldBase extends ManageHelpText(
             <!-- @ts-ignore -->
             <textarea
                 aria-describedby=${this.helpTextId}
-                aria-label=${this.label || this.placeholder}
+                aria-label=${this.label ||
+                this.appliedLabel ||
+                this.placeholder}
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 class="input"
                 maxlength=${ifDefined(
@@ -266,7 +271,9 @@ export class TextfieldBase extends ManageHelpText(
             <input
                 type=${this.type}
                 aria-describedby=${this.helpTextId}
-                aria-label=${this.label || this.placeholder}
+                aria-label=${this.label ||
+                this.appliedLabel ||
+                this.placeholder}
                 aria-invalid=${ifDefined(this.invalid || undefined)}
                 class="input"
                 maxlength=${ifDefined(

From 9fc5f3e9ff6dd520b597f9e2661c11f7313dca20 Mon Sep 17 00:00:00 2001
From: Tarun Tomar <ttomar@taruns-mbp.corp.adobe.com>
Date: Fri, 21 Jul 2023 14:08:06 +0530
Subject: [PATCH 4/5] fix(number-field): added test to check labels on buttons

---
 .../number-field/test/number-field.test.ts    | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
index 3df4d8ecade..df97459b83b 100644
--- a/packages/number-field/test/number-field.test.ts
+++ b/packages/number-field/test/number-field.test.ts
@@ -15,6 +15,7 @@ import {
     aTimeout,
     elementUpdated,
     expect,
+    fixture,
     nextFrame,
     oneEvent,
 } from '@open-wc/testing';
@@ -36,7 +37,12 @@ import {
     indeterminatePlaceholder,
     NumberField,
 } from '@spectrum-web-components/number-field';
-import { sendKeys, setUserAgent } from '@web/test-runner-commands';
+import {
+    a11ySnapshot,
+    findAccessibilityNode,
+    sendKeys,
+    setUserAgent,
+} from '@web/test-runner-commands';
 import { spy } from 'sinon';
 import { clickBySelector, getElFrom } from './helpers.js';
 import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
@@ -1260,4 +1266,40 @@ describe('NumberField', () => {
             await clickBySelector(el, '.step-down');
         });
     });
+    describe('accessibility model', () => {
+        it('buttons have proper label', async () => {
+            await fixture<HTMLDivElement>(html`
+                <div>
+                    ${Default({
+                        onChange: () => {
+                            return;
+                        },
+                    })}
+                </div>
+            `);
+
+            type NamedNode = { name: string };
+            const snapshot = (await a11ySnapshot(
+                {}
+            )) as unknown as NamedNode & {
+                children: NamedNode[];
+            };
+
+            expect(
+                findAccessibilityNode<NamedNode>(
+                    snapshot,
+                    (node) => node.name === 'Increase Enter a number'
+                ),
+                '`name` is the label text'
+            ).to.not.be.null;
+
+            expect(
+                findAccessibilityNode<NamedNode>(
+                    snapshot,
+                    (node) => node.name === 'Decrease Enter a number'
+                ),
+                '`name` is the label text'
+            ).to.not.be.null;
+        });
+    });
 });

From 118da9c12cdae32ecf66dcb1ce2a770354d30013 Mon Sep 17 00:00:00 2001
From: Tarun Tomar <ttomar@taruns-mbp.corp.adobe.com>
Date: Fri, 21 Jul 2023 14:11:31 +0530
Subject: [PATCH 5/5] fix(number-field): fixed code styling issues

---
 packages/field-label/src/FieldLabel.ts   | 1 -
 packages/number-field/src/NumberField.ts | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/packages/field-label/src/FieldLabel.ts b/packages/field-label/src/FieldLabel.ts
index 1543ba438b0..5efc2e5021c 100644
--- a/packages/field-label/src/FieldLabel.ts
+++ b/packages/field-label/src/FieldLabel.ts
@@ -101,7 +101,6 @@ export class FieldLabel extends SizedMixin(SpectrumElement) {
             const applyLabel = this.target.applyFocusElementLabel;
             const focusable = this.target.focusElement || this.target;
             const targetParent = focusable.getRootNode() as HTMLElement;
-
             if (typeof applyLabel !== 'undefined') {
                 applyLabel(this.labelText);
             } else if (targetParent === (this.getRootNode() as HTMLElement)) {
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
index a4c9c0e3fd9..7c5ef9de2f2 100644
--- a/packages/number-field/src/NumberField.ts
+++ b/packages/number-field/src/NumberField.ts
@@ -19,7 +19,6 @@ import {
 import {
     property,
     query,
-    state,
 } from '@spectrum-web-components/base/src/decorators.js';
 import {
     LanguageResolutionController,
@@ -101,9 +100,6 @@ export class NumberField extends TextfieldBase {
         return [...super.styles, styles, chevronStyles];
     }
 
-    @state()
-    override appliedLabel?: string;
-
     @query('.buttons')
     private buttons!: HTMLDivElement;