fix(pending-state): correct reflection of aria in pending controller

.changeset/seven-nails-wave.md

@@ -0,0 +1,19 @@
+---
+'@spectrum-web-components/button': patch
+'@spectrum-web-components/reactive-controllers': patch
+---
+
+**Fixed** aria-label handling in button components and pending state controller.
+
+**Button component changes:**
+
+- Fixed timing of aria-label updates to occur after slot content changes are processed
+- Added `label` property support for programmatic aria-label control
+- Added comprehensive tests for aria-label behavior during content changes
+
+**PendingState controller changes:**
+
+- Improved aria-label caching logic to better handle dynamic label changes
+- Enhanced caching mechanism to preserve user-set aria-labels during pending states
+
+These changes ensure that aria-labels are properly managed and preserved across component state changes, improving accessibility for screen reader users.

packages/.eslintrc.json

@@ -1,100 +1,28 @@
 {
-    "root": true,
     "env": {
         "browser": true,
-        "node": false,
-        "es6": true
+        "es6": true,
+        "node": false
     },
-    "parser": "@typescript-eslint/parser",
-    "plugins": [
-        "@typescript-eslint",
-        "notice",
-        "@spectrum-web-components",
-        "import"
-    ],
     "extends": [
         "plugin:@typescript-eslint/recommended",
         "prettier",
         "plugin:lit-a11y/recommended"
     ],
-    "rules": {
-        "import/no-extraneous-dependencies": [
-            "error",
-            {
-                "devDependencies": false,
-                "optionalDependencies": false,
-                "peerDependencies": false
-            }
-        ],
-        "no-debugger": 2,
-        "no-console": [
-            "error",
-            {
-                "allow": ["warn", "error"]
-            }
-        ],
-        "@spectrum-web-components/prevent-argument-names": [
-            "error",
-            ["e", "ev", "evt", "err"]
-        ],
-        "@spectrum-web-components/document-active-element": ["error"],
-        "notice/notice": [
-            "error",
-            {
-                "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
-                "templateFile": "config/license.js"
-            }
-        ],
-        "@typescript-eslint/explicit-function-return-type": [
-            1,
-            {
-                "allowExpressions": true
-            }
-        ],
-        "sort-imports": [
-            "error",
-            {
-                "ignoreCase": true,
-                "ignoreDeclarationSort": true,
-                "ignoreMemberSort": false,
-                "allowSeparatedGroups": false
-            }
-        ],
-        "lit-a11y/click-events-have-key-events": [
-            "error",
-            {
-                "allowList": [
-                    "sp-button",
-                    "sp-action-button",
-                    "sp-checkbox",
-                    "sp-radio",
-                    "sp-switch",
-                    "sp-menu-item",
-                    "sp-clear-button",
-                    "sp-underlay"
-                ]
-            }
-        ],
-        "@typescript-eslint/no-unused-vars": [
-            "error",
-            {
-                "argsIgnorePattern": "^_"
-            }
-        ]
-    },
     "overrides": [
         {
             "files": [
                 "*.test.ts",
                 "*.stories.ts",
                 "**/benchmark/*.ts",
-                "**/test/*.ts"
+                "**/test/*.ts",
+                "**/stories/*.ts"
             ],
             "rules": {
                 "@spectrum-web-components/document-active-element": ["off"],
+                "import/no-extraneous-dependencies": ["off"],
                 "lit-a11y/no-autofocus": ["off"],
-                "lit-a11y/tabindex-no-positive": ["off"],
-                "import/no-extraneous-dependencies": ["off"]
+                "lit-a11y/tabindex-no-positive": ["off"]
             }
         },
         {
@@ -206,5 +134,78 @@
                 ]
             }
         }
-    ]
+    ],
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint",
+        "notice",
+        "@spectrum-web-components",
+        "import"
+    ],
+    "root": true,
+    "rules": {
+        "@spectrum-web-components/document-active-element": ["error"],
+        "@spectrum-web-components/prevent-argument-names": [
+            "error",
+            ["e", "ev", "evt", "err"]
+        ],
+        "@typescript-eslint/explicit-function-return-type": [
+            1,
+            {
+                "allowExpressions": true
+            }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "error",
+            {
+                "argsIgnorePattern": "^_"
+            }
+        ],
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": false,
+                "optionalDependencies": false,
+                "peerDependencies": false
+            }
+        ],
+        "lit-a11y/click-events-have-key-events": [
+            "error",
+            {
+                "allowList": [
+                    "sp-button",
+                    "sp-action-button",
+                    "sp-checkbox",
+                    "sp-radio",
+                    "sp-switch",
+                    "sp-menu-item",
+                    "sp-clear-button",
+                    "sp-underlay"
+                ]
+            }
+        ],
+        "no-console": [
+            "error",
+            {
+                "allow": ["warn", "error"]
+            }
+        ],
+        "no-debugger": 2,
+        "notice/notice": [
+            "error",
+            {
+                "mustMatch": "Copyright [0-9]{0,4} Adobe. All rights reserved.",
+                "templateFile": "config/license.js"
+            }
+        ],
+        "sort-imports": [
+            "error",
+            {
+                "allowSeparatedGroups": false,
+                "ignoreCase": true,
+                "ignoreDeclarationSort": true,
+                "ignoreMemberSort": false
+            }
+        ]
+    }
 }

packages/button/src/ButtonBase.ts

@@ -225,13 +225,7 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
         if (!this.hasAttribute('tabindex')) {
             this.setAttribute('tabindex', '0');
         }
-        if (changed.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
-        }
+
         this.manageAnchor();
         this.addEventListener('keydown', this.handleKeydown);
         this.addEventListener('keypress', this.handleKeypress);
@@ -243,6 +237,14 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.manageAnchor();
         }
 
+        if (changed.has('label')) {
+            if (this.label) {
+                this.setAttribute('aria-label', this.label);
+            } else {
+                this.removeAttribute('aria-label');
+            }
+        }
+
         if (this.anchorElement) {
             // Ensure the anchor element is not focusable directly via tab
             this.anchorElement.tabIndex = -1;
@@ -256,14 +258,4 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
             this.anchorElement.addEventListener('focus', this.proxyFocus);
         }
     }
-    protected override update(changes: PropertyValues): void {
-        super.update(changes);
-        if (changes.has('label')) {
-            if (this.label) {
-                this.setAttribute('aria-label', this.label);
-            } else {
-                this.removeAttribute('aria-label');
-            }
-        }
-    }
 }

packages/button/stories/index.ts

@@ -86,6 +86,17 @@ export const argTypes = {
             type: 'boolean',
         },
     },
+    label: {
+        name: 'label',
+        type: { name: 'string', required: false },
+        description: 'The label to apply to the aria-label of the button.',
+        table: {
+            type: { summary: 'string' },
+        },
+        control: {
+            type: 'text',
+        },
+    },
 };
 
 export const makeOverBackground =
@@ -122,6 +133,7 @@ export function renderButton(properties: Properties): TemplateResult {
             treatment=${ifDefined(properties.treatment)}
             variant=${ifDefined(properties.variant)}
             static-color=${ifDefined(properties.staticColor)}
+            label=${ifDefined(properties.label)}
         >
             ${properties.content || 'Click Me'}
         </sp-button>

packages/button/stories/template.ts

@@ -9,7 +9,6 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
 import { html, TemplateResult } from '@spectrum-web-components/base';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import {
@@ -30,6 +29,7 @@ export interface Properties {
     target?: '_blank' | '_parent' | '_self' | '_top';
     noWrap?: boolean;
     iconOnly?: boolean;
+    label?: string;
 }
 
 export const Template = ({

packages/button/test/button.test.ts

@@ -395,32 +395,62 @@ describe('Button', () => {
 
         it('manages aria-label from pending state', async () => {
             const el = await fixture<Button>(html`
-                <sp-button
-                    href="test_url"
-                    target="_blank"
-                    label="clickable"
-                    pending
-                >
+                <sp-button href="test_url" target="_blank" label="clickable">
                     Click me
                 </sp-button>
             `);
             await elementUpdated(el);
-            expect(el.getAttribute('aria-label')).to.equal('Pending');
+            expect(el.getAttribute('aria-label')).to.equal('clickable');
 
-            // button set to disabled while pending is true and the aria-label should be original
-            el.disabled = true;
+            // button set to pending and aria-label should update
+            el.pending = true;
             await elementUpdated(el);
-            expect(el.getAttribute('aria-label')).to.equal('clickable');
+            expect(el.pending).to.be.true;
+            expect(el.getAttribute('aria-label')).to.equal('Pending');
 
             // pending is removed and the aria-label should not change as the button is disabled
             el.pending = false;
             await elementUpdated(el);
             expect(el.getAttribute('aria-label')).to.equal('clickable');
+        });
+
+        it('updates aria-label when label changes', async () => {
+            const el = await fixture<Button>(html`
+                <sp-button label="Initial label">Button</sp-button>
+            `);
 
-            // button is enabled and the aria-label should not change
-            el.disabled = false;
             await elementUpdated(el);
-            expect(el.getAttribute('aria-label')).to.equal('clickable');
+            expect(el.getAttribute('aria-label')).to.equal('Initial label');
+
+            // Change the label
+            el.label = 'New Label';
+            await elementUpdated(el);
+
+            // The aria-label should also update
+            expect(el.getAttribute('aria-label')).to.equal('New Label');
+        });
+
+        it('preserves aria-label when slot content changes', async () => {
+            const el = await fixture<Button>(html`
+                <sp-button label="Test label">Initial Content</sp-button>
+            `);
+
+            await elementUpdated(el);
+            expect(el.getAttribute('aria-label')).to.equal('Test label');
+
+            // Change the slot content
+            el.textContent = 'Updated content';
+            await elementUpdated(el);
+
+            // The aria-label should still be preserved
+            expect(el.getAttribute('aria-label')).to.equal('Test label');
+
+            // Change slot content again
+            el.innerHTML = '<span>New content</span>';
+            await elementUpdated(el);
+
+            // The aria-label should still be preserved
+            expect(el.getAttribute('aria-label')).to.equal('Test label');
         });
 
         it('manages aria-label set from outside', async () => {

packages/picker/test/index.ts

@@ -2200,12 +2200,12 @@ export function runPickerTests(): void {
             };
 
             expect(
-                findAccessibilityNode<NamedNode>(
-                    snapshot,
-                    (node) =>
+                findAccessibilityNode<NamedNode>(snapshot, (node) => {
+                    return (
                         node.name ===
                         'Pending Choose your neighborhood Where do you live?'
-                )
+                    );
+                })
             ).to.not.be.null;
         });
     });