@ownclouders/design-system
Version:
ownCloud Design System is based on VueDesign Systems and is used to design ownCloud UI components
39 lines (38 loc) • 2.25 kB
TypeScript
/**
* Notifications are used to inform users about errors, warnings and as confirmations for their actions. They will automatically disappear after a certain amount of time.
*
* The default slot can be filled with [OcNotificationMessage](#/oC%20Components/OcNotificationMessage) elements.
*
* ## Accessibility
*
* ### Notifications for screen reader users
* This component uses so called live regions in order to announce its content to screen readers once the notification appeared (this is not the normal modus operandi for screen readers, since their reading order is usually the DOM order – when the user does not take shortcuts). There are two types of live regions: `aria-live="polite"` (equivalent to `role="status"`) and `aria-live="assertive"` (equivalent to `role="alert"`). The latter directly interrupts the current output of the screen reader, the former waits until the current output is finished and reads the announcement afterwards. Since 'assertive' should be used sparingly, only `<oc-notfication-message>`'s "danger" status prop value uses `aria-live="assertive"` (and `role="alert"`). Using `aria-live` and `role="assertive|status"` simultaneously is for compatibility reasons regarding different browser and assistive technology pairings.
*/
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
/**
* Position of the notifications.
* Valid values are: `top-left, top-center and top-right`
*/
position: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
}>, {}, {}, {
classes(): string;
}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
/**
* Position of the notifications.
* Valid values are: `top-left, top-center and top-right`
*/
position: {
type: StringConstructor;
required: false;
default: string;
validator: (value: string) => boolean;
};
}>> & Readonly<{}>, {
position: string;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
export default _default;