@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
28 lines (27 loc) • 1.54 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { PrimaryButton } from '@workday/canvas-kit-react/button';
import { AccessibleHide, AriaLiveRegion } from '@workday/canvas-kit-react/common';
import { FormField } from '@workday/canvas-kit-react/form-field';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import { TextInput } from '@workday/canvas-kit-react/text-input';
import { createStyles } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
let liveRegionStr = '';
const flexStyles = createStyles({
gap: system.gap.md,
alignItems: 'center',
});
export const HiddenLiveRegion = () => {
const [message, setMessage] = React.useState('');
function handleChange(e) {
setMessage(e.target.value);
}
function handleSendMessage(e) {
e.preventDefault();
liveRegionStr = message;
setMessage('');
}
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "form", "aria-label": "Hidden Live Region", onSubmit: handleSendMessage, cs: flexStyles, children: [_jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Type your message:" }), _jsx(FormField.Input, { as: TextInput, onChange: handleChange, value: message })] }), _jsx(PrimaryButton, { type: "submit", children: "Send Message" })] }), _jsx(AriaLiveRegion, { children: _jsx(Text, { as: AccessibleHide, children: liveRegionStr }) })] }));
};