fix(number-field): update button label to use number-field-labels as …

…part of the text (#3474) * fix(number-field): update button label text * fix(field-label): updated conditions to apply target labels on focusable elements * fix(textfield): update textfield to use appliedlabel incase of no focuselementlabel * fix(number-field): added test to check labels on buttons * fix(number-field): fixed code styling issues --------- Co-authored-by: Tarun Tomar <ttomar@taruns-mbp.corp.adobe.com>
adobe · Jul 21, 2023 · b92daf2 · b92daf2
1 parent 3dbda9d
commit b92daf2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -549,6 +549,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 +591,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 +605,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 ||

diff --git 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;
+        });
+    });
 });
diff --git 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(