feat(core): make shadow interaction components are recognized as focusable

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}

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}>

core/src/components/cat-checkbox/cat-checkbox.spec.tsx

@@ -8,7 +8,7 @@ describe('cat-checkbox', () => {
       html: `<cat-checkbox label="Label"></cat-checkbox>`
     });
     expect(page.root).toEqualLightHtml(`
-     <cat-checkbox label="Label"></cat-checkbox>
+     <cat-checkbox label="Label" tabindex="0"></cat-checkbox>
     `);
   });
 });

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

core/src/components/cat-date-inline/cat-date-inline.spec.tsx

@@ -11,7 +11,7 @@ describe('cat-date-inline', () => {
       html: `<cat-date-inline></cat-date-inline>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-date-inline></cat-date-inline>
+      <cat-date-inline tabindex="0"></cat-date-inline>
     `);
   });
 });

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();

core/src/components/cat-date/cat-date.spec.tsx

@@ -12,7 +12,7 @@ describe('cat-date', () => {
       html: `<cat-date></cat-date>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-date></cat-date>
+      <cat-date tabindex="0"></cat-date>
     `);
   });
 });

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

core/src/components/cat-input/cat-input.spec.tsx

@@ -10,7 +10,7 @@ describe('cat-input', () => {
       html: `<cat-input label="Label"></cat-input>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-input label="Label"></cat-input>
+      <cat-input label="Label" tabindex="0"></cat-input>
     `);
   });
 });

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={{

core/src/components/cat-pagination/cat-pagination.spec.tsx

@@ -9,7 +9,7 @@ describe('cat-pagination', () => {
       html: `<cat-pagination></cat-pagination>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-pagination></cat-pagination>
+      <cat-pagination tabindex="0"></cat-pagination>
     `);
   });
 });

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

core/src/components/cat-radio/cat-radio.spec.tsx

@@ -8,7 +8,7 @@ describe('cat-radio', () => {
       html: `<cat-radio label="Label"></cat-radio>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-radio label="Label"></cat-radio>
+      <cat-radio label="Label" tabindex="0"></cat-radio>
     `);
   });
 });

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

core/src/components/cat-select/cat-select.spec.tsx

@@ -10,7 +10,7 @@ describe('cat-select', () => {
       html: `<cat-select label="Label"></cat-select>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-select label="Label"></cat-select>
+      <cat-select label="Label" tabindex="0"></cat-select>
     `);
   });
 });

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

core/src/components/cat-tabs/cat-tabs.spec.tsx

@@ -8,7 +8,7 @@ describe('cat-tabs', () => {
       html: `<cat-tabs></cat-tabs>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-tabs></cat-tabs>
+      <cat-tabs tabindex="0"></cat-tabs>
     `);
   });
 });

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) => {

core/src/components/cat-tag/cat-tag.spec.tsx

@@ -8,7 +8,7 @@ describe('cat-tag', () => {
       html: `<cat-tag></cat-tag>`
     });
     expect(page.root).toEqualHtml(`
-        <cat-tag>
+        <cat-tag tabindex="0">
          <mock:shadow-root>
            <div class="label-container"></div>
            <div class="input-wrapper">

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 }}>

core/src/components/cat-textarea/cat-textarea.spec.tsx

@@ -10,7 +10,7 @@ describe('cat-textarea', () => {
       html: `<cat-textarea label="Label"></cat-textarea>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-textarea label="Label"></cat-textarea>
+      <cat-textarea label="Label" tabindex="0"></cat-textarea>
     `);
   });
 });

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

core/src/components/cat-time/cat-time.spec.tsx

@@ -11,7 +11,7 @@ describe('cat-time', () => {
       html: `<cat-time></cat-time>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-time></cat-time>
+      <cat-time tabindex="0"></cat-time>
     `);
   });
 });

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

core/src/components/cat-toggle/cat-toggle.spec.tsx

@@ -8,7 +8,7 @@ describe('cat-toggle', () => {
       html: `<cat-toggle label="Label"></cat-toggle>`
     });
     expect(page.root).toEqualLightHtml(`
-      <cat-toggle label="Label"></cat-toggle>
+      <cat-toggle label="Label" tabindex="0"></cat-toggle>
     `);
   });
 });

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