diff --git a/packages/@adobe/react-spectrum/src/steplist/StepListItem.tsx b/packages/@adobe/react-spectrum/src/steplist/StepListItem.tsx index 057b6044b65..e10c14c888d 100644 --- a/packages/@adobe/react-spectrum/src/steplist/StepListItem.tsx +++ b/packages/@adobe/react-spectrum/src/steplist/StepListItem.tsx @@ -65,6 +65,7 @@ export function StepListItem(props: SpectrumStepListItemProps): ReactNode } let markerId = useId(); + let stateId = useId(); let labelId = useId(); return ( @@ -78,7 +79,7 @@ export function StepListItem(props: SpectrumStepListItemProps): ReactNode (props: SpectrumStepListItemProps): ReactNode 'is-selectable': state.isSelectable(key) && !isSelected } )}> - {stepStateText} + {stepStateText} diff --git a/packages/@adobe/react-spectrum/test/steplist/StepList.test.tsx b/packages/@adobe/react-spectrum/test/steplist/StepList.test.tsx index c32ab7aabb7..0a7657c5283 100644 --- a/packages/@adobe/react-spectrum/test/steplist/StepList.test.tsx +++ b/packages/@adobe/react-spectrum/test/steplist/StepList.test.tsx @@ -75,6 +75,38 @@ describe('StepList', function () { expect(stepList).toHaveAttribute('id', 'steplist-id'); }); + it('includes step state text in the accessible name via aria-labelledby', function () { + const tree = renderComponent({defaultLastCompletedStep: 'step-two', defaultSelectedKey: 'step-three', onSelectionChange}); + const stepListItems = tree.getAllByRole('link'); + + // Each link should have an aria-labelledby referencing marker, state, and label IDs + for (let link of stepListItems) { + let labelledby = link.getAttribute('aria-labelledby'); + expect(labelledby).toBeTruthy(); + let ids = labelledby!.split(' '); + expect(ids).toHaveLength(3); + for (let id of ids) { + expect(document.getElementById(id)).toBeTruthy(); + } + } + + // Verify the step state text is included in referenced elements + let currentStep = stepListItems[2]; + let currentIds = currentStep.getAttribute('aria-labelledby')!.split(' '); + let stateEl = document.getElementById(currentIds[1]); + expect(stateEl!.textContent).toContain('Current'); + + let completedStep = stepListItems[0]; + let completedIds = completedStep.getAttribute('aria-labelledby')!.split(' '); + let completedStateEl = document.getElementById(completedIds[1]); + expect(completedStateEl!.textContent).toContain('Completed'); + + let notCompletedStep = stepListItems[3]; + let notCompletedIds = notCompletedStep.getAttribute('aria-labelledby')!.split(' '); + let notCompletedStateEl = document.getElementById(notCompletedIds[1]); + expect(notCompletedStateEl!.textContent).toContain('Not'); + }); + it('attaches a user provided ref', function () { const ref = React.createRef>(); const container = renderComponent({ref});