fix: add focusable attribute to scale-icons (#1610)

telekom · Feb 23, 2023 · 4e2e19e · 4e2e19e
1 parent 7a417ff
commit 4e2e19e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/packages/components/scripts/icon-component.hbs b/packages/components/scripts/icon-component.hbs
@@ -30,6 +30,8 @@ export class {{className}} {
   @Prop() decorative?: boolean = false;
   /** (optional) When using the icon standalone, make it meaningful for accessibility */
   @Prop() accessibilityTitle?: string;
+  /** (optional) If `true` the icon can receive focus */
+  @Prop() focusable?: boolean = false;
 
   connectedCallback() {
     if (!this.hostElement.hasAttribute('styles')) {
@@ -38,11 +40,11 @@ export class {{className}} {
   }
 
   render() {
-    const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {}
-
+    const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
+    const focusable = this.focusable ? { tabindex: 0 } : {};
     return (
       <Host>
-        <svg class="scale-icon" xmlns="http://www.w3.org/2000/svg" width={this.size} height={this.size} viewBox="{{viewBox}}" {...ariaHidden}>
+        <svg class="scale-icon" xmlns="http://www.w3.org/2000/svg" width={this.size} height={this.size} viewBox="{{viewBox}}" {...ariaHidden} {...focusable}>
           {this.accessibilityTitle && <title>{this.accessibilityTitle}</title>}
           <g fill={((this.fill === 'currentColor') ? this.color : this.fill)}>
             {this.selected ? (<g>{{{markup.selected}}}</g>) : (<g>{{{markup.default}}}</g>)}

diff --git a/packages/components/src/components/icon/icon.tsx b/packages/components/src/components/icon/icon.tsx
@@ -52,19 +52,19 @@ export class Icon {
       stroke: this.stroke,
     };
     const ariaHidden = this.decorative ? { 'aria-hidden': 'true' } : {};
-
+    const focusable = this.focusable ? { tabindex: 0 } : {};
     return (
       <Host>
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          {...(this.focusable ? { tabindex: 0 } : {})}
           class={this.getCssClassMap()}
           part="base"
           width={this.size}
           height={this.size}
           viewBox="0 0 24 24"
           role="img"
           {...ariaHidden}
+          {...focusable}
         >
           {this.accessibilityTitle && <title>{this.accessibilityTitle}</title>}
           {this.path ? (