2023-02-28 08:29:30 +00:00
|
|
|
<template>
|
|
|
|
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
|
|
|
<h3>Screen Reader</h3>
|
|
|
|
<p>
|
|
|
|
DeferredContent can be utilized in many use cases as a result no role is enforced, in fact a role may not be necessary if the card is used for presentational purposes only. Any valid attribute is passed to the container element so you
|
|
|
|
have full control over the roles like <a href="https://www.w3.org/TR/wai-aria/#landmark" alt="Landmark Roles">landmark</a> and attributes like <i>aria-live</i>.
|
|
|
|
</p>
|
2023-02-28 17:40:48 +00:00
|
|
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
2023-02-28 08:29:30 +00:00
|
|
|
|
|
|
|
<h3>Keyboard Support</h3>
|
|
|
|
<p>Component does not include any interactive elements.</p>
|
|
|
|
</DocSectionText>
|
|
|
|
</template>
|
2023-02-28 17:40:48 +00:00
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
code: {
|
2023-08-16 13:58:31 +00:00
|
|
|
basic: `<DeferredContent role="region" aria-live="polite" aria-label="Content loaded after page scrolled down">
|
2023-02-28 17:40:48 +00:00
|
|
|
Content
|
|
|
|
</DeferredContent>`
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|