Component
Date filter
Form fields to filter a finder by a date range
How it looks (preview) (preview all)
How to call this component
<%= render "components/date_filter", {
name: "Closed",
key: "form-key"
} %>Accessibility acceptance criteria
The component must only include aria-controls attributes on inputs if an element with the ID specified exists on the page.
Form labels must:
- be associated with a form field
- focus the associated field when clicked
Text input fields must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
Other examples
Aria controls (preview)
aria_controls_id adds an aria-controls attribute to each input. This makes it easier for users of assitive tech to jump from them to the part of the page they’re updating.
The aria_controls_id must be set to the ID of an element that’s on the page or it won’t be included.
<%= render "components/date_filter", {
name: "Closed",
key: "form-key-2",
aria_controls_id: "js-search-results-info"
} %>With values (preview)
<%= render "components/date_filter", {
name: "Opened",
key: "another-form-key",
from_value: "01/01/1900",
to_value: "01/01/2000"
} %>