[BUG] SWC Picker non contextual accessibilitv callout

[ragarwalll]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-picker

Library version

1.8.0

Expected behavior

Proving a field to provide a callout for accessibility.

Actual behavior

For the following code, the callout is Poster Canvas Size, <selected element> <sp-picker-label>. This, however, is misleading to the user because calling out "selected item" first doesn't make sense.

---

Find the StackBlitz here.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to link
2. Use Mac's VoiceOver or NVDA
3. Focus on the sp-picker
4. Put the headphones(optional) on & listen

Sample code or abstract reproduction which illustrates the problem

<sp-picker
  quiet
  id="template-picker"
  size="m"
  style="--mod-picker-spacing-label-to-picker-quiet":\"2px\""
  label="Canvas size"
  value="poster"
>
  <sp-menu-item value="instagram-square-post">Instagram</sp-menu-item>
  <sp-menu-item value="facebook-post">Facebook Post</sp-menu-item>
  <sp-menu-item value="flyer">Flyer</sp-menu-item>
  <sp-menu-item value="poster">Poster</sp-menu-item>
  <sp-menu-item value="greeting-card">Card</sp-menu-item>
  <sp-menu-item value="instagram-story">Instagram Story</sp-menu-item>
  <sp-menu-item value="youtube-thumbnail">Youtube Thumbnail</sp-menu-item>
  <sp-menu-item value="instagram-ad">Instagram Ad</sp-menu-item>
  <sp-menu-item value="facebook-ad">Facebook Ad</sp-menu-item>
</sp-picker>

Severity

SEV 4

Logs taken while reproducing problem

No response

Would you like to track this issue in Jira?

• Yes, please tell me the ticket number!

[najikahalsema]

Will be fixed by SWC-1044