Accessibility

1// Focus is automatically trapped within the modal
2// Users cannot tab outside the timepicker when open
3
4const picker = new TimepickerUI(input, {
5  behavior: {
6    // Modal automatically manages focus
7    focusTrap: true // Default behavior
8  }
9});
10
11picker.create();
12
13// When modal opens:
14// 1. Focus moves to the wrapper element
15// 2. Tab cycles through all focusable elements in order:
16//    - Hour input
17//    - Minute input  
18//    - Clock face numbers (all visible hour/minute values)
19//    - AM/PM buttons (in 12h mode)
20//    - Cancel button
21//    - OK button
22// 3. Shift+Tab cycles backwards
23// 4. When last element is focused and Tab is pressed, focus returns to first element
24// 5. Cannot tab to elements behind modal
25
26// When modal closes:
27// - Focus returns to the input field that triggered the modal
28
29// Note: Clock face numbers are included in Tab order, allowing keyboard-only
30// users to reach them. Once focused, arrow keys can adjust time precisely.

1/* Default focus styles for all interactive elements */
2.tp-ui-hour:focus-visible,
3.tp-ui-minutes:focus-visible,
4.tp-ui-am:focus-visible,
5.tp-ui-pm:focus-visible,
6.tp-ui-cancel-btn:focus-visible,
7.tp-ui-ok-btn:focus-visible,
8.tp-ui-keyboard-icon-wrapper:focus-visible {
9  outline: 3px solid var(--tp-primary);
10  outline-offset: 2px;
11  box-shadow: 0 0 0 4px rgba(98, 0, 238, 0.2);
12}
13
14/* High contrast mode support */
15@media (prefers-contrast: high) {
16  .tp-ui-hour:focus-visible,
17  .tp-ui-minutes:focus-visible,
18  .tp-ui-am:focus-visible,
19  .tp-ui-pm:focus-visible,
20  .tp-ui-cancel-btn:focus-visible,
21  .tp-ui-ok-btn:focus-visible {
22    outline-width: 4px;
23  }
24}
25
26/* Focus styles use :focus-visible to only show for keyboard navigation */
27/* Mouse clicks won't show focus ring, but Tab navigation will */

1// Disabled times are properly marked and skipped
2
3const picker = new TimepickerUI(input, {
4  clock: {
5    disabledTime: {
6      // Disable one or more time ranges (string or array of strings)
7      interval: ['9:00 AM - 12:00 PM', '6:00 PM - 11:59 PM'],
8
9      // Optionally disable specific hours / minutes outright
10      hours: [0, 1, 2],
11      minutes: [15, 45]
12    }
13  }
14});
15
16// Disabled times have:
17// - tabIndex = -1 (not focusable via Tab)
18// - aria-disabled="true" (announced by screen readers)
19// - Visual styling (grayed out)
20// - Skipped during arrow key navigation
21
22// Arrow key navigation automatically skips disabled values
23// If all minutes in an hour are disabled, that hour is also skipped

1/* High contrast accessible override (CSS variables use the --tp- prefix) */
2.tp-ui-modal[data-theme="dark"] {
3  --tp-bg: #000000;
4  --tp-text: #ffffff;
5  --tp-primary: #ffff00;
6  --tp-border: #ffffff;
7
8  /* Ensure all text meets 7:1 contrast ratio */
9}
10
11/* Respect user's contrast preference */
12@media (prefers-contrast: high) {
13  .tp-ui-wrapper {
14    border: 2px solid currentColor;
15  }
16
17  .tp-ui-clock-face {
18    border: 2px solid currentColor;
19  }
20}
21
22@media (prefers-contrast: more) {
23  /* Enhanced contrast for users who need it */
24  .tp-ui-wrapper {
25    background: #000000;
26    color: #ffffff;
27  }
28}

1/* CSS: Respect prefers-reduced-motion */
2@media (prefers-reduced-motion: reduce) {
3  .tp-ui-wrapper {
4    animation: none !important;
5    transition: none !important;
6  }
7
8  .tp-ui-clock-hand {
9    transition: none !important;
10  }
11
12  .tp-ui-modal {
13    animation: none !important;
14  }
15}
16
17// JavaScript: Detect user preference
18const prefersReducedMotion = window.matchMedia(
19  '(prefers-reduced-motion: reduce)'
20).matches;
21
22const picker = new TimepickerUI(input, {
23  ui: {
24    animation: !prefersReducedMotion
25  }
26});
27
28picker.create();

1// Using axe-core for accessibility testing
2import { axe } from 'jest-axe';
3
4test('timepicker should have no accessibility violations', async () => {
5  const { container } = render(
6    <TimepickerComponent />
7  );
8  
9  const results = await axe(container);
10  expect(results).toHaveNoViolations();
11});
12
13// Using @testing-library for keyboard testing
14import { render, screen } from '@testing-library/react';
15import userEvent from '@testing-library/user-event';
16
17test('can navigate with keyboard', async () => {
18  const user = userEvent.setup();
19  render(<TimepickerComponent />);
20  
21  const input = screen.getByRole('textbox');
22  await user.click(input);
23  await user.keyboard('{Enter}');
24  
25  // Verify modal opened
26  expect(screen.getByRole('dialog')).toBeInTheDocument();
27  
28  // Test arrow key navigation
29  await user.keyboard('{ArrowUp}');
30  await user.keyboard('{Enter}');
31});