/**
 * Exclude from `T` those types that are assignable to `U`, where `U` must exist in `T`.
 *
 * Similar to `Exclude` but requires the exclusion list to be composed of valid members of `T`.
 *
 * @see https://github.com/pelotom/type-zoo/issues/37
 */
export type ExcludeStrict<T, U extends T> = T extends U ? never : T;
/**
 * A CSS selector.
 */
export type Selector = string;
/**
 * A hash fragment, including the leading # character, e.g. "#", "#top" or "#my-heading-id"
 */
export type Hash = string;
/**
 * ARIA live region politeness values.
 * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
 */
export type AriaLivePoliteness = "off" | "polite" | "assertive";
/**
 * Specifies an element that is the target of a side effect (e.g. scroll into view, focus). This is
 * either the element itself or a selector that will return the element when passed to querySelector().
 */
export type Target = Element | Selector;
/**
 * The scroll position as x and y coordinates.
 */
export type ScrollPosition = {
    readonly x: number;
    readonly y: number;
};
/**
 * Maps from a URL hash fragment to a target element.
 *
 * Supports "#", "#top" and element IDs. The empty string returns undefined.
 *
 * Useful for scrolling to the element referred to by the hash fragment
 * in a URL (which browsers do natively, but single page apps often don't).
 *
 * See https://github.com/rafrex/react-router-hash-link (only manages scroll, not focus)
 * See https://github.com/ReactTraining/react-router/issues/394
 * See https://www.w3.org/TR/html5/single-page.html#scroll-to-the-fragment
 *
 * @param hash the hash fragment, including the leading # character, e.g. "#", "#top" or "#my-heading-id"
 */
export declare const elementFromHash: (hash: Hash) => Element | undefined;
/**
 * Set the document title.
 * See https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html
 *
 * @param title The new document title.
 */
export declare const setTitle: (title: string) => void;
/**
 * True if the specified element is within the viewport, false otherwise.
 * See https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
 *
 * @param element the element to test
 */
export declare const isInViewport: (element: Element) => boolean;
export declare const elementFromTarget: (target: Target, parent?: ParentNode) => Element | undefined;
export declare const getScrollPosition: () => ScrollPosition;
/**
 * True if the user prefers reduced motion, false otherwise.
 *
 * See https://css-tricks.com/introduction-reduced-motion-media-query/
 */
export declare const prefersReducedMotion: () => boolean;
/**
 * Scrolls the window to the given scroll position.
 *
 * For smooth scrolling behavior you might want to use the smoothscroll
 * polyfill http://iamdustan.com/smoothscroll/
 *
 * If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.
 *
 * @param scrollPosition the scroll position to scroll to
 * @param smoothScroll true for smooth scrolling, false otherwise
 */
export declare const setScrollPosition: (scrollPosition: ScrollPosition, smoothScroll?: boolean) => void;
/**
 * Focuses an element, setting `tabindex="-1"` if necessary.
 *
 * @param target the element to focus.
 * @param preventScroll true if the browser should not scroll the target element into view, false otherwise.
 */
export declare const focusElement: (target: Target, preventScroll?: boolean) => Promise<boolean>;
/**
 * Scrolls an element into view.
 *
 * For smooth scrolling behavior you might want to use the smoothscroll
 * polyfill http://iamdustan.com/smoothscroll/
 *
 * If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.
 *
 * @param element the element to scroll into view
 * @param smoothScroll true for smooth scrolling, false otherwise
 */
export declare const scrollIntoView: (element: Element, smoothScroll?: boolean) => void;
/**
 * Scrolls an element into view if it is not currently visible.
 *
 * For smooth scrolling behavior you might want to use the smoothscroll
 * polyfill http://iamdustan.com/smoothscroll/
 *
 * If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.
 *
 * @param target the element to scroll into view
 * @param smoothScroll true for smooth scrolling, false otherwise
 */
export declare const scrollIntoViewIfRequired: (target: Target, smoothScroll?: boolean, inViewport?: typeof isInViewport) => void;
/**
 * Focuses a specified element and then scrolls it (or another element) into view (if required).
 *
 * For smooth scrolling behavior you might want to use the smoothscroll
 * polyfill http://iamdustan.com/smoothscroll/
 *
 * If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.
 *
 * @param focusTarget the element to focus
 * @param scrollIntoViewTarget the element to scroll into view
 * @param smoothScroll true for smooth scrolling, false otherwise
 */
export declare const focusAndScrollIntoViewIfRequired: (focusTarget: Target, scrollIntoViewTarget: Target, smoothScroll?: boolean) => Promise<boolean>;
/**
 * Resets focus and scroll position after a SPA page navigation.
 *
 * Will attempt to move focus to the focusTarget, primaryFocusTarget,
 * document element and finally document body, in that order. If any of
 * those elements do not exist or cannot be focused, will attempt to
 * focus the next fallback element.
 *
 * For smooth scrolling behavior you might want to use the smoothscroll
 * polyfill http://iamdustan.com/smoothscroll/
 *
 * If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.
 *
 * See: https://github.com/ReactTraining/react-router/issues/5210
 *
 * @param primaryFocusTarget a CSS selector for your primary focus target,
 * e.g. `main h1`.
 * @param focusTarget the element to focus, e.g. the element identified by
 * the hash fragment of the URL.
 * @param smoothScroll true for smooth scrolling, false otherwise
 */
export declare const resetFocus: (primaryFocusTarget: Selector, focusTarget?: Target, smoothScroll?: boolean) => Promise<boolean>;
/**
 * Make an announcement to screen reader users. Useful for page navigation events.
 *
 * See https://almerosteyn.com/2017/03/accessible-react-navigation
 * See https://getbootstrap.com/docs/4.3/utilities/screen-readers/
 * See https://github.com/twbs/bootstrap/blob/ff29c1224c20b8fcf2d1e7c28426470f1dc3e40d/scss/mixins/_screen-reader.scss#L6
 *
 * @param message the message to announce to screen reader users, e.g. "navigated to about page".
 * @param announcementsDivId a DOM ID of the visually hidden announcements element, e.g. "announcements".
 */
export declare const announce: (message: string, announcementsDivId?: string, setMessageTimeout?: number, clearMessageTimeout?: number, politeness?: ExcludeStrict<AriaLivePoliteness, "off">) => Promise<unknown>;
/**
 * Hide the on-screen keyboard on touch devices like iOS and Android.
 *
 * It's useful to do this after a form submission that doesn't navigate away from the
 * current page but does update some part of the current page (e.g. dynamically updated
 * search results). If you weren't to do this the user might not be shown any feedback
 * in response to their action (form submission), because it is obscured by the keyboard.
 *
 * To hide the keyboard we temporarily set the active input or textarea to readonly and
 * disabled. To avoid a flash of readonly/disabled styles (often a gray background) you
 * can hook into the [data-oaf-keyboard-hack] html attribute. For example:
 *
 * ```
 *  // Readonly/disabled styles shouldn't be applied when this attribute is present.
 *  [data-oaf-keyboard-hack] {
 *    background-color: $input-bg !important;
 *  }
 * ```
 *
 * Note that lots of people simply `blur()` the focused input to achieve this result
 * but doing that is hostile to keyboard users and users of other AT.
 *
 * Do you need to use this?
 *
 * 1. If your form submission triggers a full page reload, you don't need this.
 * 2. If your form submission explicitly moves focus to some other element, you
 * don't need this. For example you might move focus to some new content that
 * was loaded as a result of the form submission or to a loading message.
 * 3. If your form submission leaves focus where it is, you probably want this.
 */
export declare const hideOnscreenKeyboard: () => Promise<void>;
/**
 * Like `closest()` but stops ascending the ancestor tree once it hits the specified form element.
 */
export declare const closestInsideForm: (element: Element, selector: Selector, form: Element) => Element | undefined;
/**
 * Focuses and scrolls into view the first invalid form element inside
 * a given form. Attempts to hide the onscreen keyboard on touch devices so that
 * the validation message near the first invalid form element is visible on screen.
 *
 * Call this function after you have validated a form and identified errors.
 *
 * See https://webaim.org/techniques/formvalidation/
 *
 * For smooth scrolling behavior you might want to use the smoothscroll
 * polyfill http://iamdustan.com/smoothscroll/
 *
 * If the user has indicated that they prefer reduced motion, the smoothScroll value will be ignored.
 *
 * For IE support you might want to use the closest() polyfill from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
 *
 * @param formTarget the form element to focus or a CSS selector that uniquely identifies the form to focus, e.g. `#search-form`.
 * @param invalidElementSelector the CSS selector that is used to identify invalid elements within a form, e.g. `[aria-invalid="true"]`.
 * @param elementWrapperSelector the CSS selector that matches the "wrapper" element--the closest ancestor of the form input--that contains
 *                               both the form input and its label.
 *                               This wrapper element will be scrolled into view so that both the invalid input and its label are visible.
 * @param globalFormErrorSelector the CSS selector that matches the "global" form error, i.e. an element at the top of the form that contains
 *                                an error message that isn't specific to a any given form input.
 * @param smoothScroll true for smooth scrolling, false otherwise
 */
export declare const focusInvalidForm: (formTarget: Target, invalidElementSelector: Selector, elementWrapperSelector: Selector | undefined, globalFormErrorSelector: Selector | undefined, smoothScroll?: boolean) => Promise<boolean>;