Skip to content

Commit

Permalink
fix(ally): steps tablist semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
segunadebayo committed Sep 3, 2024
1 parent 48c55d2 commit 4ecff96
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 2 deletions.
1 change: 1 addition & 0 deletions .changeset/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"nuxt-ts",
"solid-ts",
"nuxt-ts",
"react-19",
"preact-ts",
"svelte-ts",
"vanilla-ts",
Expand Down
5 changes: 5 additions & 0 deletions .changeset/neat-games-dream.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@zag-js/steps": patch
---

Improve accessibility of tablist semantics by using `aria-owns`
8 changes: 6 additions & 2 deletions packages/machines/steps/src/steps.connect.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { dataAttr } from "@zag-js/dom-query"
import type { NormalizeProps, PropTypes } from "@zag-js/types"
import type { State, Send, ItemProps, ItemState, MachineApi } from "./steps.types"
import { fromLength } from "@zag-js/utils"
import { parts } from "./steps.anatomy"
import { dom } from "./steps.dom"
import { dataAttr } from "@zag-js/dom-query"
import type { ItemProps, ItemState, MachineApi, Send, State } from "./steps.types"

export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
const value = state.context.step
Expand Down Expand Up @@ -62,11 +63,14 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
},

getListProps() {
const arr = fromLength(state.context.count)
const triggerIds = arr.map((_, index) => dom.getTriggerId(state.context, index))
return normalize.element({
...parts.list.attrs,
dir: state.context.dir,
id: dom.getListId(state.context),
role: "tablist",
"aria-owns": triggerIds.join(" "),
"aria-orientation": state.context.orientation,
"data-orientation": state.context.orientation,
})
Expand Down

0 comments on commit 4ecff96

Please sign in to comment.