@bspk/ui 1.2.0 → 1.3.0

package/src/components/TimeInput/TimeInput.tsx

@@ -1,20 +1,25 @@
-import { SvgSchedule } from '@bspk/icons/Schedule';
-import { useEffect, useState } from 'react';
 import './time-input.scss';
+import { SvgSchedule } from '@bspk/icons/Schedule';
+import { FocusTrap } from 'focus-trap-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TimeInputListbox } from './Listbox';
 import { TimeInputSegment } from './Segment';
 import { Button } from '-/components/Button';
 import { Menu } from '-/components/Menu';
+import { Portal } from '-/components/Portal';
 import { TextInputProps } from '-/components/TextInput';
 import { useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
+import { useOutsideClick } from '-/hooks/useOutsideClick';
 import { handleKeyDown } from '-/utils/handleKeyDown';
 
-export const MINUTE_OPTIONS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
-export const HOUR_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export const MINUTE_OPTIONS = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];
+export const HOUR_OPTIONS = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+export const MERIDIEM_OPTIONS = ['AM', 'PM'];
 
-type Meridiem = 'AM' | 'PM';
-export const MERIDIEM_OPTIONS: Meridiem[] = ['AM', 'PM'];
+type Minute = (typeof MINUTE_OPTIONS)[number];
+type Hour = (typeof HOUR_OPTIONS)[number];
+type Meridiem = (typeof MERIDIEM_OPTIONS)[number];
 
 export type TimeInputProps = Pick<
     TextInputProps,
@@ -61,18 +66,18 @@ export function TimeInput({
 
     const [inputValue, setInputValue] = useState(value);
 
-    const [hours, setHours] = useState<number>();
-    const [minutes, setMinutes] = useState<number>();
-    const [meridiem, setMeridiem] = useState<Meridiem>('AM');
+    const [hours, setHours] = useState<(typeof HOUR_OPTIONS)[number]>();
+    const [minutes, setMinutes] = useState<(typeof MINUTE_OPTIONS)[number]>();
+    const [meridiem, setMeridiem] = useState<(typeof MERIDIEM_OPTIONS)[number]>('AM');
 
     useEffect(() => {
         setInputValue(
             `${hours?.toString().padStart(2, '0')}:${minutes?.toString().padStart(2, '0')} ${meridiem || ''}`.trim(),
         );
-        if (hours !== undefined && minutes === undefined) setMinutes(0);
+        if (hours !== undefined && minutes === undefined) setMinutes('00');
     }, [hours, minutes, meridiem]);
 
-    const [open, setOpen] = useState(false);
+    const [open, setOpenState] = useState(false);
 
     const { floatingStyles, elements } = useFloating({
         strategy: 'fixed',
@@ -81,9 +86,54 @@ export function TimeInput({
         hide: !open,
     });
 
+    const setOpen = useCallback(
+        (nextOpen: boolean) => {
+            setOpenState(nextOpen);
+
+            if (!elements.reference || !buttonRef.current) return;
+
+            // Focus the button when closing the menu
+            if (!nextOpen && open) buttonRef.current.focus();
+
+            // Focus the hours listbox when opening the menu
+            if (nextOpen && !open)
+                elements.reference.querySelector<HTMLElement>('[data-scroll-column="hours"]')?.focus();
+        },
+        [elements?.reference, open],
+    );
+
+    useOutsideClick({ elements: [elements.floating], callback: () => setOpen(false), disabled: !open });
+
+    const { hourOptions, minuteOptions, meridiemOptions } = useMemo(
+        () => ({
+            hourOptions: HOUR_OPTIONS.map((h) => ({
+                id: `${id}-hours-${h}`,
+                value: h,
+                label: h.toString().padStart(2, '0'),
+            })),
+            minuteOptions: MINUTE_OPTIONS.map((m) => ({
+                id: `${id}-minutes-${m}`,
+                value: m,
+                label: m.toString().padStart(2, '0'),
+            })),
+            meridiemOptions: MERIDIEM_OPTIONS.map((m) => ({
+                id: `${id}-meridiem-${m}`,
+                value: m,
+                label: m,
+            })),
+        }),
+        [id],
+    );
+
+    const listBoxRefs = useRef<{
+        hours?: HTMLElement | null;
+        minutes?: HTMLElement | null;
+        meridiem?: HTMLElement | null;
+    } | null>(null);
+    const buttonRef = useRef<HTMLElement | null>(null);
+
     return (
         <>
-            {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
             <div
                 aria-describedby={ariaErrorMessage || ariaDescribedBy || undefined}
                 data-aria-label={ariaLabel || undefined}
@@ -96,94 +146,111 @@ export function TimeInput({
                 data-size={size || undefined}
                 data-value={inputValue || undefined}
                 id={id}
-                onClick={() => {
+                onClickCapture={() => {
                     elements.reference?.querySelector<HTMLElement>('[tabIndex]')?.focus();
                 }}
-                onKeyDown={handleKeyDown({ Escape: () => setOpen(false) })}
-                ref={elements.setReference}
+                onKeyDownCapture={handleKeyDown({ Escape: () => setOpen(false) })}
+                ref={(node) => {
+                    elements.setReference(node);
+                }}
                 role="group"
             >
                 <TimeInputSegment
-                    ariaLabel={ariaLabel}
-                    defaultValue={hours}
                     disabled={disabled}
                     name={`${name}-hours`}
                     onChange={(next) => setHours(next || undefined)}
                     readOnly={readOnly}
                     type="hours"
+                    value={hours}
                 />
                 <span aria-hidden="true">:</span>
                 <TimeInputSegment
-                    ariaLabel={ariaLabel}
-                    defaultValue={minutes}
                     disabled={disabled}
                     name={`${name}-minutes`}
                     onChange={(next) => setMinutes(next || undefined)}
                     readOnly={readOnly}
                     type="minutes"
+                    value={minutes}
                 />
                 <TimeInputSegment
-                    ariaLabel={ariaLabel}
-                    defaultValue={meridiem}
                     disabled={disabled}
                     name={`${name}-meridiem`}
                     onChange={(next) => setMeridiem(next || 'AM')}
                     readOnly={readOnly}
                     type="meridiem"
+                    value={meridiem}
                 />
                 <Button
                     icon={<SvgSchedule />}
                     iconOnly
-                    label={`${open ? 'Close' : 'Open'} Time Picker`}
-                    onClick={() => {
-                        setOpen(!open);
-                        elements.reference?.focus();
+                    innerRef={(node) => {
+                        buttonRef.current = node;
                     }}
+                    label={`${open ? 'Close' : 'Open'} Time Picker`}
+                    onClick={() => setOpen(!open)}
                     variant="tertiary"
                 />
             </div>
             {!!open && (
-                <Menu
-                    floating
-                    innerRef={(node) => {
-                        if (!node) return;
-                        elements.setFloating(node as HTMLElement);
-                        node.querySelector<HTMLElement>('[data-scroll-column="hours"]')?.focus();
-                    }}
-                    onOutsideClick={() => {
-                        setOpen(false);
-                    }}
-                    owner="time-input"
-                    scroll={false}
-                    style={{ ...floatingStyles }}
-                >
-                    <div data-scroll-values>
-                        <TimeInputListbox
-                            onSelect={setHours}
-                            options={HOUR_OPTIONS.map((h) => h)}
-                            selectedValue={hours}
-                            type="hours"
-                        />
-                        <TimeInputListbox
-                            onSelect={setMinutes}
-                            options={MINUTE_OPTIONS}
-                            selectedValue={minutes}
-                            type="minutes"
-                        />
-                        <TimeInputListbox
-                            onSelect={setMeridiem}
-                            onTab={(e) => {
-                                e.preventDefault();
-                                setOpen(false);
-                                setTimeout(() => elements.reference?.focus(), 10);
-                                // Focus back on the input after closing
+                <Portal>
+                    <Menu
+                        innerRef={(node) => {
+                            if (!node) return;
+                            elements.setFloating(node as HTMLElement);
+                        }}
+                        label="Select time"
+                        owner="time-input"
+                        style={floatingStyles}
+                    >
+                        <FocusTrap
+                            focusTrapOptions={{
+                                fallbackFocus: () => listBoxRefs.current!.hours!,
+                                clickOutsideDeactivates: true,
                             }}
-                            options={MERIDIEM_OPTIONS}
-                            selectedValue={meridiem}
-                            type="meridiem"
-                        />
-                    </div>
-                </Menu>
+                        >
+                            <div
+                                data-scroll-values
+                                ref={(node) => {
+                                    listBoxRefs.current = {
+                                        hours: node?.querySelector('[data-scroll-column="hours"]') as HTMLElement,
+                                        minutes: node?.querySelector('[data-scroll-column="minutes"]') as HTMLElement,
+                                        meridiem: node?.querySelector('[data-scroll-column="meridiem"]') as HTMLElement,
+                                    };
+                                    listBoxRefs.current.hours?.focus();
+                                }}
+                            >
+                                <TimeInputListbox
+                                    onSelect={(next) => {
+                                        setHours(next as Hour);
+                                        setTimeout(() => listBoxRefs.current?.minutes?.focus(), 10);
+                                    }}
+                                    options={hourOptions}
+                                    selectedValue={hours}
+                                    type="hours"
+                                />
+                                <TimeInputListbox
+                                    onSelect={(next) => {
+                                        setMinutes(next as Minute);
+                                        setTimeout(() => listBoxRefs.current?.meridiem?.focus(), 10);
+                                    }}
+                                    options={minuteOptions}
+                                    selectedValue={minutes}
+                                    type="minutes"
+                                />
+                                <TimeInputListbox
+                                    onSelect={(next) => {
+                                        setMeridiem(next as Meridiem);
+                                        setOpen(false);
+                                        setTimeout(() => buttonRef.current?.focus(), 10);
+                                    }}
+                                    options={meridiemOptions}
+                                    selectedValue={meridiem}
+                                    type="meridiem"
+                                />
+                            </div>
+                        </FocusTrap>
+                    </Menu>
+                </Portal>
             )}
         </>
     );

package/src/components/TimeInput/time-input.scss

@@ -110,7 +110,7 @@
     }
 }
 
-[data-bspk-owner='time-input'][data-bspk='menu'] {
+[data-bspk-owner='time-input'][data-bspk-utility='menu'] {
     overflow: hidden;
     height: 324px;
 
@@ -147,21 +147,22 @@
                 font: var(--labels-base);
                 line-height: var(--spacing-sizing-10);
 
-                &[aria-selected] {
+                &[aria-selected='true'] {
                     background: var(--surface-brand-primary);
                     color: var(--foreground-brand-on-primary);
                 }
             }
 
             &:focus {
-                outline: none;
+                outline: 2px solid var(--stroke-neutral-focus);
+                border-radius: var(--radius-sm);
 
                 span[data-active] {
                     background: var(--interactions-neutral-hover-opacity);
                     outline: 2px solid var(--interactions-neutral-hover-opacity);
                     outline-offset: -2px;
 
-                    &[aria-selected] {
+                    &[aria-selected='true'] {
                         background: var(--surface-brand-primary);
                         color: var(--foreground-brand-on-primary);
                     }

package/src/components/ToggleOption/ToggleOption.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { ToggleOption } from './ToggleOption';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <ToggleOption label="Example label" />;
+
+describe('ToggleOption (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/ToggleOption/ToggleOption.tsx

@@ -1,6 +1,5 @@
-import { ReactElement } from 'react';
-
 import './toggle-option.scss';
+import { ReactElement } from 'react';
 import { CommonProps } from '-/types/common';
 
 export type ToggleOptionControlProps<T extends { 'aria-label'?: string }> = Omit<T, 'aria-label'> &

package/src/components/Tooltip/Tooltip.rtl.test.tsx

@@ -0,0 +1,24 @@
+import { Tooltip } from './Tooltip';
+import { Button } from '-/components/Button';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => (
+    <Tooltip label="Example label" placement="top">
+        {(triggerProps) => (
+            <Button label="Trigger button" {...triggerProps}>
+                Click me
+            </Button>
+        )}
+    </Tooltip>
+);
+
+describe('Tooltip (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example label')).toBeInTheDocument();
+    });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -1,22 +1,15 @@
+import './tooltip.scss';
 import { ReactElement, useRef, useState } from 'react';
-
 import { Portal } from '-/components/Portal';
 import { Placement, useFloating } from '-/hooks/useFloating';
 import { useId } from '-/hooks/useId';
 
-import './tooltip.scss';
-
-const DEFAULT = {
-    placement: 'top',
-    showTail: true,
-    disabled: false,
-} as const;
-
 export type TooltipTriggerProps = {
     onMouseOver?: () => void;
     onMouseLeave?: () => void;
     onFocus?: () => void;
-    'aria-describedby'?: string;
+    onBlur?: () => void;
+    'aria-labelledby'?: string;
 };
 
 export type TooltipProps = {
@@ -62,13 +55,7 @@ export type TooltipProps = {
  * @name Tooltip
  * @phase UXReview
  */
-export function Tooltip({
-    placement = DEFAULT.placement,
-    label,
-    children,
-    disabled = DEFAULT.disabled,
-    showTail = DEFAULT.showTail,
-}: TooltipProps) {
+export function Tooltip({ placement = 'top', label, children, disabled = false, showTail = true }: TooltipProps) {
     const id = useId();
     const [show, setShow] = useState(false);
 
@@ -80,24 +67,20 @@ export function Tooltip({
         offsetOptions: showTail ? 8 : 4,
         arrowRef,
         hide: !show,
+        refWidth: false,
     });
 
-    const child = children(
-        disabled
-            ? {}
-            : {
-                  onMouseOver: () => setShow(true),
-                  onMouseLeave: () => setShow(false),
-                  onFocus: () => setShow(true),
-                  'aria-describedby': id,
-              },
-    );
-
-    if (disabled) return child;
+    if (disabled) return children({});
 
     return (
         <>
-            {child}
+            {children({
+                onMouseOver: () => setShow(true),
+                onMouseLeave: () => setShow(false),
+                onFocus: () => setShow(true),
+                onBlur: () => setShow(false),
+                'aria-labelledby': id,
+            })}
             {label && (
                 <Portal>
                     <div
@@ -106,7 +89,7 @@ export function Tooltip({
                         id={id}
                         ref={(node) => {
                             elements.setFloating(node);
-                            elements.setReference(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
+                            elements.setReference(document.querySelector<HTMLElement>(`[aria-labelledby="${id}"]`));
                         }}
                         role="tooltip"
                         style={floatingStyles}

package/src/components/Tooltip/TooltipExample.tsx

@@ -6,14 +6,12 @@ export const TooltipExample: ComponentExample<TooltipProps> = {
     render: ({ props: state, Component }) => {
         return (
             <>
-                <Component {...state} placement={[state.placement].flat()[0] || 'top'}>
-                    {(triggerProps) => (
-                        <Button
-                            label={`Hover over me ${'data-variant-value' in state ? `(${state['data-variant-value']})` : ''}`}
-                            variant="secondary"
-                            {...triggerProps}
-                        />
-                    )}
+                <Component
+                    {...state}
+                    label={`Hover over me ${state.label || ''}`}
+                    placement={[state.placement].flat()[0] || 'top'}
+                >
+                    {(triggerProps) => <Button {...triggerProps} label="Hover over me" variant="secondary" />}
                 </Component>
             </>
         );

package/src/components/Tooltip/tooltip.scss

@@ -2,7 +2,6 @@
     position: fixed;
     pointer-events: none;
     z-index: var(--z-index-tooltip-popover);
-    width: max-content !important;
 
     [data-text] {
         display: block;
@@ -16,7 +15,6 @@
         padding: var(--spacing-sizing-01) var(--spacing-sizing-02);
         border: none;
         transition: opacity 0.2s ease-in-out;
-        width: max-content;
     }
 
     --arrow-size: var(--spacing-sizing-01);

package/src/components/TopNavigation/TopNavigation.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { TopNavigation } from './TopNavigation';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <TopNavigation>Example content</TopNavigation>;
+
+describe('TopNavigation (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example content')).toBeInTheDocument();
+    });
+});

package/src/components/Truncated/Truncated.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { Truncated } from './Truncated';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Truncated>Example content</Truncated>;
+
+describe('Truncated (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example content')).toBeInTheDocument();
+    });
+});

package/src/components/Truncated/Truncated.tsx

@@ -1,5 +1,5 @@
+import './truncated.scss';
 import { ElementType } from 'react';
-
 import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { useTruncatedText } from '-/hooks/useTruncatedText';
 import { ElementConstructorProps } from '-/types/common';
@@ -47,15 +47,8 @@ export function Truncated<As extends ElementType = 'span'>({
             {...props}
             data-bspk-utility="truncated"
             ref={(node) => setElement(node)}
-            style={{
-                maxWidth: '100%',
-                ...props.style,
-                display: 'inline-block',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-            }}
             {...triggerProps}
+            role={isTruncated ? 'note' : props.role}
         >
             {children}
         </span>

package/src/components/Truncated/truncated.scss

@@ -0,0 +1,8 @@
+[data-bspk-utility='truncated'] {
+    max-width: 100%;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: transparent;
+}

package/src/components/Txt/Txt.rtl.test.tsx

@@ -0,0 +1,15 @@
+import { Txt } from './Txt';
+import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
+import { render } from '-/rtl/util';
+
+const TestBed = () => <Txt>Example content</Txt>;
+
+describe('Txt (RTL)', () => {
+    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
+
+    it('renders', () => {
+        const { getByText } = render(<TestBed />);
+
+        expect(getByText('Example content')).toBeInTheDocument();
+    });
+});

package/src/components/UIProvider/AriaLiveMessageHandler.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useEventListener } from '-/hooks/useAddEventListener';
+import { useTimeout } from '-/hooks/useTimeout';
+import { AriaLiveMessage } from '-/utils/uiContext';
+
+export function sendAriaLiveMessage(message: string, live: 'assertive' | 'polite' = 'polite') {
+    document.dispatchEvent(new CustomEvent('aria-live', { detail: { message, live } }));
+}
+
+/**
+ * AriaLiveMessageHandler is a single use component that listens for aria-live messages and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this handler.
+ *
+ * We don't store the message in context to avoid unnecessary re-renders of all components that consume the context. :)
+ *
+ * We queue messages to ensure that they are read by screen readers.
+ *
+ * After the message is read, we clear it after a short delay to allow for subsequent messages to be read.
+ */
+export function AriaLiveMessageHandler() {
+    const [ariaLiveMessage, setAriaLiveMessage] = useState<AriaLiveMessage | undefined>(undefined);
+
+    const timeout = useTimeout();
+
+    useEventListener(
+        'aria-live',
+        (event: CustomEvent) => {
+            const { message, live } = event.detail;
+            // Clear any existing message to ensure that screen readers read the new message
+            setAriaLiveMessage(undefined);
+            timeout.set(() => setAriaLiveMessage({ message, live: live || 'polite' }), 10);
+        },
+        document,
+    );
+
+    return (
+        ariaLiveMessage && (
+            <div aria-live={ariaLiveMessage?.live || 'polite'} data-sr-only role="alert">
+                {ariaLiveMessage?.message}
+            </div>
+        )
+    );
+}

package/src/components/UIProvider/UIProvider.tsx

@@ -1,21 +1,33 @@
 import { useState, ReactNode } from 'react';
-
+import { AriaLiveMessageHandler, sendAriaLiveMessage } from './AriaLiveMessageHandler';
 import { useEventListener } from '-/hooks/useAddEventListener';
 import { useDebounceState } from '-/hooks/useDebounceState';
 import { useIsomorphicEffect } from '-/hooks/useIsomorphicEffect';
 import { UIContext, ColorTheme } from '-/utils/uiContext';
 
 export type UIProviderProps = {
+    /**
+     * The children elements that will have access to the UI context.
+     *
+     * @required
+     */
     children: ReactNode;
 };
 
 /**
- * UIProvider is a React context provider that manages the UI state, including theme and responsive state.
+ * UIProvider is a React context provider that manages the UI state.
+ *
+ * UI state includes, theme, setTheme, responsive state, aria live messages
+ *
+ * This provider should wrap the root of your application to ensure that all components have access to the UI context.
  *
  * @name UIProvider
+ *
+ * @phase Utility
  */
 export function UIProvider({ children }: UIProviderProps) {
     const [theme, setTheme] = useState<ColorTheme>('light');
+    // Keep track of device width to determine if we are in mobile, tablet, or desktop mode
 
     const [deviceWidth, setDeviceWidth] = useDebounceState(() => {
         return typeof window !== 'undefined' ? window.innerWidth : 0;
@@ -40,9 +52,11 @@ export function UIProvider({ children }: UIProviderProps) {
                 isMobile: deviceWidth < 640,
                 isTablet: deviceWidth > 640 && deviceWidth < 1024,
                 isDesktop: deviceWidth >= 1024,
+                sendAriaLiveMessage,
             }}
         >
             {children}
+            <AriaLiveMessageHandler />
         </UIContext.Provider>
     );
 }