fix(core): more customization of aria attributes for multi-input (#12437

) * fix(core): more customization of aria attributes for multi-input * fix: focusable element should not be aria-hidden
SAP · Sep 24, 2024 · 88d90b7 · 88d90b7
1 parent ffa12d2
commit 88d90b7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/libs/core/multi-input/multi-input.component.html b/libs/core/multi-input/multi-input.component.html
@@ -48,8 +48,8 @@
             [isControl]="true"
             [glyph]="showAddonButton ? glyph : ''"
             [glyphFont]="glyphFont"
-            [addonButtonAriaHidden]="!!title"
             (addOnButtonClicked)="_addOnButtonClicked($event)"
+            [glyphAriaLabel]="addOnButtonAriaLabel"
             [iconTitle]="addonIconTitle"
         >
             <span [attr.id]="tokenHiddenId" aria-hidden="true" class="fd-multi-input__invisible-text">{{
@@ -102,6 +102,7 @@
                     [attr.id]="inputId"
                     (focus)="tokenizer._showAllTokens()"
                     (blur)="tokenizer._hideTokens()"
+                    [attr.title]="title"
                 />
             </fd-tokenizer>
         </fd-input-group>

diff --git a/libs/core/multi-input/multi-input.component.ts b/libs/core/multi-input/multi-input.component.ts
@@ -373,10 +373,14 @@ export class MultiInputComponent<ItemType = any, ValueType = any>
     @Input()
     open = false;
 
-    /** Whether or not to display the addon button. */
+    /** Whether to display the addon button. */
     @Input()
     displayAddonButton = true;
 
+    /** Aria-label for the addon button. */
+    @Input()
+    addOnButtonAriaLabel: Nullable<string>;
+
     /** @hidden */
     private _tokenCountHiddenLabel = `fd-multi-input-token-count-id-${uniqueHiddenLabel++}`;