Heading should support aria-level prop override #5077
Description
Provide a general summary of the feature here
Heading component needs to support aria-level override to set the hierarchical heading level in the accessibility tree regardless of the rendered element.
🤔 Expected Behavior?
A user should be able to explicitly set the aria-level for a <Heading> instance, like:
<Heading level={3} aria-level={2}>Heading content</Heading>This is necessary for use cases where the Heading level gets adjusted for responsive design reasons, but the aria-level should remain unchanged.
😯 Current Behavior
There is currently no way to override the aria-level of a Heading component:
<Heading level={3} aria-level={2}>Heading content</Heading>will render as
<h3 aria-level="2">Heading content</h3>regardless of its intended heading level within the hierarchy of the web page.
💁 Possible Solution
No response
🔦 Context
Noticed a use case in the @quarry/inventory Title component that the level for a Heading is changing depending on responsive layout.
export function Title(props: TitleProps): ReactElement {
const {children} = props;
const { setTitleId } = useInventoryContext();
const titleId = useId();
useEffect(() => setTitleId(titleId), []);
const {matchedBreakpoints} = useBreakpoint();
const level = getResponsiveProp({base: 3, L: 2}, matchedBreakpoints) as 2 | 3;
return (
<Heading gridArea="title" id={titleId} level={level}>
{children}
</Heading>
);
}💻 Examples
No response
🧢 Your Company/Team
Adobe/Accessibility
🕷 Tracking Issue
No response