From a4dba4da1bb3fa129085da84b64a1201c45b64e5 Mon Sep 17 00:00:00 2001
From: anastasiia_glushkova <anastasiia.glushkova@haiilo.com>
Date: Tue, 17 Dec 2024 13:37:32 +0100
Subject: [PATCH] feat(core): make shadow interaction components are recognized
 as focusable

---
 core/src/components/cat-avatar/cat-avatar.tsx           | 9 +++++++--
 core/src/components/cat-button/cat-button.tsx           | 5 ++++-
 core/src/components/cat-checkbox/cat-checkbox.tsx       | 5 ++++-
 core/src/components/cat-date-inline/cat-date-inline.tsx | 5 ++++-
 core/src/components/cat-date/cat-date.tsx               | 5 ++++-
 core/src/components/cat-input/cat-input.tsx             | 5 ++++-
 core/src/components/cat-pagination/cat-pagination.tsx   | 8 ++++++--
 core/src/components/cat-radio/cat-radio.tsx             | 5 ++++-
 core/src/components/cat-select/cat-select.tsx           | 5 ++++-
 core/src/components/cat-tabs/cat-tabs.tsx               | 5 ++++-
 core/src/components/cat-tag/cat-tag.tsx                 | 5 ++++-
 core/src/components/cat-textarea/cat-textarea.tsx       | 5 ++++-
 core/src/components/cat-time/cat-time.tsx               | 5 ++++-
 core/src/components/cat-toggle/cat-toggle.tsx           | 5 ++++-
 14 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/core/src/components/cat-avatar/cat-avatar.tsx b/core/src/components/cat-avatar/cat-avatar.tsx
index 9b287ec6d..30276832e 100644
--- a/core/src/components/cat-avatar/cat-avatar.tsx
+++ b/core/src/components/cat-avatar/cat-avatar.tsx
@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
 import loadImg from '../../utils/load-img';
 
 /**
@@ -7,11 +7,15 @@ import loadImg from '../../utils/load-img';
 @Component({
   tag: 'cat-avatar',
   styleUrl: 'cat-avatar.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatAvatar {
   @State() backgroundImage?: string;
 
+  @Element() hostElement!: HTMLElement;
+
   /**
    * The size of the avatar.
    */
@@ -70,6 +74,7 @@ export class CatAvatar {
 
   render() {
     if (this.url) {
+      this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
       return (
         <a href={this.url} target={this.urlTarget} style={this.cssStyle} class={this.cssClass} aria-label={this.label}>
           {this.content}
diff --git a/core/src/components/cat-button/cat-button.tsx b/core/src/components/cat-button/cat-button.tsx
index 13fc5057e..c60e7e197 100644
--- a/core/src/components/cat-button/cat-button.tsx
+++ b/core/src/components/cat-button/cat-button.tsx
@@ -15,7 +15,9 @@ import { findClosest } from '../../utils/find-closest';
 @Component({
   tag: 'cat-button',
   styleUrl: 'cat-button.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatButton {
   private button!: HTMLButtonElement | HTMLAnchorElement;
@@ -236,6 +238,7 @@ export class CatButton {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     if (this.url) {
       return (
         <Host data-button-group={this.buttonGroupPosition}>
diff --git a/core/src/components/cat-checkbox/cat-checkbox.tsx b/core/src/components/cat-checkbox/cat-checkbox.tsx
index fbed13f3c..91fcafeae 100644
--- a/core/src/components/cat-checkbox/cat-checkbox.tsx
+++ b/core/src/components/cat-checkbox/cat-checkbox.tsx
@@ -16,7 +16,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-checkbox',
   styleUrls: ['cat-checkbox.scss'],
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatCheckbox {
   private readonly _id = `cat-checkbox-${nextUniqueId++}`;
@@ -162,6 +164,7 @@ export class CatCheckbox {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <label
diff --git a/core/src/components/cat-date-inline/cat-date-inline.tsx b/core/src/components/cat-date-inline/cat-date-inline.tsx
index c3e952c7a..5f71b744c 100644
--- a/core/src/components/cat-date-inline/cat-date-inline.tsx
+++ b/core/src/components/cat-date-inline/cat-date-inline.tsx
@@ -14,7 +14,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-date-inline',
   styleUrl: 'cat-date-inline.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatDateInline {
   private readonly _id = `cat-date-inline-${nextUniqueId++}`;
@@ -234,6 +236,7 @@ export class CatDateInline {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     const [minDate, maxDate] = this.getMinMaxDate();
     const dateGrid = this.dateGrid(this.viewDate.getFullYear(), this.viewDate.getMonth());
     const [dateStart, dateEnd] = this.getValue();
diff --git a/core/src/components/cat-date/cat-date.tsx b/core/src/components/cat-date/cat-date.tsx
index 107be3126..b73daf92f 100644
--- a/core/src/components/cat-date/cat-date.tsx
+++ b/core/src/components/cat-date/cat-date.tsx
@@ -11,7 +11,9 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 @Component({
   tag: 'cat-date',
   styleUrl: 'cat-date.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatDate {
   private readonly language = i18n.getLocale();
@@ -230,6 +232,7 @@ export class CatDate {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <cat-input
diff --git a/core/src/components/cat-input/cat-input.tsx b/core/src/components/cat-input/cat-input.tsx
index b285054d4..7003289db 100644
--- a/core/src/components/cat-input/cat-input.tsx
+++ b/core/src/components/cat-input/cat-input.tsx
@@ -23,7 +23,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-input',
   styleUrl: 'cat-input.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatInput {
   private readonly _id = `cat-input-${nextUniqueId++}`;
@@ -279,6 +281,7 @@ export class CatInput {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <div
         class={{
diff --git a/core/src/components/cat-pagination/cat-pagination.tsx b/core/src/components/cat-pagination/cat-pagination.tsx
index 6ee216af6..e340d31bb 100644
--- a/core/src/components/cat-pagination/cat-pagination.tsx
+++ b/core/src/components/cat-pagination/cat-pagination.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';
+import { Component, Element, Event, EventEmitter, h, Prop } from '@stencil/core';
 import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 
 /**
@@ -11,9 +11,12 @@ import { catI18nRegistry as i18n } from '../cat-i18n/cat-i18n-registry';
 @Component({
   tag: 'cat-pagination',
   styleUrl: 'cat-pagination.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatPagination {
+  @Element() hostElement!: HTMLElement;
   /**
    * The current page.
    */
@@ -70,6 +73,7 @@ export class CatPagination {
   @Event() catChange!: EventEmitter<number>;
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <nav role="navigation">
         <ol
diff --git a/core/src/components/cat-radio/cat-radio.tsx b/core/src/components/cat-radio/cat-radio.tsx
index c7deb3959..bc42efae8 100644
--- a/core/src/components/cat-radio/cat-radio.tsx
+++ b/core/src/components/cat-radio/cat-radio.tsx
@@ -15,7 +15,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-radio',
   styleUrl: 'cat-radio.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatRadio {
   private readonly _id = `cat-radio-${++nextUniqueId}`;
@@ -134,6 +136,7 @@ export class CatRadio {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <label
diff --git a/core/src/components/cat-select/cat-select.tsx b/core/src/components/cat-select/cat-select.tsx
index 6f082ed02..26e43cd13 100644
--- a/core/src/components/cat-select/cat-select.tsx
+++ b/core/src/components/cat-select/cat-select.tsx
@@ -110,7 +110,9 @@ let nextTagUniqueId = 0;
 @Component({
   tag: 'cat-select',
   styleUrl: 'cat-select.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatSelect {
   private static readonly SKELETON_COUNT = 4;
@@ -576,6 +578,7 @@ export class CatSelect {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <div
diff --git a/core/src/components/cat-tabs/cat-tabs.tsx b/core/src/components/cat-tabs/cat-tabs.tsx
index 1b313af49..0ae90ed92 100644
--- a/core/src/components/cat-tabs/cat-tabs.tsx
+++ b/core/src/components/cat-tabs/cat-tabs.tsx
@@ -9,7 +9,9 @@ import { Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, St
 @Component({
   tag: 'cat-tabs',
   styleUrl: 'cat-tabs.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatTabs {
   private mutationObserver?: MutationObserver;
@@ -93,6 +95,7 @@ export class CatTabs {
   @Event() catChange!: EventEmitter<{ id: string; index: number }>;
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         {this.tabs.map((tab: HTMLCatTabElement) => {
diff --git a/core/src/components/cat-tag/cat-tag.tsx b/core/src/components/cat-tag/cat-tag.tsx
index 542d0e780..e9d22fc18 100644
--- a/core/src/components/cat-tag/cat-tag.tsx
+++ b/core/src/components/cat-tag/cat-tag.tsx
@@ -14,7 +14,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-tag',
   styleUrl: 'cat-tag.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatTag {
   private readonly _id = `cat-input-${nextUniqueId++}`;
@@ -180,6 +182,7 @@ export class CatTag {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <div class={{ 'label-container': true, hidden: this.labelHidden }}>
diff --git a/core/src/components/cat-textarea/cat-textarea.tsx b/core/src/components/cat-textarea/cat-textarea.tsx
index cd52c8182..5ab642a8f 100644
--- a/core/src/components/cat-textarea/cat-textarea.tsx
+++ b/core/src/components/cat-textarea/cat-textarea.tsx
@@ -19,7 +19,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-textarea',
   styleUrl: 'cat-textarea.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatTextarea {
   private readonly _id = `cat-textarea-${nextUniqueId++}`;
@@ -208,6 +210,7 @@ export class CatTextarea {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <div
diff --git a/core/src/components/cat-time/cat-time.tsx b/core/src/components/cat-time/cat-time.tsx
index 6716dc4bb..ea155979e 100644
--- a/core/src/components/cat-time/cat-time.tsx
+++ b/core/src/components/cat-time/cat-time.tsx
@@ -11,7 +11,9 @@ import { clampTime, isAfter, isBefore } from './cat-time-math';
 @Component({
   tag: 'cat-time',
   styleUrl: 'cat-time.scss',
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatTime {
   private readonly language = i18n.getLocale();
@@ -294,6 +296,7 @@ export class CatTime {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <cat-input
diff --git a/core/src/components/cat-toggle/cat-toggle.tsx b/core/src/components/cat-toggle/cat-toggle.tsx
index 2580dcdca..85b21dfed 100644
--- a/core/src/components/cat-toggle/cat-toggle.tsx
+++ b/core/src/components/cat-toggle/cat-toggle.tsx
@@ -15,7 +15,9 @@ let nextUniqueId = 0;
 @Component({
   tag: 'cat-toggle',
   styleUrls: ['cat-toggle.scss'],
-  shadow: true
+  shadow: {
+    delegatesFocus: true,
+  }
 })
 export class CatToggle {
   private readonly _id = `cat-toggle-${nextUniqueId++}`;
@@ -151,6 +153,7 @@ export class CatToggle {
   }
 
   render() {
+    this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
     return (
       <Host>
         <label