fix: Add labels to fix accessibility warnings (#289)

* add labels to storybook fix accessibility warnings

* input extends from labelmixin to show correct warnings

Co-authored-by: Lone Iversen <[email protected]>

Author: iOvergaard

packages/uui-base/lib/mixins/LabelMixin.ts

@@ -26,7 +26,7 @@ export const LabelMixin = <T extends Constructor<LitElement>>(
    */
   class LabelMixinClass extends superClass {
     /**
-     * Label to be used for aria-label and eventually as visual label
+     * Label to be used for aria-label and potentially as visual label for some components
      * @type {string}
      * @attr
      */

packages/uui-form-layout-item/lib/uui-form-layout-item.story.ts

@@ -35,6 +35,7 @@ export const Example: Story = () => html` <uui-form>
           type="text"
           name="phone"
           placeholder="+00"
+          label="phone area code"
           required
           required-message="You must enter a area code"
           style="text-align:right; width: 75px;">
@@ -43,6 +44,7 @@ export const Example: Story = () => html` <uui-form>
           type="text"
           name="phone"
           placeholder=""
+          label="phone number"
           required
           required-message="You must enter a phone number">
         </uui-input>
@@ -55,8 +57,9 @@ export const Example: Story = () => html` <uui-form>
         <uui-input
           id="cityinput"
           type="text"
-          name="phone"
+          name="city"
           placeholder=""
+          label="city"
           required
           required-message="You must enter a city">
         </uui-input>
@@ -68,6 +71,7 @@ export const Example: Story = () => html` <uui-form>
           type="text"
           name="postal"
           placeholder=""
+          label="postal number"
           required
           required-message="You must enter a postal number">
         </uui-input>

packages/uui-input/lib/uui-input.element.ts

@@ -1,4 +1,4 @@
-import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement, PropertyValueMap } from 'lit';
 import { property, query } from 'lit/decorators.js';
@@ -23,15 +23,16 @@ export type InputType =
 /**
  * Custom element wrapping the native input element.This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.
  * @element uui-input
- * @slot input label - for the input label text.
  * @slot prepend - for components to render to the left of the input.
  * @slot append - for components to render to the right of the input.
  * @fires UUIInputEvent#change on change
  * @fires InputEvent#input on input
  * @fires KeyboardEvent#keyup on keyup
  */
 @defineElement('uui-input')
-export class UUIInputElement extends FormControlMixin(LitElement) {
+export class UUIInputElement extends FormControlMixin(
+  LabelMixin('', LitElement)
+) {
   /**
    * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/
    * @type {boolean}
@@ -195,14 +196,6 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   readonly = false;
 
-  /**
-   * Label for input element.
-   * @type {string}
-   * @attr
-   */
-  @property({ type: String })
-  public label!: string;
-
   /**
    * Defines the input placeholder.
    * @type {string}