fix(picker): added helptext component under same shadow root for screen reader

packages/picker/README.md

@@ -627,11 +627,11 @@ Use [`<sp-help-text>`](../help-text/) to add help text and error text:
     <sp-menu-item>Phone</sp-menu-item>
     <sp-menu-item>Text</sp-menu-item>
     <sp-menu-item>Email</sp-menu-item>
+    <sp-help-text id="help-text" slot="help-text">
+        Choose the best way to contact you in case there's an issue with your
+        account.
+    </sp-help-text>
 </sp-picker>
-<sp-help-text id="help-text">
-    Choose the best way to contact you in case there's an issue with your
-    account.
-</sp-help-text>
 ```
 
 </sp-tab-panel>
@@ -652,10 +652,10 @@ Use [`<sp-help-text>`](../help-text/) to add help text and error text:
     <sp-menu-item>Phone</sp-menu-item>
     <sp-menu-item>Text</sp-menu-item>
     <sp-menu-item>Email</sp-menu-item>
+    <sp-help-text id="error-help-text" variant="negative" slot="help-text">
+        Select a contact method.
+    </sp-help-text>
 </sp-picker>
-<sp-help-text id="error-help-text" variant="negative">
-    Select a contact method.
-</sp-help-text>
 ```
 
 </sp-tab-panel>

packages/picker/src/Picker.ts

@@ -61,6 +61,7 @@ import type { FieldLabel } from '@spectrum-web-components/field-label';
 import { DesktopController } from './DesktopController.js';
 import { MobileController } from './MobileController.js';
 import { strategies } from './strategies.js';
+import { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';
 
 const chevronClass = {
     s: 'spectrum-UIIcon-ChevronDown75',
@@ -80,9 +81,11 @@ export const DESCRIPTION_ID = 'option-picker';
  * @fires change - Announces that the `value` of the element has changed
  * @fires sp-opened - Announces that the overlay has been opened
  */
-export class PickerBase extends SizedMixin(SpectrumElement, {
-    noDefaultSize: true,
-}) {
+export class PickerBase extends ManageHelpText(
+    SizedMixin(SpectrumElement, {
+        noDefaultSize: true,
+    })
+) {
     static override shadowRootOptions = {
         ...SpectrumElement.shadowRootOptions,
         delegatesFocus: true,
@@ -574,7 +577,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
         return html`
             <button
                 aria-controls=${ifDefined(this.open ? 'menu' : undefined)}
-                aria-describedby="tooltip ${DESCRIPTION_ID}"
+                aria-describedby="${this.helpTextId} tooltip"
                 aria-expanded=${this.open ? 'true' : 'false'}
                 aria-haspopup="true"
                 aria-labelledby="loader icon label applied-label"
@@ -594,6 +597,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
             >
                 ${this.buttonContent}
             </button>
+            ${this.renderHelpText(this.invalid)}
             <slot
                 aria-hidden="true"
                 name="tooltip"
@@ -720,6 +724,7 @@ export class PickerBase extends SizedMixin(SpectrumElement, {
             >
                 ${accessibleMenu}
             </sp-popover>
+            ${this.renderHelpText(this.invalid)}
         `;
     }
 

packages/picker/src/picker.css

@@ -14,6 +14,7 @@ governing permissions and limitations under the License.
 @import url('./picker-overrides.css');
 
 :host {
+    flex-wrap: wrap;
     display: inline-flex;
     vertical-align: top;
 

packages/picker/stories/picker.stories.ts

@@ -29,6 +29,7 @@ import { areIconsPresent, isOverlayOpen } from '../../overlay/stories/index.js';
 import { argTypes } from './args.js';
 import { states } from './states.js';
 import { handleChange, StoryArgs, Template } from './template.js';
+import '@spectrum-web-components/help-text/sp-help-text.js';
 
 export default {
     title: 'Picker',
@@ -790,3 +791,14 @@ export const BackgroundClickTest = (): TemplateResult => {
 BackgroundClickTest.swc_vrt = {
     skip: true,
 };
+export const withHelpText = (): TemplateResult => html`
+    <sp-field-label for="picker-help-text">Choose an option</sp-field-label>
+    <sp-picker id="picker-help-text">
+        <sp-menu-item value="option-1">Option 1</sp-menu-item>
+        <sp-menu-item value="option-2">Option 2</sp-menu-item>
+        <sp-menu-item value="option-3">Option 3</sp-menu-item>
+        <sp-help-text slot="help-text">
+            Select an option from the dropdown menu.
+        </sp-help-text>
+    </sp-picker>
+`;