Merge branch 'main' into nikkimk/swc-1326-a11y-guides

Author: nikkimk

.changeset/fix-picker-overlay-scroll.md

@@ -0,0 +1,8 @@
+---
+'@spectrum-web-components/overlay': patch
+'@spectrum-web-components/picker': patch
+---
+
+**Fixed** issue where picker menus inside overlays could not scroll to the bottom after selecting an item and reopening. The problem was caused by the overlay's placement calculation happening before the menu fully rendered, resulting in incorrect height measurements.
+
+This fix ensures picker menus maintain proper scrollable height when reopened, regardless of the selected item's position.

.changeset/real-corners-cross.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/tooltip': patch
+---
+
+**Fixed**: Fixed an issue with text overflow in `sp-tooltip`: long, unbroken words were not wrapping and overflowed the container.

1st-gen/packages/action-menu/src/ActionMenu.ts

@@ -148,19 +148,21 @@ export class ActionMenu extends ObserveSlotPresence(
     }
 
     protected override warnNoLabel(): void {
-        window.__swc.warn(
-            this,
-            `<${this.localName}> needs one of the following to be accessible:`,
-            'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',
-            {
-                type: 'accessibility',
-                issues: [
-                    `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
-                    'value supplied to the "label" attribute, which will be displayed visually as placeholder text',
-                    'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',
-                    'which will also be displayed visually as placeholder text.',
-                ],
-            }
-        );
+        if (window.__swc?.DEBUG) {
+            window.__swc.warn(
+                this,
+                `<${this.localName}> needs one of the following to be accessible:`,
+                'https://opensource.adobe.com/spectrum-web-components/components/action-menu/#accessibility',
+                {
+                    type: 'accessibility',
+                    issues: [
+                        `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
+                        'value supplied to the "label" attribute, which will be displayed visually as placeholder text',
+                        'text content supplied in a <span> with slot="label", or, text content supplied in a <span> with slot="label-only"',
+                        'which will also be displayed visually as placeholder text.',
+                    ],
+                }
+            );
+        }
     }
 }

1st-gen/packages/menu/src/Menu.ts

@@ -103,30 +103,30 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
 
     /**
      * Minimum vertical movement (in pixels) required to trigger scrolling detection.
-     * 
+     *
      * This threshold is consistent with other components in the design system:
      * - Card component uses 10px for click vs. drag detection
      * - Menu component uses 10px for scroll vs. selection detection
-     * 
+     *
      * The 10px threshold is carefully chosen to:
      * - Allow for natural finger tremor and accidental touches
      * - Distinguish between intentional scroll gestures and taps
      * - Provide consistent behavior across the platform
-     * 
+     *
      * @see {@link packages/card/src/Card.ts} for similar threshold usage
      */
     private scrollThreshold = 10; // pixels
 
     /**
      * Maximum time (in milliseconds) for a movement to be considered scrolling.
-     * 
+     *
      * This threshold is consistent with other timing values in the design system:
      * - Longpress duration: 300ms (ActionButton, LongpressController)
      * - Scroll detection: 300ms (Menu component)
-     * 
+     *
      * Quick movements within this timeframe are likely intentional scrolls,
      * while slower movements are more likely taps or selections.
-     * 
+     *
      * @see {@link packages/action-button/src/ActionButton.ts} for longpress duration
      * @see {@link packages/overlay/src/LongpressController.ts} for longpress duration
      */
@@ -576,7 +576,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
      * Resets the scrolling state after a short delay (100ms) to allow for
      * any final touch events to be processed. This delay prevents immediate
      * state changes that could interfere with the selection logic.
-     * 
+     *
      * The 100ms delay is consistent with the design system's approach to
      * touch event handling and ensures that any final touch events or
      * gesture recognition can complete before the scrolling state is reset.
@@ -720,7 +720,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     ): MenuItem {
         const diff = before ? -1 : 1;
         const elements = this.rovingTabindexController?.elements || [];
-        const index = !!menuItem ? elements.indexOf(menuItem) : -1;
+        const index = menuItem ? elements.indexOf(menuItem) : -1;
         let newIndex = Math.min(Math.max(0, index + diff), elements.length - 1);
         while (
             !this.isFocusableElement(elements[newIndex]) &&
@@ -729,7 +729,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
         ) {
             newIndex += diff;
         }
-        return !!this.isFocusableElement(elements[newIndex])
+        return this.isFocusableElement(elements[newIndex])
             ? (elements[newIndex] as MenuItem)
             : menuItem || elements[0];
     }
@@ -1010,7 +1010,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
                 }
             });
         }
-        if (!!this._updateFocus) {
+        if (this._updateFocus) {
             this.rovingTabindexController?.focusOnItem(this._updateFocus);
             this._updateFocus = undefined;
         }

1st-gen/packages/overlay/src/PlacementController.ts

@@ -24,6 +24,7 @@ import {
     shift,
     size,
 } from '@floating-ui/dom';
+import { isWebKit } from '@spectrum-web-components/shared';
 import type { VirtualTrigger } from './VirtualTrigger.js';
 import type { OpenableElement } from './overlay-types.js';
 import type { Overlay } from './Overlay.js';
@@ -278,6 +279,28 @@ export class PlacementController implements ReactiveController {
         // Wait for document fonts to be ready before computing placement.
         await (document.fonts ? document.fonts.ready : Promise.resolve());
 
+        // Safari/iOS-specific fix: Add small delay for picker menus to allow scrollIntoView to complete
+        // Check if this is a submenu overlay (slot="submenu")
+        // Submenus need immediate positioning for hover responsiveness
+        const isSubmenu = Array.from(this.host.elements).some(
+            (el) => el.getAttribute?.('slot') === 'submenu'
+        );
+
+        // Safari-specific timing fix covered by cross-browser integration tests
+        /* c8 ignore start */
+        if (isWebKit() && !isSubmenu) {
+            const hasMenu = Array.from(this.host.elements).some(
+                (el) =>
+                    el.tagName === 'SP-MENU' || el.querySelector?.('sp-menu')
+            );
+
+            if (hasMenu) {
+                // Wait 1 frame for Safari layout to settle after scrollIntoView
+                await new Promise((resolve) => requestAnimationFrame(resolve));
+            }
+        }
+        /* c8 ignore stop */
+
         // Determine the flip middleware based on the type of trigger element.
         const flipMiddleware = !(options.trigger instanceof HTMLElement)
             ? flip({

1st-gen/packages/overlay/src/slottable-request-directive.ts

@@ -74,7 +74,7 @@ export class SlottableRequestDirective extends AsyncDirective {
             { signal }
         );
 
-        if (window.__swc.DEBUG) {
+        if (window.__swc?.DEBUG) {
             window.__swc.warn(
                 undefined,
                 `⚠️  WARNING ⚠️ : The Overlay Trigger Directive is experimental and there is no guarantees behind its usage in an application!! Its API and presence within the library could be changed at anytime. See "sp-overlay" or "Overlay.open()" for a stable API for overlaying content on your application.`,

1st-gen/packages/overlay/src/slottable-request-event.ts

@@ -23,7 +23,7 @@ export class SlottableRequestEvent extends Event {
         this.name = name;
         this.data = data;
         this.slotName = key !== undefined ? `${name}.${key}` : name;
-        if (window.__swc.DEBUG) {
+        if (window.__swc?.DEBUG) {
             window.__swc.warn(
                 undefined,
                 `⚠️  WARNING ⚠️ : \`slottable-request\` events are experimental and there is no guarantees behind usage of them in an application!! Their shape and presence within the library could be changed at anytime.

1st-gen/packages/overlay/test/overlay.test.ts

@@ -35,6 +35,8 @@ import {
 import { render, TemplateResult } from '@spectrum-web-components/base';
 import { Button } from '@spectrum-web-components/button';
 import { Menu } from '@spectrum-web-components/menu';
+import '@spectrum-web-components/menu/sp-menu.js';
+import '@spectrum-web-components/menu/sp-menu-item.js';
 import { Theme } from '@spectrum-web-components/theme';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
@@ -54,7 +56,7 @@ import {
     clickAndHoverTarget,
     definedOverlayElement,
     virtualElement,
-} from '../stories/overlay.stories';
+} from '../stories/overlay.stories.js';
 // import { isWebKit } from '@spectrum-web-components/shared';
 
 async function styledFixture<T extends Element>(
@@ -476,6 +478,7 @@ describe('Overlays', () => {
 
         const initial = el.getBoundingClientRect();
         trigger.updateBoundingClientRect(500, 500);
+        // Wait for placement computation to complete
         await nextFrame();
         await nextFrame();
         const final = el.getBoundingClientRect();

1st-gen/packages/picker/src/Picker.ts

@@ -556,19 +556,21 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
     }
 
     protected warnNoLabel(): void {
-        window.__swc.warn(
-            this,
-            `<${this.localName}> needs one of the following to be accessible:`,
-            'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',
-            {
-                type: 'accessibility',
-                issues: [
-                    `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
-                    'value supplied to the "label" attribute, which will be displayed visually as placeholder text, or',
-                    'text content supplied in a <span> with slot="label", which will also be displayed visually as placeholder text.',
-                ],
-            }
-        );
+        if (window.__swc?.DEBUG) {
+            window.__swc.warn(
+                this,
+                `<${this.localName}> needs one of the following to be accessible:`,
+                'https://opensource.adobe.com/spectrum-web-components/components/picker/#accessibility',
+                {
+                    type: 'accessibility',
+                    issues: [
+                        `an <sp-field-label> element with a \`for\` attribute referencing the \`id\` of the \`<${this.localName}>\`, or`,
+                        'value supplied to the "label" attribute, which will be displayed visually as placeholder text, or',
+                        'text content supplied in a <span> with slot="label", which will also be displayed visually as placeholder text.',
+                    ],
+                }
+            );
+        }
     }
 
     protected renderOverlay(menu: TemplateResult): TemplateResult {
@@ -1000,7 +1002,7 @@ export class Picker extends PickerBase {
         );
         if (!this.value || nextItem !== this.selectedItem) {
             // updates picker text but does not fire change event until action is completed
-            if (!!nextItem) this.setValueFromItem(nextItem as MenuItem);
+            if (nextItem) this.setValueFromItem(nextItem as MenuItem);
         }
     };
 }