使用 Tab 切换焦点时，组件的聚焦状态错误

zdhxiong · Nov 15, 2023 · 8cc8f25 · 8cc8f25
1 parent e2c9fa5
commit 8cc8f25
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 10 deletions.
diff --git a/packages/mdui/src/components/button/button-base.ts b/packages/mdui/src/components/button/button-base.ts
@@ -195,7 +195,9 @@ export class ButtonBase extends AnchorMixin(
   protected override get focusElement(): HTMLElement | null {
     return this.isButton()
       ? this.renderRoot?.querySelector('._button')
-      : this.renderRoot?.querySelector('._a');
+      : !this.focusDisabled
+      ? this.renderRoot?.querySelector('._a')
+      : this;
   }
 
   protected override get focusDisabled(): boolean {

diff --git a/packages/mdui/src/components/card/index.ts b/packages/mdui/src/components/card/index.ts
@@ -72,8 +72,10 @@ export class Card extends AnchorMixin(RippleMixin(FocusableMixin(LitElement))) {
     return this.disabled || (!this.href && !this.clickable);
   }
 
-  protected override get focusElement(): HTMLElement {
-    return this;
+  protected override get focusElement(): HTMLElement | null {
+    return this.href && !this.disabled
+      ? this.renderRoot.querySelector('._a')
+      : this;
   }
 
   protected override get focusDisabled(): boolean {

diff --git a/packages/mdui/src/components/list/list-item.ts b/packages/mdui/src/components/list/list-item.ts
@@ -185,7 +185,7 @@ export class ListItem extends AnchorMixin(
   }
 
   protected override get focusElement(): HTMLElement {
-    return this.href ? this.itemRef.value! : this;
+    return this.href && !this.disabled ? this.itemRef.value! : this;
   }
 
   protected override get focusDisabled(): boolean {

diff --git a/packages/mdui/src/components/menu/menu-item.ts b/packages/mdui/src/components/menu/menu-item.ts
@@ -193,7 +193,7 @@ export class MenuItem extends AnchorMixin(
   }
 
   protected override get focusElement(): HTMLElement {
-    return this.href ? this.containerRef.value! : this;
+    return this.href && !this.disabled ? this.containerRef.value! : this;
   }
 
   protected override get rippleDisabled(): boolean {
@@ -351,6 +351,7 @@ export class MenuItem extends AnchorMixin(
             className,
             content: this.renderInner(useDefaultEndIcon, hasIcon),
             refDirective: ref(this.containerRef),
+            tabIndex: this.focusable ? 0 : -1,
           })
         : html`<div
             part="container"

diff --git a/packages/mdui/src/components/radio/radio.ts b/packages/mdui/src/components/radio/radio.ts
@@ -94,9 +94,11 @@ export class Radio extends RippleMixin(FocusableMixin(LitElement)) {
   })
   protected groupDisabled = false;
 
-  // 是否可聚焦。由 mdui-radio-group 控制该参数
+  // 是否可聚焦。
+  // 单独使用该组件时，默认可聚焦。
+  // 如果放在 <mdui-radio-group> 组件中使用，则由 <mdui-radio-group> 控制该参数
   @state()
-  protected focusable = false;
+  protected focusable = true;
 
   private readonly rippleRef: Ref<Ripple> = createRef();
 

diff --git a/packages/mdui/src/components/select/index.ts b/packages/mdui/src/components/select/index.ts
@@ -511,6 +511,16 @@ export class Select extends FocusableMixin(LitElement) implements FormControl {
   private onDropdownClose() {
     // @ts-ignore
     this.textFieldRef.value!.focusedStyle = false;
+
+    // 如果焦点在 <mdui-select> 组件内的元素上，则焦点回到 <mdui-select> 上
+    if (
+      this.contains(document.activeElement) ||
+      this.contains(document.activeElement?.assignedSlot ?? null)
+    ) {
+      setTimeout(() => {
+        this.focus();
+      });
+    }
   }
 
   private async onValueChange(e: Event) {

diff --git a/packages/shared/src/mixins/anchor.ts b/packages/shared/src/mixins/anchor.ts
@@ -14,7 +14,7 @@ type RenderAnchorOptions = {
     | TemplateResult
     | typeof nothing
     | (TemplateResult | typeof nothing)[];
-  tabindex?: number;
+  tabIndex?: number;
   refDirective?: DirectiveResult<typeof RefDirective>;
 };
 
@@ -120,6 +120,7 @@ export const AnchorMixin = <T extends Constructor<LitElement>>(
       part,
       content = html`<slot></slot>`,
       refDirective,
+      tabIndex,
     }: RenderAnchorOptions): TemplateResult {
       return html`<a
         ${refDirective!}
@@ -130,6 +131,7 @@ export const AnchorMixin = <T extends Constructor<LitElement>>(
         download=${ifDefined(this.download)}
         target=${ifDefined(this.target)}
         rel=${ifDefined(this.rel)}
+        tabindex=${ifDefined(tabIndex)}
       >
         ${content}
       </a>`;

diff --git a/packages/shared/src/mixins/focusable.ts b/packages/shared/src/mixins/focusable.ts
@@ -30,7 +30,7 @@ export declare class FocusableMixinInterface extends LitElement {
 }
 
 /**
- * 参考：https://github.com/adobe/spectrum-web-components/blob/main/packages/shared/src/focusable.ts
+ * 参考：https://github.com/adobe/spectrum-web-components/blob/main/tools/shared/src/focusable.ts
  */
 export const FocusableMixin = <T extends Constructor<LitElement>>(
   superclass: T,
@@ -83,7 +83,7 @@ export const FocusableMixin = <T extends Constructor<LitElement>>(
     /**
      * 通过 Tab 键在元素之间切换焦点时，tabIndex 属性指定了元素获取焦点的顺序
      */
-    @property({ type: Number, reflect: true, attribute: 'tabindex' })
+    @property({ type: Number })
     public override get tabIndex(): number {
       const $this = $(this);