<template>
  <!-- Header actions -->
  <button tabindex="0" @click="refresh">刷新</button>
  <button tabindex="0" @click="settings">设置</button>

  <!-- Filter panel -->
  <select tabindex="0" v-model="selectedInstitution">...</select>
  <button tabindex="0" @click="applyFilters">应用筛选</button>

  <!-- Main content -->
  <div tabindex="0" role="main">...</div>
</template>

<template>
  <a href="#main-content" class="skip-link">跳至主内容</a>

  <header>...</header>

  <main id="main-content" tabindex="-1">
    <!-- Main content -->
  </main>
</template>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: static;
  left: 0;
}
</style>

<template>
  <button
    @click="handleAction"
    @keydown.enter="handleAction"
    @keydown.space.prevent="handleAction"
  >
    操作按钮
  </button>

  <!-- Custom component -->
  <FilterPanel
    tabindex="0"
    @keydown.esc="closePanel"
    aria-label="筛选面板"
  />
</template>

<!-- Icon button needs aria-label -->
<button aria-label="刷新数据" @click="refresh">
  <RefreshIcon />
</button>

<!-- Text button doesn't need it -->
<button @click="save">保存</button>

<!-- Disabled button -->
<button disabled aria-disabled="true">已禁用</button>

<template>
  <div class="form-field">
    <label for="institution-select">三级机构</label>
    <select
      id="institution-select"
      v-model="selectedInstitution"
      aria-describedby="institution-help"
      aria-required="true"
    >
      <option>达州</option>
      <option>德阳</option>
    </select>
    <span id="institution-help" class="help-text">
      选择业务员所属机构
    </span>
  </div>
</template>

<template>
  <!-- Announce status changes to screen readers -->
  <div
    role="status"
    aria-live="polite"
    aria-atomic="true"
    class="sr-only"
  >
    {{ statusMessage }}
  </div>
</template>

<script setup>
const statusMessage = ref('')

watch(isLoading, (loading) => {
  statusMessage.value = loading ? '正在加载数据' : '数据加载完成'
})
</script>

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
</style>

<template>
  <div
    v-if="visible"
    role="dialog"
    aria-labelledby="dialog-title"
    aria-describedby="dialog-desc"
    aria-modal="true"
  >
    <h2 id="dialog-title">确认操作</h2>
    <p id="dialog-desc">您确定要删除此项吗？</p>
    <button @click="confirm">确认</button>
    <button @click="cancel">取消</button>
  </div>
</template>

/* Use primary color with bold text for better readability */
.link-primary {
  color: var(--primary-500);
  font-weight: 600;  /* Bold improves perceived contrast */
}

/* Add icon support for color-blind users */
.status-success {
  color: var(--success-600);
}
.status-success::before {
  content: '✓';  /* Icon doesn't rely on color alone */
}

/* Default browser focus */
*:focus {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Custom focus for buttons */
.btn:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-100);
}

/* Remove outline for mouse users */
.btn:focus:not(:focus-visible) {
  outline: none;
}

// Focus first interactive element in modal
const focusFirstElement = () => {
  nextTick(() => {
    const firstInput = modalRef.value?.querySelector('button, input, select')
    firstInput?.focus()
  })
}

<!-- Decorative image -->
<img src="icon.svg" alt="" role="presentation" />

<!-- Informative image -->
<img src="chart.png" alt="周对比保费趋势图，显示最近3周保费上升" />

<template>
  <div
    class="chart-container"
    role="img"
    :aria-label="chartDescription"
  >
    <ECharts :option="chartOption" />
  </div>

  <!-- Provide data table alternative -->
  <details class="chart-data">
    <summary>查看数据表格</summary>
    <table>
      <caption>周对比保费数据</caption>
      <thead>
        <tr>
          <th>日期</th>
          <th>保费（万元）</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in chartData" :key="item.date">
          <td>{{ item.date }}</td>
          <td>{{ item.value }}</td>
        </tr>
      </tbody>
    </table>
  </details>
</template>

<script setup>
const chartDescription = computed(() =>
  `周对比保费趋势图，显示${chartData.length}个数据点，保费范围从${minValue}到${maxValue}万元`
)
</script>

<template>
  <div aria-busy="true" aria-live="polite">
    <Loading v-if="isLoading" />
    <span class="sr-only">{{ loadingMessage }}</span>
  </div>
</template>

<script setup>
const loadingMessage = computed(() =>
  isLoading.value ? '正在加载数据，请稍候' : '数据加载完成'
)
</script>

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Use subtle animations by default */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

/* No flashing or rapid movements */

<div role="status" aria-live="polite">{{ message }}</div>

*:focus-visible {
  outline: 2px solid var(--primary-500);
}