feat(field-label): added and implemented field-label mixin (#5799)

* feat(label): init field label mixin

feat(label): init field label mixin

* feat(textfield): updated textfiled docs to use label mixin

* feat(field-label): added mixin to package exports

* feat(field-label): added optional slot name for rendering label slot

* docs(textfield): implemented label mixin in stories

* test(textfield): added test for slotted label

* feat(textfield): added default slot observer for label changes

* test(textfield): added tests for slotted label

* docs(number-field): updated number field docs based on text field label changes

* docs(number-field): updated stories with slotted label

* docs(color-field): updated docs with slotted label

* feat(field-label): updated interface to include optional slot name for label

* feat(combobox): added label slot to combobox

* docs(combobox): added slotted label to docs

* test(combobox): updates tests with slotted label

* fix(combobox): fixed combobox field id for label

* feat(field-label): added label slot change handler to mixin

* feat(combobox): added slot change handlers

* feat(field-label): hide field label if not used

* feat(textfield): use field label mixin to observe slot

* feat(combobox): use field label mixin to observe slot

* feat(combobox): added placeholder

* fix(textfield): fixed issue with detecting slot content

* fix(field-label): fixed issue with slot content detection in text field

* test(textfield): removed unneccessary id attribute

* fix(fieldl-label): fixed mixin to allow slot naming

* feat(combobox): updated combobox, stories and tests for field label mixin

* fix(field-label): corrected linting issues

* fix(menu): MenuItem focus stealing from input elements on mouseover (#5732)

* fix(menu): added check to find focused element within root context

* fix(menu): added story

* fix(menu): added test

* chore(menu): added changeset

* fix(menu): added global const for component input pattern

* fix(menu): remove delimiter from the regexp constructor

* chore: skipped prod and vrt tests on the new story

* chore: fix tests helpers

* fix: check for cross root boundary

* fix: code comments

---------

Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>

* fix(field-label): made field id optional for picker

* fix(field-label): made field id optional for picker

* feat(picker): added field label mixin to pciker and picker stories

* fix(textfiled): fixed element name in warning

* fix(combobox): fixed element name in warning

* docs(picker): updated stories

* feat(picker): added field label mizin to picker without affecting pickerBase

* docs(textfield): documented default label slot

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* feat(picker): reverting changes until picker is refactored

* docs(textfield): updated docs with label examples

* docs(textfield): fixed issue with tabs

* test(textfield): updated test warning text to match revised warning text

* docs(combobox): added label and placeholder sections to docs

* docs(textfield): changed tabs label

* docs(number-field): updated docs with a label section

* chore(changeset): added changsets

* docs(field-label): added field-label-mixin docs

* Apply suggestion from @nikkimk

* feat(picker): revert changes

* feat(picker): revert changes

* chore: updated changesets

* docs(color-field): added label docs

* chore: updated changesets

* docs(combobox): fixed typo

Co-authored-by: Casey Eickhoff <[email protected]>

* docs(field-label): added JS Docs to mixin

* chore: linting fixes

* docs(combobox): fixed typo

Co-authored-by: Casey Eickhoff <[email protected]>

* chore: dropped changeset

* docs(color-field): fixed typo

Co-authored-by: Marissa Huysentruyt <[email protected]>

* chore(combobox): fixed typo

* docs(combobox): added side-aligned to story

* docs(combobox): fixed typo

Co-authored-by: Marissa Huysentruyt <[email protected]>

* docs(combobox): fixed typo

Co-authored-by: Marissa Huysentruyt <[email protected]>

* docs(field-label): added links to mixin docs

* docs(field-label): added code type in mixin docs

Co-authored-by: Marissa Huysentruyt <[email protected]>

* docs(field-label): added code type in mixin docs

Co-authored-by: Marissa Huysentruyt <[email protected]>

* fix(textfield): simiplified styles getter

* fix(textfield): simplified attribute

Co-authored-by: Rúben Carvalho <[email protected]>

* fix(textfield): simplified attribute

* docs(field-label): added more detail to mixin docs

Co-authored-by: Rúben Carvalho <[email protected]>

* docs(field-label): added more detail to field label mixin docs

Co-authored-by: Rúben Carvalho <[email protected]>

* fix(field-label): fixed inherited styles in mixin

Co-authored-by: Rúben Carvalho <[email protected]>

* fix(field-label): set side-aligned property to optional

Co-authored-by: Rúben Carvalho <[email protected]>

* fix(field-label): added override to styles getter

Co-authored-by: Rúben Carvalho <[email protected]>

* fix(field-label): field id should be required

* fix(field-label): reverted styles changes to mixin

* fix(textfield): fixed styles array

* fix(textfield): ensure super styles are CSSResultArray

---------

Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Casey Eickhoff <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>

Author: 8 people

.changeset/four-suits-design.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/number-field': minor
+---
+
+**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="number">Label</sp-field-label><sp-number-field id="number"></sp-number-field>` / After: `<sp-number-field>Label</sp-number-field>`)

.changeset/funny-dingos-teach.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/field-label': minor
+---
+
+**Added**: field label mixin to insert a label in a component's shadow DOM to resolve cross-root ARIA issues (`export class FormField extends FieldLabelMixin(SpectrumElement, 'label')` to apply mixin with a `label` slot to a class and `this.renderFieldLabel('field_id')` to render a field label for an element with `id="field_id"`)

.changeset/six-dragons-pump.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/combobox': minor
+---
+
+**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="combo">Label</sp-field-label><sp-combobox id="combo"></sp-combobox>` / After: `<sp-combobox><span slot="field-label">Label</span></sp-combobox>`)

.changeset/solid-streets-sip.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/textfield': minor
+---
+
+**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="text">Label</sp-field-label><sp-textfield id="text"></sp-textfield>` / After: `<sp-textfield>Label</sp-textfield>`)

.changeset/thick-towns-hammer.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/color-field': minor
+---
+
+**Added**: slotted visible label to resolve cross-root ARIA issues (Before: `<sp-field-label for="color">Label</sp-field-label><sp-color-field id="color"></sp-color-field>` / After: `<sp-color-field>Label</sp-color-field>`)

1st-gen/packages/color-field/README.md

@@ -27,15 +27,39 @@ import { ColorField } from '@spectrum-web-components/color-field';
 
 The color field consists of several key parts:
 
+- **Label**: Visual or visually hidden text that describes the color field to the user
 - **Input field**: The main text input area where users can type color values
 - **Color handle**: An optional visual indicator showing the current color (when `view-color` attribute is enabled)
 - **Validation feedback**: Visual indicators for valid and invalid color inputs
 - **Size variations**: Different size options to match your design requirements
 
 ```html
-<sp-color-field value="#ffff00"></sp-color-field>
+<sp-color-field value="#ffff00">Background color</sp-color-field>
 ```
 
+#### Label
+
+A color field must have a label in order to be accessible. A label can be provided either via the default slot, or via the `label` attribute, for a hidden label that can be read by assistive technology. If no label is provided, the component will have a visually hidden label with the text `color`.
+
+<sp-tabs selected="slotted" auto label="Labels">
+<sp-tab value="slotted">Visible slotted label</sp-tab>
+<sp-tab-panel value="slotted">
+
+```html
+<sp-color-field value="#000000">Text color</sp-color-field>
+```
+
+</sp-tab-panel>
+<sp-tab value="attribute">Visually hidden label attribute</sp-tab>
+<sp-tab-panel value="attribute">
+
+```html
+<sp-color-field value="#000000" label="Text color"></sp-color-field>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
 ### Options
 
 #### Sizes
@@ -45,33 +69,31 @@ The color field consists of several key parts:
 <sp-tab-panel value="s">
 
 ```html
-<sp-color-field size="s" value="#ffff00"></sp-color-field>
+<sp-color-field label="Size" value="1024" size="s"></sp-color-field>
 ```
 
 </sp-tab-panel>
 <sp-tab value="m">Medium</sp-tab>
 <sp-tab-panel value="m">
 
 ```html
-<sp-color-field size="m" value="#ffff00"></sp-color-field>
+<sp-number-field label="Size" value="1024" size="m"></sp-number-field>
 ```
 
 </sp-tab-panel>
 <sp-tab value="l">Large</sp-tab>
-
 <sp-tab-panel value="l">
 
 ```html
-<sp-color-field size="l" value="#ffff00"></sp-color-field>
+<sp-number-field label="Size" value="1024" size="l"></sp-number-field>
 ```
 
 </sp-tab-panel>
-<sp-tab value="xl">Xtra Large</sp-tab>
-
+<sp-tab value="xl">Extra Large</sp-tab>
 <sp-tab-panel value="xl">
 
 ```html
-<sp-color-field size="xl" value="#ffff00"></sp-color-field>
+<sp-number-field label="Size" value="1024" size="xl"></sp-number-field>
 ```
 
 </sp-tab-panel>
@@ -82,15 +104,15 @@ The color field consists of several key parts:
 When `view-color` is true, the color handle will be rendered. This is useful for development and debugging purposes.
 
 ```html
-<sp-color-field view-color value="#f00"></sp-color-field>
+<sp-color-field view-color value="#f00">Icon color</sp-color-field>
 ```
 
 #### Quiet
 
 A quiet color field provides a more subtle appearance:
 
 ```html
-<sp-color-field quiet value="#e6e600"></sp-color-field>
+<sp-color-field quiet value="#e6e600">Icon color</sp-color-field>
 ```
 
 ### States
@@ -100,23 +122,23 @@ A quiet color field provides a more subtle appearance:
 The default state of the color field, ready for user input:
 
 ```html
-<sp-color-field value="#ffff00"></sp-color-field>
+<sp-color-field value="#ffff00">Icon color</sp-color-field>
 ```
 
 #### Read Only
 
 A readonly color field that displays the color value but prevents user modification:
 
 ```html
-<sp-color-field readonly value="#ffff00"></sp-color-field>
+<sp-color-field readonly value="#ffff00">Icon color</sp-color-field>
 ```
 
 #### Invalid Input
 
 If the input value is not a valid color, `<sp-color-field>` will not accept it and may show validation feedback:
 
 ```html
-<sp-color-field value="not a color"></sp-color-field>
+<sp-color-field value="not a color">Icon color</sp-color-field>
 ```
 
 ### Behaviors
@@ -134,7 +156,7 @@ For a complete list of supported color formats, see the [ColorController documen
 A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `BB` (blue) are hexadecimal integers between `00` and `FF` specifying the intensity of the color.
 
 ```html
-<sp-color-field view-color value="#ff0000"></sp-color-field>
+<sp-color-field view-color value="#ff0000" label="Text color"></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -144,7 +166,7 @@ A hexadecimal color is specified with: `#RRGGBB`. `RR` (red), `GG` (green) and `
 Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for `#RRGGBB`. In the shorthand form, `R` (red), `G` (green), and `B` (blue) are hexadecimal characters between `0` and `F`. Each character is repeated to create the full 6-digit color code. For example, `#123` would expand to `#112233`.
 
 ```html
-<sp-color-field view-color value="#f00"></sp-color-field>
+<sp-color-field view-color value="#f00" label="Text color"></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -154,7 +176,11 @@ Shorthand hexadecimal color values are also supported. `#RGB` is a shorthand for
 An RGB color value is specified with: rgb(red, green, blue). Each parameter defines the intensity of the color with a value between 0 and 255.
 
 ```html
-<sp-color-field view-color value="rgb(255,0,0)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="rgb(255,0,0)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -164,7 +190,11 @@ An RGB color value is specified with: rgb(red, green, blue). Each parameter defi
 An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alpha` parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
 
 ```html
-<sp-color-field view-color value="rgba(0,255,0,0.3)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="rgba(0,255,0,0.3)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -174,7 +204,11 @@ An RGBA color value is specified with: `rgba(red, green, blue, alpha)`. The `alp
 An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and lightness are percentages.
 
 ```html
-<sp-color-field view-color value="hsl(234, 70%, 50%)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="hsl(234, 70%, 50%)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>
@@ -184,7 +218,11 @@ An HSL color value is specified with: hsl(hue, saturation, lightness). Hue is a
 An HSV color value is specified with: hsv(hue, saturation, value). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation and value are percentages.
 
 ```html
-<sp-color-field view-color value="hsv(0, 70%, 50%)"></sp-color-field>
+<sp-color-field
+    view-color
+    value="hsv(0, 70%, 50%)"
+    label="Text color"
+></sp-color-field>
 ```
 
 </sp-tab-panel>

1st-gen/packages/color-field/stories/color-field-sizes.stories.ts

@@ -10,8 +10,6 @@
  * governing permissions and limitations under the License.
  */
 import { TemplateResult } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/field-label/sp-field-label.js';
 import '@spectrum-web-components/help-text/sp-help-text.js';
 import { ColorFieldMarkup } from './template.js';