优化轮播图无障碍性：确保屏幕阅读器正确处理隐藏内容

import React, { useState } from 'react';

const Carousel = () => {
  const itemsPerPage = 3; // 每页显示的项目数量
  const allItems = [
    { id: 1, text: '项目 1：这是轮播图中的第一个长文本内容。' },
    { id: 2, text: '项目 2：这是轮播图中的第二个长文本内容。' },
    { id: 3, text: '项目 3：这是轮播图中的第三个长文本内容。' },
    { id: 4, text: '项目 4：这是轮播图中的第四个长文本内容。' },
    { id: 5, text: '项目 5：这是轮播图中的第五个长文本内容。' },
    { id: 6, text: '项目 6：这是轮播图中的第六个长文本内容。' },
    { id: 7, text: '项目 7：这是轮播图中的第七个长文本内容。' },
    { id: 8, text: '项目 8：这是轮播图中的第八个长文本内容。' },
  ];

  const [currentStartIndex, setCurrentStartIndex] = useState(0); // 当前页第一个项目的索引

  const totalItems = allItems.length;
  const totalPages = Math.ceil(totalItems / itemsPerPage);
  const currentPage = Math.floor(currentStartIndex / itemsPerPage) + 1;

  const handleLeftClick = () => {
    setCurrentStartIndex(prevIndex => Math.max(0, prevIndex - itemsPerPage));
  };

  const handleRightClick = () => {
    // 确保不会超出总项目数，且最后一页可能不满 itemsPerPage
    setCurrentStartIndex(prevIndex =>
      Math.min(totalItems - (totalItems % itemsPerPage === 0 ? itemsPerPage : totalItems % itemsPerPage), prevIndex + itemsPerPage)
    );
  };

  return (
    <div className="carousel" role="region" aria-label="产品展示轮播图">
      {/* 
        使用 aria-live 区域向屏幕阅读器用户动态宣布当前可见的项目范围。
        visually-hidden 类用于在视觉上隐藏此文本，但保持其对屏幕阅读器可见。
      */}
      <div
        className="visually-hidden"
        aria-live="polite"
        aria-atomic="true"
      >
        {`当前显示第 ${currentStartIndex + 1} 到 ${Math.min(currentStartIndex + itemsPerPage, totalItems)} 项，共 ${totalItems} 项。`}
      </div>

      <ul className="carousel-inner" role="list">
        {allItems.map((item, index) => {
          const isVisible = index >= currentStartIndex && index < currentStartIndex + itemsPerPage;
          return (
            <li
              key={item.id}
              className="carousel-item"
              // 使用 display: none 确保非可见项从无障碍树中移除
              style={{ display: isVisible ? 'block' : 'none' }}
              // aria-hidden="true" 在 display: none 的情况下是冗余的，但作为额外保障可保留
              aria-hidden={!isVisible} 
            >
              {item.text}
            </li>
          );
        })}
      </ul>

      <div className="carousel-navigation">
        <button
          className="carousel-arrow left"
          onClick={handleLeftClick}
          disabled={currentStartIndex === 0}
          aria-label="上一页"
        >
          < 上一页
        </button>
        {/* 为视觉用户显示页码，但对屏幕阅读器隐藏，因为 aria-live 区域已提供信息 */}
        <span className="carousel-status" aria-hidden="true">
          {`第 ${currentPage} 页 / 共 ${totalPages} 页`}
        </span>
        <button
          className="carousel-arrow right"
          onClick={handleRightClick}
          disabled={currentStartIndex >= totalItems - itemsPerPage}
          aria-label="下一页"
        >
          下一页 >
        </button>
      </div>
    </div>
  );
};

export default Carousel;

/*
  以下是 .visually-hidden CSS 类的定义，用于在视觉上隐藏元素，但保持其对屏幕阅读器可见。
  通常将其放置在全局 CSS 文件中。

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap; // 防止文本换行
  }
*/