@eclipse-scout/core/dist/d.ts/src/aria.d.ts

Eclipse Scout runtime

/**
 * Determines whether a labelledby id is inserted at the front or the back of current aria-labelledby value.
 */
export declare enum AriaLabelledByInsertPosition {
    FRONT = "front",
    BACK = "back"
}
/**
 * List of all available ARIA roles.
 *
 * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">WAI-ARIA Roles</a>
 */
export type AriaRole = 'alert' | 'alertdialog' | 'application' | 'article' | 'banner' | 'button' | 'cell' | 'checkbox' | 'columnheader' | 'combobox' | 'command' | 'comment' | 'complementary' | 'contentinfo' | 'definition' | 'dialog' | 'directory' | 'document' | 'feed' | 'figure' | 'form' | 'grid' | 'gridcell' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'log' | 'main' | 'mark' | 'marquee' | 'math' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'meter' | 'navigation' | 'none' | 'note' | 'option' | 'presentation' | 'progressbar' | 'radio' | 'radiogroup' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'scrollbar' | 'search' | 'searchbox' | 'separator' | 'slider' | 'spinbutton' | 'status' | 'suggestion' | 'switch' | 'tab' | 'table' | 'tablist' | 'tabpanel' | 'term' | 'textbox' | 'timer' | 'toolbar' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
export declare const aria: {
    /******************************************************************************************************************
     * Roles
     ******************************************************************************************************************/
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">WAI-ARIA Roles</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    role($elem: JQuery<Element>, role: AriaRole): void;
    /******************************************************************************************************************
     * Attributes
     ******************************************************************************************************************/
    /**
     * Links the element to the given target element by giving an id to the target element (if needed) and prepending this id to the
     * given aria attribute. If replace is set to true, completely replaces the attribute.
     *
     * For insert position see {@param position}, insert position has no effect if the labelledby property is replaced.
     */
    _linkElementWithTargetElement($elem: JQuery<Element>, $targetElement: JQuery<Element>, ariaAttribute: string, position?: AriaLabelledByInsertPosition, replace?: boolean): void;
    /**
     * Links the given element with the given label by setting aria-labelledby.
     * This allows screen readers to build a catalog of the elements on the screen and their relationships, for example, to read the label when the input is focused.
     *
     * Per default linked labels are added to existing linked labels separated by space. If you want to completely replace the linked label, set replace to true.
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby">ARIA: aria-labelledby</a>
     */
    linkElementWithLabel($elem: JQuery<Element>, $label: JQuery<Element>, position?: AriaLabelledByInsertPosition, replace?: boolean): void;
    /**
     * Links the given element with the given description by setting aria-describedBy.
     *
     * Per default linked descriptions are added to existing linked descriptions separated by space. If you want to completely replace the linked description, set replace to true.
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby">ARIA: aria-describedby</a>
     */
    linkElementWithDescription($elem: JQuery<Element>, $description: JQuery<Element>, position?: AriaLabelledByInsertPosition, replace?: boolean): void;
    /**
     * Adds {@param description} to {@param $elem} by adding and linking a screen reader only text to {@param $elem}
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby">ARIA: aria-describedby</a>
     */
    addHiddenDescriptionAndLinkToElement($elem: JQuery<Element>, id: string, description: string, position?: AriaLabelledByInsertPosition, replace?: boolean): JQuery<Element>;
    /**
     * Adds aria heading semantics to {@param $header} and correctly assigns heading level information to the heading as well as the surrounding container {@param $elem}.
     * Avoid using empty {@param $header} objects because a screen reader may ignore them in the heading structure leading to inconsistent heading levels.
     * Default aria-level for headers is level 2.
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">ARIA: heading role</a>
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level">ARIA: aria-level</a>
     */
    linkElementWithHeader($elem: JQuery<Element>, $header: JQuery<Element>, defaultLevel?: number): void;
    /**
     * In most cases you should just use {@link linkElementWithHeader} which automatically creates an aria heading for you and assigns levels correctly.
     *
     * Use this to implicitly link your heading with its container by adding the header level to the container.
     * This should ensure the heading structure is consistent. Normally your DOM structure looks something like this:
     *
     * <pre>
     * <groupbox>
     *   <label role="heading" aria-level="1">...<\label>
     *   <groupbox>
     *    <label role="heading" aria-level="2">...<\label>
     *    <groupbox>
     *      <label role="heading" aria-level="3">...<\label>
     *      ...
     *    <\groupbox>
     *   <\groupbox>
     * <\groupbox>
     * </pre>
     *
     * After linking your headers to their containers it will look something like this:
     *
     * <pre>
     * <groupbox data-aria-header-level="1">
     *   <label role="heading" aria-level="1">...<\label>
     *   <groupbox data-aria-header-level="2">
     *    <label role="heading" aria-level="2">...<\label>
     *    <groupbox data-aria-header-level="3">
     *      <label role="heading" aria-level="3">...<\label>
     *      ...
     *    <\groupbox>
     *   <\groupbox>
     * <\groupbox>
     * </pre>
     *
     * This allows us to go upwards in the DOM structure, find the last header level used, and pick a header level that fits the structure.
     * Consequently, when adding a heading to your container and before calling this method, you should use {@link _computeHeaderLevel} on
     * your container to find the last header level used and derive your header level accordingly.
     * In most cases, this means adding 1 to the derived header level.
     */
    _addHeaderLevelToElement($elem: JQuery<Element>, level: number): void;
    /**
     * In most cases you should just use {@link linkElementWithHeader} which automatically creates an aria heading for you and assigns levels correctly.
     * Derives the current header level by going upwards in the DOM structure and finding the last header level used.
     * If no parent with a heading is found, returns null.
     */
    _computeHeaderLevel($elem: JQuery<Element>): number;
    /**
     * Links the given element with the given controlled element by setting aria-controls.
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls">ARIA: aria-controls</a>
     */
    linkElementWithControls($elem: JQuery<Element>, $controls: JQuery<Element>, position?: AriaLabelledByInsertPosition, replace?: boolean): void;
    removeControls($elem: JQuery<Element>): void;
    /**
     * Links the active descendant with the given element by setting aria-activedescendant.
     *
     * When an element does not receive focus when navigating, setting the active descendant property of the field that has focus to the element that has "implied" focus
     * helps screen readers to announce elements as if they had focus. E.g. a selected sub menu item that is rendered selected, but focus remains on the main menu item.
     * Setting the active descendant of the main menu item to the sub menu item will tell the screen reader to announce the currently selected sub item.
     *
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant">ARIA: aria-activedescendant</a>
     */
    linkElementWithActiveDescendant($elem: JQuery<Element>, $activeDescendant: JQuery<Element>): void;
    removeActiveDescendant($elem: JQuery<Element>): void;
    /**
     * Adds the screen reader only css class to the element, which hides it from seeing users, but is still visible to the screen reader. This can be useful to
     * e.g. add hidden description elements and link them to field, or replacing visual content (like charts) with tables that make more sense to screen reader users.
     */
    screenReaderOnly($elem: JQuery<Element>): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required">ARIA: aria-required</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    required($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label">ARIA: aria-label</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed (if not overridden by allowEmpty).
     * @param allowEmpty if set to true, setting label to null/undefined will add an empty string.
     */
    label($elem: JQuery<Element>, label: string, allowEmpty?: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description">ARIA: aria-description</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed (if not overridden by allowEmpty).
     * @param allowEmpty if set to true, setting label to null/undefined will add an empty string.
     */
    description($elem: JQuery<Element>, description: string, allowEmpty?: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked">ARIA: aria-checked</a>
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed (if not overridden by triStateAllowed).
     * @param triStateAllowed if set to true, null/undefined will set the checked property to 'mixed'.
     */
    checked($elem: JQuery<Element>, value: boolean, triStateAllowed?: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup">ARIA: aria-haspopup</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param type value of the attribute to set. If null, attribute is removed.
     */
    hasPopup($elem: JQuery<Element>, type: string): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded">ARIA: aria-expanded</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    expanded($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected">ARIA: aria-selected</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    selected($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed">ARIA: aria-pressed</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    pressed($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live">ARIA: aria-live</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    live($elem: JQuery<Element>, value: string): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-level">ARIA: aria-level</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    level($elem: JQuery<Element>, value: number): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden">ARIA: aria-hidden</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    hidden($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-multiselectable">ARIA: aria-multiselectable</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    multiselectable($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset">ARIA: aria-posinset</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    posinset($elem: JQuery<Element>, value: number): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-setsize">ARIA: aria-setsize</a>
     *
     * @param $elem element to add/remove the attribute. If null, nothing is changed.
     * @param value value of the attribute to set. If null, attribute is removed.
     */
    setsize($elem: JQuery<Element>, value: number): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled">ARIA: aria-disabled</a>
     */
    disabled($elem: JQuery<Element>, value: boolean): void;
    /**
     * @see <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal">ARIA: aria-modal</a>
     */
    modal($elem: JQuery<Element>, value: boolean): void;
};
//# sourceMappingURL=aria.d.ts.map