小红书导出目标条改回一组普通按钮
- TargetTabs 去掉没有配套 tabpanel 的 tablist/tab 角色,容器改 role=group - 选中态改用 aria-current 表达,Tab/Enter 操作不变
This commit is contained in:
+6
-3
@@ -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]'
|
||||
|
||||
Reference in New Issue
Block a user