30 lines
877 B
Vue
30 lines
877 B
Vue
<template>
|
|
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
|
|
<h3>Screen Reader</h3>
|
|
<p>
|
|
ProgressBar components uses <i>progressbar</i> role along with <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using <i>aria-labelledby</i> and
|
|
<i>aria-label</i> props.
|
|
</p>
|
|
|
|
<DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz v-bind="$attrs" />
|
|
|
|
<h3>Keyboard Support</h3>
|
|
<p>Not applicable.</p>
|
|
</DocSectionText>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
code: {
|
|
basic: `<span id="label_status" />
|
|
<ProgressBar aria-labelledby="label_status" />
|
|
|
|
<ProgressBar aria-label="Status" />`
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|