WIP(ui-calendar): add keyboard navigation and focus controll for cale… #1709
Conversation
|
| this.locale(), | ||
| this.timezone(), | ||
| props.currentDate | ||
| const dayRefs = Array.from({ length: Calendar.DAY_COUNT }, () => |
There was a problem hiding this comment.
some comment about why is this needed would be nice
| } | ||
| } | ||
|
|
||
| setFirstDayTabIndex = (tabIndex: number) => { |
There was a problem hiding this comment.
typing could be more restrictive, maybe tabIndex: 0 | -1
| } | ||
|
|
||
| setFirstDayTabIndex = (tabIndex: number) => { | ||
| const firstDay = this.state.dayRefs[0]?.current?.firstChild as HTMLElement |
There was a problem hiding this comment.
I would also add why the firstChild bit is needed (because you want the button children and not the table cell)
There was a problem hiding this comment.
maybe also call the variable firstDayButton
| } | ||
|
|
||
| handleRef = (el: Element | null) => { | ||
| this.ref = el | ||
| } | ||
|
|
||
| handleOnBlur = (e: FocusEvent<Element>) => { |
There was a problem hiding this comment.
I would name this function something like handleDaysTableBlur
| handleOnBlur = (e: FocusEvent<Element>) => { | ||
| const dataCid = e.relatedTarget?.getAttribute('data-cid') | ||
|
|
||
| if (dataCid !== 'Day') { |
| {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */} | ||
| <tbody | ||
| onBlur={(e) => this.handleOnBlur(e)} | ||
| onKeyDown={(e) => this.handleKeyDown(e)} |
| this.setFirstDayTabIndex(-1) | ||
| } | ||
|
|
||
| if (typeof dayIndex === 'number') { |
There was a problem hiding this comment.
this check is not needed, make the dayIndex param non-optional
| {role === 'presentation' | ||
| ? safeCloneElement(day, { | ||
| 'aria-describedby': this._weekdayHeaderIds[i], | ||
| tabIndex: dayIndex === 0 ? 0 : -1 |
There was a problem hiding this comment.
check if the onkeydown can be added to the child prop instead of the td (if yes, you might need to refactor the code where you call .firstChild)
…ndar