Skip to content

Commit 58d0c80

Browse files
arthurdennerarthurdenner
authored
feat: improve keyboard handling and events (#513)
* fix(a11y): persist selected button through rerender * fix(datepicker): properly fire onBlur events * feat(datepicker): support onFocus event * refactor(datepicker): update data-testid for clear icon * fix(a11y): turn clear button keyboard-accessible * feat(datepicker): support autoFocus prop * feat(a11y): navigate between dates/buttons with keyboard
1 parent 6cd97ef commit 58d0c80

File tree

14 files changed

+350
-274
lines changed

14 files changed

+350
-274
lines changed

‎README.md

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -73,27 +73,28 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
7373

7474
### Own Props
7575

76-
| property | type | required | default | description |
77-
| -------------------- | ----------------------------------- | -------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
78-
| allowOnlyNumbers | boolean | no | true | Allows the user enter only numbers |
79-
| autoComplete | string | no | -- | Specifies if the input should have autocomplete enabled |
80-
| clearIcon | SemanticICONS \| React.ReactElement | no | 'close' | An [icon from semantic-ui-react](https://react.semantic-ui.com/elements/icon/) or a custom component. The custom component will get two props: `data-testid` and `onClick`. |
81-
| clearOnSameDateClick | boolean | no | true | Controls whether the datepicker's state resets if the same date is selected in succession. |
82-
| clearable | boolean | no | true | Allows the user to clear the value |
83-
| datePickerOnly | boolean | no | false | Allows the date to be selected only via the date picker and disables the text input |
84-
| filterDate | function | no | () => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not |
85-
| format | string | no | 'YYYY-MM-DD' | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
86-
| icon | SemanticICONS \| React.ReactElement | no | 'calendar' | An [icon from semantic-ui-react](https://react.semantic-ui.com/elements/icon/) or a custom component. The custom component will get two props: `data-testid` and `onClick`. |
87-
| inline | boolean | no | false | Uses an inline variant, without the input and the features related to it, e.g. clearable datepicker |
88-
| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked |
89-
| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected |
90-
| locale | string | no | 'en-US' | Filename of the locale to be used. PS: Feel free to submit PR's with more locales! |
91-
| onBlur | function | no | () => {} | Callback fired when the input loses focus |
92-
| onChange | function | no | () => {} | Callback fired when the value changes |
93-
| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
94-
| showToday | boolean | no | true | Hides the "Today" button if false |
95-
| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
96-
| value | Date\|Date[] | no | -- | The value of the datepicker |
76+
| property | type | required | default | description |
77+
| -------------------- | ----------------------------------- | -------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
78+
| allowOnlyNumbers | boolean | no | true | Allows the user enter only numbers |
79+
| autoComplete | string | no | -- | Specifies if the input should have autocomplete enabled |
80+
| clearIcon | SemanticICONS \| React.ReactElement | no | 'close' | An [icon from semantic-ui-react](https://react.semantic-ui.com/elements/icon/) or a custom component. The custom component will get two props: `data-testid` and `onClick`. |
81+
| clearOnSameDateClick | boolean | no | true | Controls whether the datepicker's state resets if the same date is selected in succession. |
82+
| clearable | boolean | no | true | Allows the user to clear the value |
83+
| datePickerOnly | boolean | no | false | Allows the date to be selected only via the date picker and disables the text input |
84+
| filterDate | function | no | (date) => true | Function that receives each date and returns a boolean to indicate whether it is enabled or not |
85+
| format | string | no | 'YYYY-MM-DD' | Specifies how the date will be formatted using the [date-fns' format](https://date-fns.org/v1.29.0/docs/format) |
86+
| icon | SemanticICONS \| React.ReactElement | no | 'calendar' | An [icon from semantic-ui-react](https://react.semantic-ui.com/elements/icon/) or a custom component. The custom component will get two props: `data-testid` and `onClick`. |
87+
| inline | boolean | no | false | Uses an inline variant, without the input and the features related to it, e.g. clearable datepicker |
88+
| keepOpenOnClear | boolean | no | false | Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked |
89+
| keepOpenOnSelect | boolean | no | false | Keeps the datepicker open when a date is selected |
90+
| locale | string | no | 'en-US' | Filename of the locale to be used. PS: Feel free to submit PR's with more locales! |
91+
| onBlur | function | no | (event) => {} | Callback fired when the input loses focus |
92+
| onFocus | function | no | (event) => {} | Callback fired when the input gets focused focus |
93+
| onChange | function | no | (event, data) => {} | Callback fired when the value changes |
94+
| pointing | string | no | 'left' | Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right' |
95+
| showToday | boolean | no | true | Hides the "Today" button if false |
96+
| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
97+
| value | Date\|Date[] | no | -- | The value of the datepicker |
9798

9899
### Form.Input Props
99100

@@ -136,8 +137,6 @@ In order to customize the elements, you can override the styles of the classes b
136137
137138
## Roadmap
138139

139-
- Improve accessibility
140-
> @donysukardi did some work on accessibility in the BaseDatePicker, but I couldn't get it working correcly. Feel free to help on this!
141140
- Add more tests (including e2e)
142141

143142
> Feel free to open issues and/or create PRs to improve other aspects of the library!
@@ -180,6 +179,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
180179

181180
<!-- markdownlint-enable -->
182181
<!-- prettier-ignore-end -->
182+
183183
<!-- ALL-CONTRIBUTORS-LIST:END -->
184184

185185
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

‎src/__tests__/_utils.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,19 @@ import DatePicker from '../';
66
export const setup = (props: Partial<SemanticDatepickerProps> = {}) => {
77
const options = render(<DatePicker onChange={jest.fn()} {...props} />);
88
const getQuery = props.inline ? options.queryByTestId : options.getByTestId;
9+
const getClearIcon = () => options.getByTestId('datepicker-clear-icon');
910
const getIcon = () => options.getByTestId('datepicker-icon');
11+
const datePickerInput = getQuery('datepicker-input') as HTMLInputElement;
1012

1113
return {
1214
...options,
15+
datePickerInput,
16+
getClearIcon,
1317
getIcon,
14-
openDatePicker: () => fireEvent.click(getIcon()),
18+
openDatePicker: () => fireEvent.focus(datePickerInput),
1519
rerender: (newProps?: Partial<SemanticDatepickerProps>) =>
1620
options.rerender(
1721
<DatePicker onChange={jest.fn()} {...props} {...newProps} />
1822
),
19-
datePickerInput: getQuery('datepicker-input')
20-
?.firstChild as HTMLInputElement,
2123
};
2224
};

0 commit comments

Comments
 (0)