StepListItem: stepStateText should be included as part of the accessible name for the item

[majornista]

In order to conform with WCAG SC 2.5.3 Label in Name (Level A), the VisuallyHidden but still rendered stepStateText should be included as part of the accessibility name for the rendered link of each StepListItem.

Update the following code to include an id, stateId for the stepStateText VisuallyHidden element in the aria-labelledby for the link:

react-spectrum/packages/@adobe/react-spectrum/src/steplist/StepListItem.tsx

Lines 55 to 94 in 139fe90

	let stepStateText = '';
	const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/steplist');
	const numberFormatter = useNumberFormatter();
	if (isSelected) {
	stepStateText = stringFormatter.format('current');
	} else if (isCompleted) {
	stepStateText = stringFormatter.format('completed');
	} else {
	stepStateText = stringFormatter.format('notCompleted');
	}
	let markerId = useId();
	let labelId = useId();
	return (
	<li
	className={
	classNames(
	styles,
	'spectrum-Steplist-item'
	)
	}>
	<FocusRing within focusRingClass={classNames(styles, 'focus-ring')}>
	<a
	{...mergeProps(hoverProps, stepProps)}
	aria-labelledby={`${markerId} ${labelId}`}
	ref={ref}
	className={classNames(
	styles,
	'spectrum-Steplist-link',
	{
	'is-selected': isSelected && !isItemDisabled,
	'is-disabled': isItemDisabled,
	'is-hovered': isHovered,
	'is-completed': isCompleted,
	'is-selectable': state.isSelectable(key) && !isSelected
	}
	)}>
	<VisuallyHidden {...stepStateProps}>{stepStateText}</VisuallyHidden>

As follows:

 let stepStateText = ''; 
 const stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/steplist'); 
 const numberFormatter = useNumberFormatter(); 
  
 if (isSelected) { 
   stepStateText = stringFormatter.format('current'); 
 } else if (isCompleted) { 
   stepStateText = stringFormatter.format('completed'); 
 } else { 
   stepStateText = stringFormatter.format('notCompleted'); 
 } 
  
 let markerId = useId();
 let stateId = useId();
 let labelId = useId();

 return ( 
   <li 
     className={ 
       classNames( 
         styles, 
         'spectrum-Steplist-item' 
       ) 
     }> 
     <FocusRing within focusRingClass={classNames(styles, 'focus-ring')}> 
       <a 
         {...mergeProps(hoverProps, stepProps)} 
         aria-labelledby={`${markerId} ${stateId} ${labelId}`} 
         ref={ref} 
         className={classNames( 
           styles, 
           'spectrum-Steplist-link', 
           { 
             'is-selected': isSelected && !isItemDisabled, 
             'is-disabled': isItemDisabled, 
             'is-hovered': isHovered, 
             'is-completed': isCompleted, 
             'is-selectable': state.isSelectable(key) && !isSelected 
           } 
         )}> 
         <VisuallyHidden id={stateId} {...stepStateProps}>{stepStateText}</VisuallyHidden>

[zeel2104]

Is it open for contribution?