React Date Calendar按Tab键跳过当前日期无障碍问题咨询

问题描述 #

按下Tab键时，焦点依次移动到cabana、月份切换符号、当前日期等位置，存在跳过当前日期的异常，当前使用react date calendar组件，已传入索引值。

相关实现代码 #

openDatePicker = () => {
  this.props.isKeyboardNavigationAllowed && this._datepicker && 
  this._datepicker.setOpen(true);
  if (this.props.setCarProdState) this.props.setCarProdState();
  setTimeout(() => {
    const reactDatepickerNavigation = document.querySelector(
      '.react-datepicker-popper .react-datepicker__navigation',
    );
    reactDatepickerNavigation && 
    reactDatepickerNavigation.setAttribute('tabindex', '-1');
  }, 0);
};

setDatePickerPreSelection = (date) => this._datepicker && 
this._datepicker.setPreSelection(date);

render() {
  try {
    let openToDate;
    const validOn = this.calendarSettings.validOnRange || 
    this.calendarSettings.validOn || [];
    const { blockJumpToActiveDate, dateOnMonthChange } = this.state,
      localObj = getMainObject() || getLoggedInUser(),
      highlightDates = this.props.highlightDates && 
      this.props.highlightDates.find((item) => item['active-dates']);
    if (localObj && localObj.tenantID && 
    localObj.tenantID.toLowerCase() === UIConfig.ymcB2CTenant) {
      if (highlightDates && highlightDates['active-dates'].length > 0) {
        this.props.highlightDates.forEach((item) => {
          if (blockJumpToActiveDate && item['active-dates'] && 
          item['active-dates'].length > 0) {
            openToDate = item['active-dates'][0];
          }
          if (blockJumpToActiveDate && dateOnMonthChange) {
            openToDate = dateOnMonthChange;
          }
        });
      } else if (blockJumpToActiveDate && dateOnMonthChange) {
        openToDate = dateOnMonthChange;
      } else {
        openToDate = momentTimezone();
      }
    }
    return (
      <div>
        <span aria-live="assertive" id="selectedDateId" className="sr-only"></span>
        <DatePicker
          ref={(dp) => (this._datepicker = dp)}
          locale="en-gb"
          fixedHeight={this.props.fixedHeight || false}
          selected={this.props.isDynamicPricingProd && 
          this.props.carProdsClicked ? '' : this.state.startDate}
          inline={
            this.props.isDynamicPricingProd && 
            this.props.carProdsClicked
              ? true
              : this.props.inlineDisable
              ? false
              : true
          }
          monthsShown={this.props.dispMonths}
          minDate={this.includeDates & validOn && validOn.length 
          === 0 ? this.includeDates[0] : this.props.minDate}
          maxDate={
            this.includeDates & validOn && validOn.length === 0
              ? this.includeDates[this.includeDates.length - 1]
              : this.props.maxDate
          }
          popperPlacement={this.props.popperPlacement ? 
          this.props.popperPlacement : ''}
          onChange={this.handleChange}
          tabIndex={this.props.inlineDisable ? 0 : 1}
          dateFormat={this.props.dateFormat ? this.props.dateFormat : ''}
          placeholderText={this.props.placeholderText ? 
          this.props.placeholderText : ''}
          onBlur={this.props.onBlurCustom && ((e) => 
          this.props.onBlurCustom(e, this.props.name, this.props.data))}
          filterDate={this.props.filterDate}
          openToDate={openToDate || this.props.openToDate}
          excludeDates={this.excludeDates}
          includeDates={validOn && validOn.length === 0 && 
          this.includeDates}
          calendarClassName={this.calendarSettings.calendarTooltip 
          ? 'date-picker-tooltip-on' : ''}
          highlightDates={this.props.highlightDates}
          onMonthChange={this.datePickerMonthChange}
          shouldCloseOnSelect={!this.props.disableCloseOnSelect}
          onClickOutside={this.props.onClickOutsideCustom && ((e) 
          => this.props.onClickOutsideCustom(e))}
          onFocus={this.props.isKeyboardNavigationAllowed && ((e) 
          => this.setFocusOnSelectedDate(e))}
          onKeyDown={this.props.isKeyboardNavigationAllowed && ((e) 
          => this.handleDatePickerKeyDown(e))}
        >
          {this.renderToolTip(this.state.startDate)}
        </DatePicker>
      </div>
    );
  } catch (err) {
    return logComponentRenderingError(err, 'Calendar');
  }
}

问题截图 #

内容的提问来源于stack exchange，提问作者Hack the World