@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
57 lines (56 loc) • 4.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { CountBadge } from '@workday/canvas-kit-react/badge';
import { SecondaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
import { AccessibleHide, AriaLiveRegion, useUniqueId } from '@workday/canvas-kit-react/common';
import { Flex } from '@workday/canvas-kit-react/layout';
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
import { createStyles } from '@workday/canvas-kit-styling';
import { assistantIcon, inboxIcon, notificationsIcon } from '@workday/canvas-system-icons-web';
import { system } from '@workday/canvas-tokens-web';
const MyTasksLiveBadge = ({ cnt }) => {
// use tooltip to assign name,
// use AriaLiveRegion inside button,
// assign name to live region referencing the button,
// use BadgeCount inside live region,
// use AccessibleHide to create invisible word "new" after badge
// use aria-describedby on button, referencing live region container to set description
// Safari + VO => not working at all
// JAWS 2024 + Chrome / Edge => works as expected :)
// NVDA + Chrome / Edge => works as expected :)
// Firefox => isn't announcing description on focus, only announces "X New" live (missing button name)
const badgeID = useUniqueId();
const myTasksID = useUniqueId();
return (_jsx(Tooltip, { title: "My Tasks", children: _jsx(TertiaryButton, { icon: inboxIcon, id: myTasksID, "aria-describedby": badgeID, children: _jsxs(AriaLiveRegion, { id: badgeID, "aria-labelledby": myTasksID, children: [_jsx(CountBadge, { count: cnt }), _jsx(AccessibleHide, { children: "New" })] }) }) }));
};
// use AriaLiveRegion around the button,
// use Tooltip to assign the name of the button,
// make sure Tooltip title string includes count value
// Chrome + VO => Announces name "notifications X new" and innerText 'X'
// Safari + VO => Works as expected :)
// JAWS 2024 => Announces full button name twice (previous state, then new state)
// JAWS 2024 + Firefox => Works as expected :)
// NVDA (All Browsers) => Atomic property isn't working, only announcing number change, announces twice
const NotificationsLiveBadge = ({ cnt }) => (_jsx(AriaLiveRegion, { children: _jsx(Tooltip, { title: `Notifications ${cnt} new`, children: _jsx(TertiaryButton, { icon: notificationsIcon, children: _jsx(CountBadge, { count: cnt }) }) }) }));
const AssistantLiveBadge = ({ cnt }) => {
// use AriaLiveRegion around the button
// use muted type Tooltip (avoid using aria-label to name button)
// use AccessibleHide inside of button to compose name
// Chrome + VO => announces twice
// Safari + VO => works as expected :)
const lbl = 'Workday Assistant';
return (_jsx(AriaLiveRegion, { children: _jsx(Tooltip, { title: lbl, type: "muted", children: _jsxs(TertiaryButton, { icon: assistantIcon, children: [_jsx(AccessibleHide, { children: lbl }), _jsx(CountBadge, { count: cnt }), _jsx(AccessibleHide, { children: "New" })] }) }) }));
};
const containerStyles = createStyles({
padding: system.padding.md,
gap: system.gap.md,
});
export const IconButtonsWithLiveBadges = () => {
const [counter, setCounter] = React.useState(0);
const [notifications, setNotifications] = React.useState(0);
const [assistant, setAssistant] = React.useState(0);
const handleAddTask = () => setCounter(prev => prev + 1);
const handleAddNotification = () => setNotifications(prev => prev + 1);
const handleAssistant = () => setAssistant(prev => prev + 1);
return (_jsxs(_Fragment, { children: [_jsxs(Flex, { as: "header", cs: containerStyles, children: [_jsx(AssistantLiveBadge, { cnt: assistant }), _jsx(NotificationsLiveBadge, { cnt: notifications }), _jsx(MyTasksLiveBadge, { cnt: counter })] }), _jsxs(Flex, { as: "main", cs: containerStyles, children: [_jsx(SecondaryButton, { onClick: handleAssistant, children: "Add a Message" }), _jsx(SecondaryButton, { onClick: handleAddNotification, children: "Add a Notification" }), _jsx(SecondaryButton, { onClick: handleAddTask, children: "Add an item to My Tasks" })] })] }));
};