Ensure tabIndex is number instead of string (mastodon#24409)

app/javascript/mastodon/components/admin/ReportReasonSelector.jsx

@@ -33,7 +33,7 @@ class Category extends React.PureComponent {
  const { id, text, disabled, selected, children } = this.props;
 
  return (
- <div tabIndex='0' role='button' className={classNames('report-reason-selector__category', { selected, disabled })} onClick={this.handleClick}>
+ <div tabIndex={0} role='button' className={classNames('report-reason-selector__category', { selected, disabled })} onClick={this.handleClick}>
  {selected && <input type='hidden' name='report[category]' value={id} />}
 
  <div className='report-reason-selector__category__label'>
@@ -74,7 +74,7 @@ class Rule extends React.PureComponent {
  const { id, text, disabled, selected } = this.props;
 
  return (
- <div tabIndex='0' role='button' className={classNames('report-reason-selector__rule', { selected, disabled })} onClick={this.handleClick}>
+ <div tabIndex={0} role='button' className={classNames('report-reason-selector__rule', { selected, disabled })} onClick={this.handleClick}>
  <span className={classNames('poll__input', { checkbox: true, active: selected, disabled })} />
  {selected && <input type='hidden' name='report[rule_ids][]' value={id} />}
  {text}

app/javascript/mastodon/components/autosuggest_input.jsx

@@ -180,7 +180,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
  }
 
  return (
- <div role='button' tabIndex='0' key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
+ <div role='button' tabIndex={0} key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
  {inner}
  </div>
  );

app/javascript/mastodon/components/autosuggest_textarea.jsx

@@ -186,7 +186,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
  }
 
  return (
- <div role='button' tabIndex='0' key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
+ <div role='button' tabIndex={0} key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
  {inner}
  </div>
  );

app/javascript/mastodon/components/column_back_button_slim.jsx

@@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
  render () {
  return (
  <div className='column-back-button--slim'>
- <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
+ <div role='button' tabIndex={0} onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
  <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
  <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
  </div>

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -119,7 +119,7 @@ class DropdownMenu extends React.PureComponent {
 
  return (
  <li className='dropdown-menu__item' key={`${text}-${i}`}>
- <a href={href} target={target} data-method={method} rel='noopener noreferrer' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
+ <a href={href} target={target} data-method={method} rel='noopener noreferrer' role='button' tabIndex={0} ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
  {text}
  </a>
  </li>

app/javascript/mastodon/components/gifv.jsx

@@ -46,7 +46,7 @@ export default class GIFV extends React.PureComponent {
  width={width}
  height={height}
  role='button'
- tabIndex='0'
+ tabIndex={0}
  aria-label={alt}
  title={alt}
  lang={lang}
@@ -57,7 +57,7 @@ export default class GIFV extends React.PureComponent {
  <video
  src={src}
  role='button'
- tabIndex='0'
+ tabIndex={0}
  aria-label={alt}
  title={alt}
  lang={lang}

app/javascript/mastodon/components/icon_button.jsx

@@ -23,7 +23,7 @@ export default class IconButton extends React.PureComponent {
  inverted: PropTypes.bool,
  animate: PropTypes.bool,
  overlay: PropTypes.bool,
- tabIndex: PropTypes.string,
+ tabIndex: PropTypes.number,
  counter: PropTypes.number,
  obfuscateCount: PropTypes.bool,
  href: PropTypes.string,
@@ -36,7 +36,7 @@ export default class IconButton extends React.PureComponent {
  disabled: false,
  animate: false,
  overlay: false,
- tabIndex: '0',
+ tabIndex: 0,
  ariaHidden: false,
  };
 

app/javascript/mastodon/components/intersection_observer_article.jsx

@@ -113,15 +113,15 @@ export default class IntersectionObserverArticle extends React.Component {
  aria-setsize={listLength}
  style={{ height: `${this.height || cachedHeight}px`, opacity: 0, overflow: 'hidden' }}
  data-id={id}
- tabIndex='0'
+ tabIndex={0}
  >
  {children && React.cloneElement(children, { hidden: true })}
  </article>
  );
  }
 
  return (
- <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex='0'>
+ <article ref={this.handleRef} aria-posinset={index + 1} aria-setsize={listLength} data-id={id} tabIndex={0}>
  {children && React.cloneElement(children, { hidden: false })}
  </article>
  );

app/javascript/mastodon/components/picture_in_picture_placeholder.jsx

@@ -58,7 +58,7 @@ class PictureInPicturePlaceholder extends React.PureComponent {
  const { height } = this.state;
 
  return (
- <div ref={this.setRef} className='picture-in-picture-placeholder' style={{ height }} role='button' tabIndex='0' onClick={this.handleClick}>
+ <div ref={this.setRef} className='picture-in-picture-placeholder' style={{ height }} role='button' tabIndex={0} onClick={this.handleClick}>
  <Icon id='window-restore' />
  <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
  </div>

app/javascript/mastodon/components/poll.jsx

@@ -154,7 +154,7 @@ class Poll extends ImmutablePureComponent {
  {!showResults && (
  <span
  className={classNames('poll__input', { checkbox: poll.get('multiple'), active })}
- tabIndex='0'
+ tabIndex={0}
  role={poll.get('multiple') ? 'checkbox' : 'radio'}
  onKeyPress={this.handleOptionKeyPress}
  aria-checked={active}

app/javascript/mastodon/components/status.jsx

@@ -337,7 +337,7 @@ class Status extends ImmutablePureComponent {
  if (hidden) {
  return (
  <HotKeys handlers={handlers}>
- <div ref={this.handleRef} className={classNames('status__wrapper', { focusable: !this.props.muted })} tabIndex='0'>
+ <div ref={this.handleRef} className={classNames('status__wrapper', { focusable: !this.props.muted })} tabIndex={0}>
  <span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
  <span>{status.get('content')}</span>
  </div>
@@ -354,7 +354,7 @@ class Status extends ImmutablePureComponent {
 
  return (
  <HotKeys handlers={minHandlers}>
- <div className='status__wrapper status__wrapper--filtered focusable' tabIndex='0' ref={this.handleRef}>
+ <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
  <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
  {' '}
  <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>

app/javascript/mastodon/components/status_content.jsx

@@ -268,7 +268,7 @@ class StatusContent extends React.PureComponent {
  }
 
  return (
- <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+ <div className={classNames} ref={this.setRef} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
  <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}>
  <span dangerouslySetInnerHTML={spoilerContent} className='translate' lang={lang} />
  {' '}
@@ -286,7 +286,7 @@ class StatusContent extends React.PureComponent {
  } else if (this.props.onClick) {
  return (
  <>
- <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+ <div className={classNames} ref={this.setRef} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
  <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
 
  {poll}
@@ -298,7 +298,7 @@ class StatusContent extends React.PureComponent {
  );
  } else {
  return (
- <div className={classNames} ref={this.setRef} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+ <div className={classNames} ref={this.setRef} tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
  <div className='status__content__text status__content__text--visible translate' lang={lang} dangerouslySetInnerHTML={content} />
 
  {poll}

app/javascript/mastodon/features/about/index.jsx

@@ -67,7 +67,7 @@ class Section extends React.PureComponent {
 
  return (
  <div className={classNames('about__section', { active: !collapsed })}>
- <div className='about__section__title' role='button' tabIndex='0' onClick={this.handleClick}>
+ <div className='about__section__title' role='button' tabIndex={0} onClick={this.handleClick}>
  <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} fixedWidth /> {title}
  </div>
 

app/javascript/mastodon/features/audio/index.jsx

@@ -470,7 +470,7 @@ class Audio extends React.PureComponent {
  }
 
  return (
- <div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex='0' onKeyDown={this.handleKeyDown}>
+ <div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
 
  <Blurhash
  hash={blurhash}
@@ -493,7 +493,7 @@ class Audio extends React.PureComponent {
 
  <canvas
  role='button'
- tabIndex='0'
+ tabIndex={0}
  className='audio-player__canvas'
  width={this.state.width}
  height={this.state.height}
@@ -526,7 +526,7 @@ class Audio extends React.PureComponent {
 
  <span
  className={classNames('video-player__seek__handle', { active: dragging })}
- tabIndex='0'
+ tabIndex={0}
  style={{ left: `${progress}%`, backgroundColor: this._getAccentColor() }}
  onKeyDown={this.handleAudioKeyDown}
  />
@@ -543,7 +543,7 @@ class Audio extends React.PureComponent {
 
  <span
  className='video-player__volume__handle'
- tabIndex='0'
+ tabIndex={0}
  style={{ left: `${volume * 100}%`, backgroundColor: this._getAccentColor() }}
  />
  </div>

app/javascript/mastodon/features/compose/components/language_dropdown.jsx

@@ -209,7 +209,7 @@ class LanguageDropdownMenu extends React.PureComponent {
  const { value } = this.props;
 
  return (
- <div key={lang[0]} role='option' tabIndex='0' data-index={lang[0]} className={classNames('language-dropdown__dropdown__results__item', { active: lang[0] === value })} aria-selected={lang[0] === value} onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
+ <div key={lang[0]} role='option' tabIndex={0} data-index={lang[0]} className={classNames('language-dropdown__dropdown__results__item', { active: lang[0] === value })} aria-selected={lang[0] === value} onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
  <span className='language-dropdown__dropdown__results__item__native-name' lang={lang[0]}>{lang[2]}</span> <span className='language-dropdown__dropdown__results__item__common-name'>({lang[1]})</span>
  </div>
  );

app/javascript/mastodon/features/compose/components/poll_form.jsx

@@ -82,7 +82,7 @@ class OptionIntl extends React.PureComponent {
  onClick={this.handleToggleMultiple}
  onKeyPress={this.handleCheckboxKeypress}
  role='button'
- tabIndex='0'
+ tabIndex={0}
  title={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
  aria-label={intl.formatMessage(isPollMultiple ? messages.switchToSingle : messages.switchToMultiple)}
  />

app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx

@@ -115,7 +115,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
  return (
  <div style={{ ...style }} role='listbox' ref={this.setRef}>
  {items.map(item => (
- <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
+ <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
  <div className='privacy-dropdown__option__icon'>
  <Icon id={item.icon} fixedWidth />
  </div>

app/javascript/mastodon/features/compose/components/search.jsx

@@ -287,7 +287,7 @@ class Search extends React.PureComponent {
  onBlur={this.handleBlur}
  />
 
- <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
+ <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
  <Icon id='search' className={hasValue ? '' : 'active'} />
  <Icon id='times-circle' className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} />
  </div>

app/javascript/mastodon/features/compose/components/upload.jsx

@@ -42,7 +42,7 @@ export default class Upload extends ImmutablePureComponent {
  const y = ((focusY / -2) + .5) * 100;
 
  return (
- <div className='compose-form__upload' tabIndex='0' role='button'>
+ <div className='compose-form__upload' tabIndex={0} role='button'>
  <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
  {({ scale }) => (
  <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>

app/javascript/mastodon/features/direct_timeline/components/conversation.jsx

@@ -144,7 +144,7 @@ class Conversation extends ImmutablePureComponent {
 
  return (
  <HotKeys handlers={handlers}>
- <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex='0'>
+ <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}>
  <div className='conversation__avatar' onClick={this.handleClick} role='presentation'>
  <AvatarComposite accounts={accounts} size={48} />
  </div>

app/javascript/mastodon/features/filters/select_filter.jsx

@@ -65,15 +65,15 @@ class SelectFilter extends React.PureComponent {
  }
 
  return (
- <div key={filter[0]} role='button' tabIndex='0' data-index={filter[0]} className='language-dropdown__dropdown__results__item' onClick={this.handleItemClick} onKeyDown={this.handleKeyDown}>
+ <div key={filter[0]} role='button' tabIndex={0} data-index={filter[0]} className='language-dropdown__dropdown__results__item' onClick={this.handleItemClick} onKeyDown={this.handleKeyDown}>
  <span className='language-dropdown__dropdown__results__item__native-name'>{filter[1]}</span> {warning}
  </div>
  );
  };
 
  renderCreateNew (name) {
  return (
- <div key='add-new-filter' role='button' tabIndex='0' className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}>
+ <div key='add-new-filter' role='button' tabIndex={0} className='language-dropdown__dropdown__results__item' onClick={this.handleNewFilterClick} onKeyDown={this.handleKeyDown}>
  <Icon id='plus' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
  </div>
  );

app/javascript/mastodon/features/list_editor/components/search.jsx

@@ -63,7 +63,7 @@ class Search extends React.PureComponent {
  />
  </label>
 
- <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
+ <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
  <Icon id='search' className={classNames({ active: !hasValue })} />
  <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
  </div>

app/javascript/mastodon/features/list_editor/index.jsx

@@ -60,7 +60,7 @@ class ListEditor extends ImmutablePureComponent {
  {accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
  </div>
 
- {showSearch && <div role='button' tabIndex='-1' className='drawer__backdrop' onClick={onClear} />}
+ {showSearch && <div role='button' tabIndex={-1} className='drawer__backdrop' onClick={onClear} />}
 
  <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
  {({ x }) => (

app/javascript/mastodon/features/list_timeline/index.jsx

@@ -176,11 +176,11 @@ class ListTimeline extends React.PureComponent {
  multiColumn={multiColumn}
  >
  <div className='column-settings__row column-header__links'>
- <button type='button' className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
+ <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleEditClick}>
  <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
  </button>
 
- <button type='button' className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
+ <button type='button' className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.handleDeleteClick}>
  <Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
  </button>
  </div>

app/javascript/mastodon/features/notifications/components/clear_column_button.jsx

@@ -11,7 +11,7 @@ export default class ClearColumnButton extends React.PureComponent {
 
  render () {
  return (
- <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><Icon id='eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
+ <button className='text-btn column-header__setting-btn' tabIndex={0} onClick={this.props.onClick}><Icon id='eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
  );
  }
 

app/javascript/mastodon/features/notifications/components/grant_permission_button.jsx

@@ -10,7 +10,7 @@ export default class GrantPermissionButton extends React.PureComponent {
 
  render () {
  return (
- <button className='text-btn column-header__permission-btn' tabIndex='0' onClick={this.props.onClick}>
+ <button className='text-btn column-header__permission-btn' tabIndex={0} onClick={this.props.onClick}>
  <FormattedMessage id='notifications.grant_permission' defaultMessage='Grant permission.' />
  </button>
  );