VisuallyHidden
Use when an element needs to be available to assistive technology (for example, a screen reader) but otherwise hidden.
import {extend, VisuallyHidden} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const visuallyHidden = root.createComponent(
VisuallyHidden,
undefined,
'Visually hidden content although available to assistive technology',
);
root.appendChild(visuallyHidden);
});
import {render, VisuallyHidden} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => <App />);
function App() {
return (
<VisuallyHidden>
Visually hidden content although available to assistive technology
</VisuallyHidden>
);
}
import {extend, VisuallyHidden} from '@shopify/post-purchase-ui-extensions';
extend('Checkout::PostPurchase::Render', (root) => {
const visuallyHidden = root.createComponent(
VisuallyHidden,
undefined,
'Visually hidden content although available to assistive technology',
);
root.appendChild(visuallyHidden);
});
import {render, VisuallyHidden} from '@shopify/post-purchase-ui-extensions-react';
render('Checkout::PostPurchase::Render', () => <App />);
function App() {
return (
<VisuallyHidden>
Visually hidden content although available to assistive technology
</VisuallyHidden>
);
}
Was this page helpful?