diff options
Diffstat (limited to 'app/javascript')
32 files changed, 55 insertions, 55 deletions
diff --git a/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx b/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx index 58a861fde..cd14dac4e 100644 --- a/app/javascript/mastodon/components/admin/ReportReasonSelector.jsx +++ b/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} diff --git a/app/javascript/mastodon/components/autosuggest_input.jsx b/app/javascript/mastodon/components/autosuggest_input.jsx index f9616c581..a68e2a01b 100644 --- a/app/javascript/mastodon/components/autosuggest_input.jsx +++ b/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> ); diff --git a/app/javascript/mastodon/components/autosuggest_textarea.jsx b/app/javascript/mastodon/components/autosuggest_textarea.jsx index c04491298..a627bc1ec 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.jsx +++ b/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> ); diff --git a/app/javascript/mastodon/components/column_back_button_slim.jsx b/app/javascript/mastodon/components/column_back_button_slim.jsx index cc8bfb151..46ac23736 100644 --- a/app/javascript/mastodon/components/column_back_button_slim.jsx +++ b/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> diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx index c04c513fb..eaaa72fd8 100644 --- a/app/javascript/mastodon/components/dropdown_menu.jsx +++ b/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> diff --git a/app/javascript/mastodon/components/gifv.jsx b/app/javascript/mastodon/components/gifv.jsx index 9ec201c6c..1ce7e7c29 100644 --- a/app/javascript/mastodon/components/gifv.jsx +++ b/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} diff --git a/app/javascript/mastodon/components/icon_button.jsx b/app/javascript/mastodon/components/icon_button.jsx index 003692373..989cae440 100644 --- a/app/javascript/mastodon/components/icon_button.jsx +++ b/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, }; diff --git a/app/javascript/mastodon/components/intersection_observer_article.jsx b/app/javascript/mastodon/components/intersection_observer_article.jsx index c2feb003a..77957a21d 100644 --- a/app/javascript/mastodon/components/intersection_observer_article.jsx +++ b/app/javascript/mastodon/components/intersection_observer_article.jsx @@ -113,7 +113,7 @@ 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> @@ -121,7 +121,7 @@ export default class IntersectionObserverArticle extends React.Component { } 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> ); diff --git a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx index c8aa8f757..6322b1c66 100644 --- a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx +++ b/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> diff --git a/app/javascript/mastodon/components/poll.jsx b/app/javascript/mastodon/components/poll.jsx index 360557d00..b9b96a700 100644 --- a/app/javascript/mastodon/components/poll.jsx +++ b/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} diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx index 281e69874..923dc892d 100644 --- a/app/javascript/mastodon/components/status.jsx +++ b/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}> diff --git a/app/javascript/mastodon/components/status_content.jsx b/app/javascript/mastodon/components/status_content.jsx index 8d3a80248..fb953b9dd 100644 --- a/app/javascript/mastodon/components/status_content.jsx +++ b/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} diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx index 2804c4a21..bb35f3203 100644 --- a/app/javascript/mastodon/features/about/index.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx index b0c6eeee6..df40b48f0 100644 --- a/app/javascript/mastodon/features/audio/index.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/compose/components/language_dropdown.jsx b/app/javascript/mastodon/features/compose/components/language_dropdown.jsx index 908cb61a7..08542e3a9 100644 --- a/app/javascript/mastodon/features/compose/components/language_dropdown.jsx +++ b/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> ); diff --git a/app/javascript/mastodon/features/compose/components/poll_form.jsx b/app/javascript/mastodon/features/compose/components/poll_form.jsx index c5a8f8ca7..c0acd7eeb 100644 --- a/app/javascript/mastodon/features/compose/components/poll_form.jsx +++ b/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)} /> diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx index 6c4b1064e..e65c9cb72 100644 --- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/compose/components/search.jsx b/app/javascript/mastodon/features/compose/components/search.jsx index 717ecea37..46723f5cc 100644 --- a/app/javascript/mastodon/features/compose/components/search.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/compose/components/upload.jsx b/app/javascript/mastodon/features/compose/components/upload.jsx index f114680b9..e3651c229 100644 --- a/app/javascript/mastodon/features/compose/components/upload.jsx +++ b/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}%` }}> diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx index 5996dd666..d0dbffe65 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/filters/select_filter.jsx b/app/javascript/mastodon/features/filters/select_filter.jsx index b0aede187..5778eec8e 100644 --- a/app/javascript/mastodon/features/filters/select_filter.jsx +++ b/app/javascript/mastodon/features/filters/select_filter.jsx @@ -65,7 +65,7 @@ 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> ); @@ -73,7 +73,7 @@ class SelectFilter extends React.PureComponent { 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> ); diff --git a/app/javascript/mastodon/features/list_editor/components/search.jsx b/app/javascript/mastodon/features/list_editor/components/search.jsx index b9745e0a8..f70e272f7 100644 --- a/app/javascript/mastodon/features/list_editor/components/search.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/list_editor/index.jsx b/app/javascript/mastodon/features/list_editor/index.jsx index 65cebbdc8..ed9d09132 100644 --- a/app/javascript/mastodon/features/list_editor/index.jsx +++ b/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 }) => ( diff --git a/app/javascript/mastodon/features/list_timeline/index.jsx b/app/javascript/mastodon/features/list_timeline/index.jsx index d0ba2a186..c0b9a62ff 100644 --- a/app/javascript/mastodon/features/list_timeline/index.jsx +++ b/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> diff --git a/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx b/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx index b82fd092f..9a076ce5e 100644 --- a/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx +++ b/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> ); } diff --git a/app/javascript/mastodon/features/notifications/components/grant_permission_button.jsx b/app/javascript/mastodon/features/notifications/components/grant_permission_button.jsx index 798e4c787..5b2db48fd 100644 --- a/app/javascript/mastodon/features/notifications/components/grant_permission_button.jsx +++ b/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> ); diff --git a/app/javascript/mastodon/features/notifications/components/notification.jsx b/app/javascript/mastodon/features/notifications/components/notification.jsx index cf9d9f72c..f3104cee0 100644 --- a/app/javascript/mastodon/features/notifications/components/notification.jsx +++ b/app/javascript/mastodon/features/notifications/components/notification.jsx @@ -123,7 +123,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-follow focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}> + <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='user-plus' fixedWidth /> @@ -145,7 +145,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}> + <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='user' fixedWidth /> @@ -185,7 +185,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-favourite focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> + <div className={classNames('notification notification-favourite focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.favourite, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='star' className='star-icon' fixedWidth /> @@ -217,7 +217,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-reblog focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> + <div className={classNames('notification notification-reblog focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reblog, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='retweet' fixedWidth /> @@ -253,7 +253,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-status focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.status, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> + <div className={classNames('notification notification-status focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.status, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='home' fixedWidth /> @@ -290,7 +290,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-update focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.update, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> + <div className={classNames('notification notification-update focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.update, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='pencil' fixedWidth /> @@ -329,7 +329,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-poll focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}> + <div className={classNames('notification notification-poll focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, message, notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='tasks' fixedWidth /> @@ -366,7 +366,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminSignUp, { name: account.get('acct') }), notification.get('created_at'))}> + <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminSignUp, { name: account.get('acct') }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='user-plus' fixedWidth /> @@ -396,7 +396,7 @@ class Notification extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: account.get('acct'), target: notification.getIn(['report', 'target_account', 'acct']) }), notification.get('created_at'))}> + <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: account.get('acct'), target: notification.getIn(['report', 'target_account', 'acct']) }), notification.get('created_at'))}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='flag' fixedWidth /> diff --git a/app/javascript/mastodon/features/report/components/option.jsx b/app/javascript/mastodon/features/report/components/option.jsx index 42c04b018..342204e22 100644 --- a/app/javascript/mastodon/features/report/components/option.jsx +++ b/app/javascript/mastodon/features/report/components/option.jsx @@ -40,7 +40,7 @@ export default class Option extends React.PureComponent { <span className={classNames('poll__input', { active: checked, checkbox: multiple })} - tabIndex='0' + tabIndex={0} role='radio' onKeyPress={this.handleKeyPress} aria-checked={checked} diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx index 1d7cb685f..2d18c6e9d 100644 --- a/app/javascript/mastodon/features/status/index.jsx +++ b/app/javascript/mastodon/features/status/index.jsx @@ -630,7 +630,7 @@ class Status extends ImmutablePureComponent { {ancestors} <HotKeys handlers={handlers}> - <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}> + <div className={classNames('focusable', 'detailed-status__wrapper', `detailed-status__wrapper-${status.get('visibility')}`)} tabIndex={0} aria-label={textForScreenReader(intl, status, false)}> <DetailedStatus key={`details-${status.get('id')}`} status={status} diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.jsx b/app/javascript/mastodon/features/ui/components/actions_modal.jsx index fd59c1e20..35090e242 100644 --- a/app/javascript/mastodon/features/ui/components/actions_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/actions_modal.jsx @@ -23,7 +23,7 @@ export default class ActionsModal extends ImmutablePureComponent { return ( <li key={`${text}-${i}`}> <a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames({ active })}> - {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex='-1' inverted />} + {icon && <IconButton title={text} icon={icon} role='presentation' tabIndex={-1} inverted />} <div> <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div> <div>{meta}</div> diff --git a/app/javascript/mastodon/features/ui/components/media_modal.jsx b/app/javascript/mastodon/features/ui/components/media_modal.jsx index aa179a965..52bd75453 100644 --- a/app/javascript/mastodon/features/ui/components/media_modal.jsx +++ b/app/javascript/mastodon/features/ui/components/media_modal.jsx @@ -138,8 +138,8 @@ class MediaModal extends ImmutablePureComponent { const index = this.getIndex(); - const leftNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>; - const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>; + const leftNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><Icon id='chevron-left' fixedWidth /></button>; + const rightNav = media.size > 1 && <button tabIndex={0} className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><Icon id='chevron-right' fixedWidth /></button>; const content = media.map((image) => { const width = image.getIn(['meta', 'original', 'width']) || null; diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx index 58bb45908..e2637e0be 100644 --- a/app/javascript/mastodon/features/video/index.jsx +++ b/app/javascript/mastodon/features/video/index.jsx @@ -582,7 +582,7 @@ class Video extends React.PureComponent { poster={preview} preload={preload} role='button' - tabIndex='0' + tabIndex={0} aria-label={alt} title={alt} lang={lang} @@ -611,7 +611,7 @@ class Video extends React.PureComponent { <span className={classNames('video-player__seek__handle', { active: dragging })} - tabIndex='0' + tabIndex={0} style={{ left: `${progress}%` }} onKeyDown={this.handleVideoKeyDown} /> @@ -627,7 +627,7 @@ class Video extends React.PureComponent { <span className={classNames('video-player__volume__handle')} - tabIndex='0' + tabIndex={0} style={{ left: `${volume * 100}%` }} /> </div> |