HeadingGroup

Heading groups provide the document structure that accessibility technology uses to navigate the checkout. When you use a heading, any children related to that heading should be nested in a heading group. This ensures that any nested headings will use a semantically-appropriate heading level.

Anchor to ExampleExample

import {extend, HeadingGroup, Heading, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const headingGroup = root.createComponent(View, undefined, [

root.createComponent(Heading, undefined, 'Hi John Doe! (h1)'),

root.createComponent(HeadingGroup, undefined, [

root.createComponent(Heading, undefined, 'Your account (h2)'),

root.createComponent(HeadingGroup, undefined, [

root.createComponent(Heading, undefined, 'Change Password (h3)'),

]),

]);

root.appendChild(headingGroup);

});

import {

render,

HeadingGroup,

Heading,

View,

} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

<View>

<Heading>Your account (h2)</Heading>

<Heading>Change Password (h3)</Heading>

</HeadingGroup>

</View>

);

}

import {extend, HeadingGroup, Heading, View} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const headingGroup = root.createComponent(View, undefined, [
    root.createComponent(Heading, undefined, 'Hi John Doe! (h1)'),
    root.createComponent(HeadingGroup, undefined, [
      root.createComponent(Heading, undefined, 'Your account (h2)'),
      root.createComponent(HeadingGroup, undefined, [
        root.createComponent(Heading, undefined, 'Change Password (h3)'),
      ]),
    ]),
  ]);

  root.appendChild(headingGroup);
});

import {
  render,
  HeadingGroup,
  Heading,
  View,
} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <View>
      <Heading>Hi John Doe! (h1)</Heading>

      <HeadingGroup>
        <Heading>Your account (h2)</Heading>

        <HeadingGroup>
          <Heading>Change Password (h3)</Heading>
        </HeadingGroup>
      </HeadingGroup>
    </View>
  );
}

Was this page helpful?