Fix DatePicker segment sizing and Dropdown focus visibility - #255
Merged
Conversation
DatePicker segments could shrink below a usable hit target and overflow their input at narrow widths (e.g. a 343px phone column) with 12-hour time enabled; wrap the input and give each segment a minimum 24px box. Dropdown options lacked a visible keyboard focus ring, and the focus-visible outline could lose to the selected-option background. Add a themed focus-visible box-shadow ordered after the selected rule, keep the existing forced-colors outline, and add a spec pinning the CSS cascade order plus the forced-colors contract. Update the story-count ratchet and matrix log for the four added accessibility stories, and derive the matrix's logged story count from the verified index instead of a second hardcoded literal. Refs #238, #240
This was referenced Sep 9, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two accessibility fixes: date picker segments that were too small to hit reliably, and dropdown options that painted a browser-default focus outline instead of the Cratis focus ring.
Fixed
--cratis-focus-ringtoken as an inset ring on keyboard focus, including the selected option and options in a filtered list. The forced-colorsHighlightoutline is unchanged. (A selected Dropdown option lacks a token-based focus treatment in normal colors #240)