fix(ui-library): radio accessibility (#595)

deven-org · Nov 22, 2023 · d8aec41 · d8aec41
1 parent b56a04b
commit d8aec41
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 44 deletions.
diff --git a/packages/ui-library/src/components/forms/radio/radio-input/index.stories.ts b/packages/ui-library/src/components/forms/radio/radio-input/index.stories.ts
@@ -31,20 +31,17 @@ export const BlrRadio = (params: BlrRadioType) => BlrRadioRenderFunction(params)
 BlrRadio.storyName = 'Radio';
 
 const args: BlrRadioType = {
+  optionId: 'option_1',
   theme: 'Light',
   checked: false,
   disabled: false,
   name: 'Default Name',
   required: false,
   readonly: false,
   size: 'md',
-  option: {
-    label: 'Option 1',
-    value: 'option1',
-    hintMessage: 'This is a sample hint message',
-    checked: true,
-    errorMessage: 'This is a sample error message',
-  },
+  label: 'Option 1',
+  hintMessage: 'This is a sample hint message',
+  errorMessage: 'This is a sample error message',
   showHint: true,
   hasError: false,
   hintIcon: undefined,

diff --git a/packages/ui-library/src/components/forms/radio/radio-input/index.ts b/packages/ui-library/src/components/forms/radio/radio-input/index.ts
@@ -2,7 +2,7 @@ import { LitElement, html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { styleCustom } from './index.css';
-import { InputSizesType, RadioOption } from '../../../../globals/types';
+import { InputSizesType } from '../../../../globals/types';
 import { formDark, formLight } from '../../../../foundation/semantic-tokens/form.css';
 import { radioDark, radioLight } from '../../../../foundation/component-tokens/radio.css';
 import { BlrFormLabelInline } from '../../../internal-components/form-label/form-label-inline';
@@ -17,6 +17,8 @@ const TAG_NAME = 'blr-radio';
 export class BlrRadio extends LitElement {
   static styles = [styleCustom];
 
+  @property() optionId!: string;
+  @property() label!: string;
   @property() disabled?: boolean;
   @property() readonly?: boolean;
   @property() checked?: boolean;
@@ -27,9 +29,10 @@ export class BlrRadio extends LitElement {
   @property() onBlur?: HTMLElement['blur'];
   @property() onFocus?: HTMLElement['focus'];
   @property() hasError?: boolean;
+  @property() errorMessage?: string;
   @property() errorIcon?: SizelessIconType;
-  @property() option!: RadioOption;
   @property() showHint?: boolean;
+  @property() hintMessage?: string;
   @property() hintIcon?: SizelessIconType;
 
   @property() theme: ThemeType = 'Light';
@@ -39,49 +42,43 @@ export class BlrRadio extends LitElement {
       const dynamicStyles = this.theme === 'Light' ? [formLight, radioLight] : [formDark, radioDark];
 
       const classes = classMap({
-        [`${this.size}`]: this.size,
-        [`disabled`]: this.disabled || false,
-        [`readonly`]: this.readonly || false,
-        [`checked`]: this.checked || this.option.checked || false,
-        [`error`]: this.hasError || false,
+        [this.size]: this.size,
+        disabled: this.disabled || false,
+        readonly: this.readonly || false,
+        checked: this.checked || false,
+        error: this.hasError || false,
       });
 
-      const calculateOptionId = (label: string) => {
-        return label ? label.replace(/ /g, '_').toLowerCase() : '';
-      };
-
-      const id = this.option.label ? calculateOptionId(this.option.label) : '';
-
-      return html`<style>
-          ${dynamicStyles.map((style) => style)}
+      return html`
+        <style>
+          ${dynamicStyles}
         </style>
         <div class="blr-radio ${classes}">
           <input
-            id=${id || nothing}
+            id=${this.optionId || nothing}
             class="${classes} input-control"
             type="radio"
             name=${this.name}
-            value=${this.option.value || nothing}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
-            ?aria-disabled=${this.disabled}
             ?invalid=${this.hasError}
-            ?aria-invalid=${this.hasError}
             ?checked=${this.checked}
             ?required=${this.required}
             @input=${this.onChange}
             @blur=${this.onBlur}
             @focus=${this.onFocus}
           />
           <div class="label-wrapper">
-            ${this.option.label
-              ? BlrFormLabelInline({ labelText: this.option.label, forValue: this.id, labelSize: this.size })
-              : nothing}
+            ${BlrFormLabelInline({
+              labelText: this.label,
+              forValue: this.optionId,
+              labelSize: this.size,
+            })}
             ${this.showHint
               ? html`
                   <div class="hint-wrapper">
                     ${BlrFormHintRenderFunction({
-                      message: this.option.hintMessage,
+                      message: this.hintMessage,
                       variant: 'hint',
                       size: this.size,
                       icon: this.hintIcon ? this.hintIcon : undefined,
@@ -94,7 +91,7 @@ export class BlrRadio extends LitElement {
               ? html`
                   <div class="error-wrapper">
                     ${BlrFormHintRenderFunction({
-                      message: this.option.errorMessage,
+                      message: this.errorMessage,
                       variant: 'error',
                       size: this.size,
                       icon: this.errorIcon ? this.errorIcon : undefined,
@@ -104,7 +101,8 @@ export class BlrRadio extends LitElement {
                 `
               : nothing}
           </div>
-        </div> `;
+        </div>
+      `;
     }
   }
 }

diff --git a/packages/ui-library/src/components/internal-components/form-hint/index.ts b/packages/ui-library/src/components/internal-components/form-hint/index.ts
@@ -30,13 +30,13 @@ export class BlrFormHint extends LitElement {
 
       const classes = classMap({
         'blr-form-hint': true,
-        [`${this.variant}`]: this.variant,
-        [`${this.size}`]: this.size,
+        [this.variant]: this.variant,
+        [this.size]: this.size,
       });
 
       const iconClasses = classMap({
         'blr-icon': true,
-        [`${this.size}`]: this.size,
+        [this.size]: this.size,
       });
 
       const iconSizeVariant = getComponentConfigToken([
@@ -47,8 +47,9 @@ export class BlrFormHint extends LitElement {
         'Icon',
       ]).toLowerCase() as SizesType;
 
-      return html`<style>
-          ${dynamicStyles.map((style) => style)}
+      return html`
+        <style>
+          ${dynamicStyles}
         </style>
         <div class=${classes}>
           ${this.icon
@@ -64,7 +65,8 @@ export class BlrFormHint extends LitElement {
             : nothing}
           <span class="blr-caption-text">${this.message}</span>
           ${this.childElement}
-        </div>`;
+        </div>
+      `;
     }
   }
 }

diff --git a/packages/ui-library/src/components/internal-components/form-label/form-label-inline/index.ts b/packages/ui-library/src/components/internal-components/form-label/form-label-inline/index.ts
@@ -3,13 +3,9 @@ import { InputSizesType } from '../../../../globals/types';
 
 type FormLabelInlineType = {
   labelText: string;
-  labelAppendix?: string;
   labelSize: InputSizesType;
   forValue: string;
 };
 
-export const BlrFormLabelInline = (params: FormLabelInlineType) => {
-  return html`
-    <label class="blr-form-label-inline ${params.labelSize}" for=${params.forValue}> ${params.labelText} </label>
-  `;
-};
+export const BlrFormLabelInline = ({ labelSize, forValue, labelText }: FormLabelInlineType) =>
+  html`<label class="blr-form-label-inline ${labelSize}" for=${forValue}>${labelText}</label>`;