useAccessibilityLabel标签Hook设计

在React应用中，无障碍访问（Accessibility）是确保所有用户都能正常使用应用的重要环节。useAccessibilityLabel 是一个专门用于管理组件标签的自定义Hook，它能够根据不同的交互状态动态更新元素的aria-label属性。

核心功能

该Hook主要解决以下问题：

1. 动态标签更新 - 根据组件状态自动调整标签内容
2. 状态同步 - 保持标签与组件行为的一致性
3. 可访问性增强 - 提供屏幕阅读器友好的标签描述

实现代码

import { useState, useEffect } from 'react';

const useAccessibilityLabel = (initialLabel, status = 'default') => {
  const [accessibilityLabel, setAccessibilityLabel] = useState(initialLabel);
  
  useEffect(() => {
    // 根据状态更新标签
    switch (status) {
      case 'loading':
        setAccessibilityLabel('加载中...');
        break;
      case 'error':
        setAccessibilityLabel('操作失败，请重试');
        break;
      case 'success':
        setAccessibilityLabel('操作成功');
        break;
      default:
        setAccessibilityLabel(initialLabel);
    }
  }, [status, initialLabel]);
  
  return accessibilityLabel;
};

// 使用示例
const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [hasError, setHasError] = useState(false);
  
  const label = useAccessibilityLabel('提交按钮', isLoading ? 'loading' : hasError ? 'error' : 'default');
  
  return (
    <button 
      aria-label={label}
      onClick={() => {
        setIsLoading(true);
        // 模拟异步操作
        setTimeout(() => {
          setIsLoading(false);
          setHasError(Math.random() > 0.5);
        }, 2000);
      }}
    >
      提交
    </button>
  );
};

与传统方案对比

传统的无障碍标签处理方式通常需要在组件中手动管理多个状态和属性，而使用useAccessibilityLabel可以实现更简洁的代码结构。相比直接在组件中维护标签逻辑，该Hook提供了更好的复用性和可测试性。

性能优化

• 使用useMemo缓存计算结果
• 避免不必要的状态更新
• 支持传入依赖数组以精确控制更新时机

通过这个自定义Hook，开发者可以更轻松地为React组件添加动态无障碍标签，提升应用的可访问性。