Heading group controls the heading level of headings nested within it, like H1, H2, H3. Use a heading group whenever you use a heading to ensure the experience is the same for screen reader users. When using a heading, any children related to that heading should be nested within the same heading group.
import {
render,
HeadingGroup,
Heading,
} from '@shopify/checkout-ui-extensions-react';
render('Checkout::Dynamic::Render', () => Heading <h1>
Heading <h2>
Heading <h3>
);
}
import {
extend,
HeadingGroup,
Heading,
View,
} from '@shopify/checkout-ui-extensions';
extend('Checkout::Dynamic::Render', (root) => {
const headingGroup = root.createComponent(View, undefined, [
root.createComponent(Heading, undefined, 'Heading '),
root.createComponent(HeadingGroup, undefined, [
root.createComponent(Heading, undefined, 'Heading '),
root.createComponent(HeadingGroup, undefined, [
root.createComponent(Heading, undefined, 'Heading '),
]),
]),
]);
root.appendChild(headingGroup);
});