@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
55 lines (54 loc) • 2.74 kB
TypeScript
import { PropType, HTMLAttributes } from 'vue';
/**
* Live regions for screen reader announcements
*
* ## Accessibility
*
* Screen reader software detect **dynamic** changes in regions registered as live regions (elements with attributes like `aria-live="polite"`, `aria-live="assertive"`). So when using this component or live regions in general make sure that the region already exists in the DOM and assistive technology can subscribe to its changes. [MDN explainer](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions):
*
* > Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
*
* ## Debugging
*
* Debug live regions without starting a screen reader using [NerdeRegion](https://chrome.google.com/webstore/detail/nerderegion/lkcampbojgmgobcfinlkgkodlnlpjieb).
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* `polite` adds the announcement to the screen reader speech queue at the end, `assertive` forces it to output directly, `off` disables the live region
**/
level: {
type: PropType<HTMLAttributes["aria-live"]>;
required: false;
default: string;
validator: (value: string) => boolean;
};
/**
* The announcement text itself.
**/
announcement: {
type: StringConstructor;
required: true;
};
}>, {}, {
id: string;
}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* `polite` adds the announcement to the screen reader speech queue at the end, `assertive` forces it to output directly, `off` disables the live region
**/
level: {
type: PropType<HTMLAttributes["aria-live"]>;
required: false;
default: string;
validator: (value: string) => boolean;
};
/**
* The announcement text itself.
**/
announcement: {
type: StringConstructor;
required: true;
};
}>> & Readonly<{}>, {
level: "off" | "assertive" | "polite";
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;