面试题：Vue组件中处理无障碍焦点管理的方法

Question

在一个复杂的Vue组件中，比如一个包含多个交互元素的表单组件，如何有效地管理焦点，确保无障碍访问。例如，当用户通过键盘导航时，焦点能够按照合理的顺序在各个元素间移动，并且在某些元素状态改变时焦点能正确转移。阐述你的思路并给出关键代码片段。

Answer 1

思路

1. 合理的DOM结构：确保DOM结构自然地反映组件的逻辑顺序，这样浏览器默认的焦点顺序通常就能满足需求。例如，表单元素应按照从上到下、从左到右的顺序依次排列。
2. 使用tabindex属性：在需要调整焦点顺序时，谨慎使用tabindex属性。tabindex="0"可将元素添加到正常的tab顺序中，tabindex="-1"可使元素可通过脚本聚焦但不参与正常tab顺序。
3. 监听状态变化：通过Vue的watch或computed属性，监听组件中元素状态的改变，如表单字段的选中、输入等，然后使用focus()方法手动转移焦点。
4. 键盘事件处理：监听键盘事件（如keydown），在特定按键按下时，如Enter键，控制焦点的移动方向。

关键代码片段

1. 模板部分

<template>
  <form>
    <input type="text" v-model="inputValue1" ref="input1">
    <input type="text" v-model="inputValue2" ref="input2" :tabindex="inputValue1 ? 0 : -1">
    <button @click="submitForm">Submit</button>
  </form>
</template>

2. 脚本部分

export default {
  data() {
    return {
      inputValue1: '',
      inputValue2: ''
    };
  },
  watch: {
    inputValue1(newValue) {
      if (newValue) {
        this.$refs.input2.focus();
      }
    }
  },
  methods: {
    submitForm() {
      // 表单提交逻辑
    }
  },
  mounted() {
    this.$refs.input1.focus();
    document.addEventListener('keydown', this.handleKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.key === 'Enter' && this.$refs.input1 === document.activeElement) {
        this.$refs.input2.focus();
        event.preventDefault();
      }
    }
  }
};