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

…sable
haiilo · Dec 17, 2024 · a4dba4d · a4dba4d
1 parent 0fe4db4
commit a4dba4d
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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