小红书导出目标条改回一组普通按钮

- TargetTabs 去掉没有配套 tabpanel 的 tablist/tab 角色,容器改 role=group
- 选中态改用 aria-current 表达,Tab/Enter 操作不变
This commit is contained in:
2026-10-06 19:23:46 +08:00
parent 63b7ef3665
commit c762960618
@@ -6,6 +6,10 @@ import { TargetIcon } from './TargetIcon';
*
* 形态是经典下划线 tab(不是按钮胶囊):小字号、等宽三列、选中项用主色 + 底部指示条,
* 视觉重量压在 header 里不抢标题。等宽靠三列 grid,不随标题长短伸缩。
*
* 无障碍上按「一组单选按钮」而不是 ARIA tab 模式:本组件没有配套的 `tabpanel` /
* `aria-controls` / 方向键处理,硬套 `role="tab"` 只会让读屏播报一个找不到面板的 tab。
* 这里保留 `role="group"` + `aria-current` 表达「这组里当前选中的是哪个」,Tab/Enter 本来就能用。
*/
export function TargetTabs({
activeTarget,
@@ -17,7 +21,7 @@ export function TargetTabs({
return (
<div
className="mx-auto grid w-full max-w-md grid-cols-3"
role="tablist"
role="group"
aria-label="导出目标"
>
{TARGET_ORDER.map((target) => {
@@ -26,8 +30,7 @@ export function TargetTabs({
<button
key={target}
type="button"
role="tab"
aria-selected={active}
aria-current={active ? 'true' : undefined}
className={`relative flex min-w-0 items-center justify-center gap-1.5 px-2 pb-2 pt-1 text-xs font-medium transition-colors after:absolute after:inset-x-3 after:bottom-0 after:h-[2px] after:rounded-full after:transition-colors after:content-[''] ${
active
? 'text-[#c7653d] after:bg-[#c7653d]'