idaholab
Swap out react-flatpickr Date Picker
Swap out react-flatpickr as our date picker in the STIX properties panel for a picker that is more 508 compliant. The main 508 "feature" missing with react-flatpickr is the ability to use the keyboard to navigate the picker.
Response from ChatGPT after asking for 508-compliant date pickers: Yes, there are several datepicker components that are designed with accessibility in mind and are 508 compliant. These datepickers are built to meet the standards of the Web Content Accessibility Guidelines (WCAG) and Section 508 of the Rehabilitation Act. Here are a few popular 508-compliant datepickers:
- React Datepicker (React-Accessible-Datepicker) Description: This is an accessible datepicker for React that provides full keyboard navigation and screen reader support. It adheres to WCAG 2.1 and Section 508 standards. Features: Full keyboard support for navigation and selection. Accessible labels and descriptions. ARIA roles and properties for better screen reader support. Link: React Accessible Datepicker
- Material-UI Pickers Description: Material-UI provides a set of date and time pickers that are built with accessibility in mind. The pickers support keyboard navigation, screen readers, and have appropriate ARIA labels. Features: Full keyboard navigation. Screen reader-friendly with ARIA attributes. Accessibility improvements in the latest versions. Link: Material-UI Pickers
- react-dates (Airbnb) Description: The react-dates library by Airbnb is another datepicker that emphasizes accessibility. It's designed to be WCAG 2.1 compliant and works well with screen readers. Features: Supports keyboard navigation and selection. ARIA support for screen readers. Customizable and extensible. Link: react-dates
- Accessible Datepicker by Adobe Spectrum Description: Part of the Adobe Spectrum design system, this datepicker is built with accessibility as a core feature. It follows best practices for 508 compliance. Features: Keyboard and screen reader-friendly. Detailed ARIA attributes. Part of a comprehensive design system focused on accessibility. Link: Adobe Spectrum Datepicker
- Pikaday Description: Pikaday is a lightweight datepicker that can be made accessible with proper configuration. It doesn’t natively provide all the necessary ARIA attributes, but it can be extended for accessibility. Features: Lightweight and customizable. Requires additional setup for full accessibility. Link: Pikaday
- Accessible Datepicker by Fluent UI Description: Fluent UI by Microsoft offers an accessible datepicker as part of its suite of React components. It’s built with accessibility as a core principle. Features: Fully accessible with screen reader support. Keyboard navigable. Supports localization and customization. Link: Fluent UI Datepicker
Summary These datepickers are built with accessibility as a priority, ensuring that they are usable by people with disabilities, including those who rely on screen readers or keyboard navigation. When implementing them, always ensure to follow best practices for accessibility in your overall application to maintain 508 compliance.
react-flatpickr does not save manual input. Manual input is disabled as of 0c13345