Fix/form caption accessibility (#893)

* fix(ui-library): removing aria-label from form caption group --------- Co-authored-by: christian.b.hoffmann <[email protected]>
deven-org · Feb 9, 2024 · 0bf08c0 · 0bf08c0
1 parent bd60858
commit 0bf08c0
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 13 deletions.
diff --git a/packages/ui-library/src/components/internal-components/form-caption-group/index.test.ts b/packages/ui-library/src/components/internal-components/form-caption-group/index.test.ts
@@ -18,7 +18,6 @@ const hintCaption = BlrFormCaptionRenderFunction({
   icon: 'blrInfo',
   size: 'md',
   theme: 'Light',
-  arialabel: 'Form Hint',
 });
 
 const errorCaption = BlrFormCaptionRenderFunction({
@@ -27,7 +26,6 @@ const errorCaption = BlrFormCaptionRenderFunction({
   icon: 'blrInfo',
   size: 'md',
   theme: 'Light',
-  arialabel: 'Form Error',
 });
 
 const mixedCaptions = html` ${hintCaption} ${errorCaption} `;

diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.stories.ts b/packages/ui-library/src/components/internal-components/form-caption/index.stories.ts
@@ -58,14 +58,6 @@ export default {
         category: 'Content / Setting',
       },
     },
-    arialabel: {
-      options: [undefined, ...PureIconKeys],
-      description:
-        'Provides additional information about the elements purpose and functionality to assistive technologies, such as screen readers.',
-      table: {
-        category: 'Accessibility',
-      },
-    },
   },
   parameters: {
     design: {
@@ -97,7 +89,6 @@ BlrFormCaption.storyName = 'Form Caption';
 const args: BlrFormCaptionType = {
   theme: 'Light',
   message: 'Message-text',
-  arialabel: 'Hint',
   icon: 'blr360',
   variant: 'hint',
   size: 'sm',

diff --git a/packages/ui-library/src/components/internal-components/form-caption/index.ts b/packages/ui-library/src/components/internal-components/form-caption/index.ts
@@ -16,7 +16,6 @@ export class BlrFormCaption extends LitElement {
   static styles = [];
 
   @property() message?: string;
-  @property() arialabel?: string;
   @property() icon?: SizelessIconType;
   @property() variant: CaptionVariantType = 'hint';
   @property() size?: FormSizesType = 'md';
@@ -50,7 +49,7 @@ export class BlrFormCaption extends LitElement {
         <style>
           ${dynamicStyles}
         </style>
-        <div class=${classes} aria-label=${this.arialabel || nothing}>
+        <div class=${classes}>
           ${this.icon
             ? BlrIconRenderFunction(
                 {