@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
40 lines (39 loc) • 1.87 kB
TypeScript
import { HTMLAttributes } from 'vue';
/**
* OcHiddenAnnouncer Component
*
* Provides a live region for screen reader announcements.
* It uses ARIA live region attributes to dynamically announce changes to assistive technologies.
*
* @component
* @name OcHiddenAnnouncer
* @status ready
* @release 1.0.0
*
* @props
* @prop {('polite' | 'assertive' | 'off')} [level='polite'] - The ARIA live region level.
* - `polite`: Adds the announcement to the screen reader speech queue at the end.
* - `assertive`: Forces the announcement to output directly.
* - `off`: Disables the live region.
* @prop {string} announcement - The announcement text to be read by the screen reader.
*
* @example
* <OcHiddenAnnouncer
* level="assertive"
* announcement="Form submitted successfully."
* />
*
* @accessibility
* Screen reader software detects dynamic changes in live regions (elements with attributes like `aria-live="polite"`, `aria-live="assertive"`).
* Ensure the live region exists in the DOM before making changes to it, so assistive technology can subscribe to its updates.
* For more details, refer to the [MDN ARIA Live Regions documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).
*
* @debugging
* Debug live regions without starting a screen reader using [NerdeRegion](https://chrome.google.com/webstore/detail/nerderegion/lkcampbojgmgobcfinlkgkodlnlpjieb).
*/
interface Props {
level?: HTMLAttributes['aria-live'];
announcement: string;
}
declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
export default _default;