Updated commit for testing

src/alert/Alert.ts

@@ -186,6 +186,7 @@ export class Alert extends OmniElement {
         element.secondaryAction = init.secondaryAction;
         element.enableSecondary = init.enableSecondary;
         element.actionAlign = init.actionAlign;
+        element.ariaRoleDescription = 'alert'
         if (init.id) {
             element.id = init.id;
         }

src/button/Button.spec.ts

@@ -117,6 +117,9 @@ test(`Button - Slot Behaviour`, async ({ page }) => {
         );
 
         await expect(foundSlottedOmniIconElement.asElement()).toBeTruthy();
+
+        // Test accessibility by checking what the aria-label is 
+
     });
 });
 
@@ -146,3 +149,4 @@ test(`Button - Disabled Behaviour`, async ({ page }) => {
         await expect(click).toBeCalledTimes(0);
     });
 });
+

src/button/Button.stories.ts

@@ -12,6 +12,7 @@ const slotPositionOptions = ['left', 'top', 'right', 'bottom'] as const;
 interface Args {
     type: (typeof buttonOptions)[number];
     label: string;
+    altText: string;
     slotPosition: (typeof slotPositionOptions)[number];
     disabled: boolean;
     '[Default Slot]': string;
@@ -23,6 +24,7 @@ export const Interactive = {
       data-testid="test-button"
       type="${args.type}"
       label="${ifNotEmpty(args.label)}"
+      alt-text="${args.altText}"
       slot-position="${args.slotPosition}"
       ?disabled=${args.disabled}>
       ${unsafeHTML(args['[Default Slot]'])}
@@ -80,8 +82,8 @@ const App = () => <OmniButton${args.label ? ` label='${args.label}'` : ''}/>;`
 } as ComponentStoryFormat<Args>;
 
 export const Slot = {
-    render: () => html`
-    <omni-button data-testid="test-button">
+    render: (args: Args) => html`
+    <omni-button data-testid="test-button" alt-text="${args.altText}">
       <omni-icon size="default" icon="./assets/images/direction.svg"></omni-icon>
     </omni-button>
   `,
@@ -98,7 +100,9 @@ const App = () => <OmniButton>
     ],
     name: 'Slot',
     description: 'Set html content to display within.',
-    args: {}
+    args: {
+        altText: 'Direction image'
+    }
 } as ComponentStoryFormat<Args>;
 
 export const Disabled = {

src/button/Button.ts

@@ -154,6 +154,11 @@ export class Button extends OmniElement {
      */
     @property({ type: Boolean, reflect: true }) disabled?: boolean;
 
+    /**
+     * Should be used in cases where a button has no label will map to the aria-label attribute for accessibility purposes.
+     */
+    @property({type: String, reflect: true, attribute: 'alt-text'}) altText?: string;
+
     static override get styles() {
         return [
             super.styles,
@@ -430,8 +435,9 @@ export class Button extends OmniElement {
                     [`${this.type}`]: this.type,
                     disabled: this.disabled ?? false
                 })}
-                ?disabled=${this.disabled}
+                aria-label="${this.altText ? this.altText : this.label}"
                 aria-disabled=${this.disabled ? 'true' : 'false'}
+                ?disabled=${this.disabled}
                 tabindex=${this.disabled ? '-1' : '0'}>
                 <slot></slot>
                 ${this.label ? html`<label id="label" class="label">${this.label}</label>` : nothing}

src/check/Check.ts

@@ -334,6 +334,8 @@ export class Check extends OmniElement {
     override render(): TemplateResult {
         return html`
             <div
+                role="checkbox"
+                aria-checked="${this.checked}"
                 class=${classMap({
                     container: true,
                     indeterminate: this.indeterminate ?? false,

src/chip/Chip.ts

@@ -187,6 +187,7 @@ export class Chip extends OmniElement {
             disabled: this.disabled ?? false
         })}
         ?disabled=${this.disabled}
+        aria-label="${this.label}"
         aria-disabled=${this.disabled ? 'true' : 'false'}>
         <slot name="chip_icon"></slot>
         <div id="label" class="label">${this.label}</div>

src/color-field/ColorField.ts

@@ -156,12 +156,13 @@ export class ColorField extends OmniFormElement {
         class=${classMap(input)}
         id="inputField"
         type="color"
-        aria-label="${this.label}"
         .value=${live(this.value as string)}
-        aria-disabled="${this.disabled}"
         ?disabled=${this.disabled}
         ?readOnly=${this.disabled}
-        tabindex="${this.disabled ? -1 : 0}" />
+        tabindex="${this.disabled ? -1 : 0}"
+        aria-label="${this.label}"
+        aria-disabled="${this.disabled}"
+        />
     `;
     }
 }

src/core/OmniFormElement.ts

@@ -13,6 +13,8 @@ import '../icons/Clear.icon.js';
  * @slot suffix - Replaces the icon for the suffix slot.
  *
  * @csscat Base Form Variables
+ * 
+ * @fires {Event} change - Dispatched when a component that extends the base class value is cleared (Only applies to components where clearable attribute is true).
  *
  * @cssprop --omni-container-font-family -  Container font family.
  * @cssprop --omni-container-width - Container width.
@@ -137,6 +139,7 @@ export class OmniFormElement extends OmniElement {
         }
 
         this.value = '';
+
         // Dispatch standard DOM event to cater for single clear.
         this.dispatchEvent(
             new Event('change', {

src/currency-field/CurrencyField.ts

@@ -592,11 +592,12 @@ export class CurrencyField extends OmniFormElement {
                 class=${classMap(field)}
                 id="inputField"
                 type="text"
-                aria-label="${this.label}"
                 inputmode="${this.noNativeKeyboard ? 'none' : 'decimal'}"
                 data-omni-keyboard-mode="decimal"
                 maxlength="15"
+                aria-label="${this.label}"
                 aria-disabled="${this.disabled}"
+                aria-valuetext="${this.value}"
                 ?readOnly=${this.disabled}
                 tabindex="${this.disabled ? -1 : 0}" />
         `;

src/date-picker/DatePicker.ts

@@ -386,11 +386,12 @@ export class DatePicker extends OmniFormElement {
                 id="inputField"
                 type="text"
                 readonly
-                aria-label="${this.label}"
-                aria-disabled="${this.disabled}"
                 ?disabled=${this.disabled}
                 .value=${live(this.date && this.date.isValid ? this.date.toLocaleString(DateTime.DATE_FULL) : '')}
-                tabindex="${this.disabled ? -1 : 0}" />
+                tabindex="${this.disabled ? -1 : 0}"
+                aria-label="${this.label}"
+                aria-disabled="${this.disabled}"
+                />
         `;
     }
 

src/email-field/EmailField.ts

@@ -127,11 +127,12 @@ export class EmailField extends OmniFormElement {
         inputmode="${this.noNativeKeyboard ? 'none' : 'email'}"
         data-omni-keyboard-mode="email"
         type="email"
-        aria-disabled="${this.disabled}"
-        aria-label="${this.label}"
         .value=${live(this.value as string)}
         ?readOnly=${this.disabled}
-        tabindex="${this.disabled ? -1 : 0}" />
+        tabindex="${this.disabled ? -1 : 0}" 
+        aria-disabled="${this.disabled}"
+        aria-label="${this.label}"
+        />
     `;
     }
 }

src/hyperlink/Hyperlink.ts

@@ -145,7 +145,13 @@ export class Hyperlink extends OmniElement {
 
     protected override render(): TemplateResult {
         return html`
-            <a class="hyperlink" href="${this.href ? this.href : 'javascript:void(0)'}" .target="${this.target}" tabindex="0">
+            <a 
+                class="hyperlink" 
+                href="${this.href ? this.href : 'javascript:void(0)'}" 
+                .target="${this.target}" 
+                tabindex="0"
+                aria-disabled="${this.disabled}"
+                aria-label="${this.label}">
                 ${this.label}<slot></slot>
             </a>
         `;

src/icon/Icon.ts

@@ -62,6 +62,12 @@ export class Icon extends OmniElement {
      */
     @property({ type: Boolean, reflect: true }) symmetrical?: boolean;
 
+    /**
+     * Fallback text to display when image is not loaded also used for screen readers and other assistive technologies
+     * @attr
+     */
+    @property({type: Boolean, reflect: true}) alt?: string;
+
     static override get styles() {
         return [
             super.styles,
@@ -187,7 +193,7 @@ export class Icon extends OmniElement {
                 <img 
                     class=${iconClassMap}
                     src="${this.icon}" 
-                    alt="${this.icon}" />
+                    alt="${this.alt}" />
             `;
         }
 

src/radio/Radio.ts

@@ -289,7 +289,12 @@ export class Radio extends OmniElement {
                 container: true,
                 checked: this.checked ?? false,
                 disabled: this.disabled ?? false
-            })}>
+            })}
+            role="radio"
+            aria-label="${this.label}"
+            aria-error="${this.error}"
+            aria-checked="${this.checked}"
+            >
             <div id="content" tabindex="${this.disabled ? '' : 0}" @click="${this._click}" @keydown="${this._keyDown}">
                 ${this.checked ? html`<div class="indicator"></div>` : nothing}
             </div>

src/select/Select.ts

@@ -679,9 +679,9 @@ export class Select extends OmniFormElement {
                 type="text"
                 readonly
                 inputMode="none"
+                aria-label="${this.label}"
                 aria-disabled="${this.disabled}"
                 ?disabled=${this.disabled}
-                aria-label="${this.label}"
                 .value=${live(
                     (typeof this.value !== 'string' && this.displayField
                         ? (((this.value as Record<string, unknown>) ?? {})[this.displayField] as string)