@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
72 lines (70 loc) • 2.48 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useEffect, useMemo, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import debounce from 'lodash/debounce';
const assitiveTextStyles = css({
border: 0,
clip: 'rect(0 0 0 0)',
height: '1px',
marginbottom: '-1px',
marginright: '-1px',
overflow: 'hidden',
padding: 0,
position: 'absolute',
whitespace: 'nowrap',
width: '1px'
});
export const AssistiveText = ({
assistiveText = '',
isInFocus = false,
id = '',
statusDebounceMillis: _statusDebounceMillis = 1400
}) => {
const [bump, setBump] = useState(false);
const [debounced, setDebounced] = useState(false);
const [silenced, setSilenced] = useState(false);
const debounceStatusUpdate = useMemo(() => debounce(() => {
const shouldSilence = !isInFocus;
setBump(prevBump => !prevBump);
setDebounced(true);
setSilenced(shouldSilence);
}), [isInFocus]);
useEffect(() => {
if (!debounced) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
debounceStatusUpdate();
return () => {
debounceStatusUpdate.cancel();
};
}
}, [assistiveText, isInFocus, debounced, debounceStatusUpdate]);
useEffect(() => {
if (debounced) {
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setBump(prevBump => !prevBump);
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setDebounced(true);
// eslint-disable-next-line @atlassian/perf-linting/no-chain-state-updates -- Ignored via go/ees017 (to be fixed)
setSilenced(!isInFocus);
}
}, [assistiveText, isInFocus, debounced]);
return jsx("div", {
css: assitiveTextStyles
}, jsx("div", {
"data-testid": id + '__status--A',
id: id + '__status--A',
role: "status",
"aria-atomic": "true",
"aria-live": "polite"
}, !silenced && debounced && bump ? assistiveText : ''), jsx("div", {
"data-testid": id + '__status--B',
id: id + '__status--B',
role: "status",
"aria-atomic": "true",
"aria-live": "polite"
}, !silenced && debounced && !bump ? assistiveText : ''));
};