diff options
40 files changed, 58 insertions, 58 deletions
diff --git a/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx b/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx index 8478ba366..ecefe7a84 100644 --- a/app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/autosuggest_input.jsx b/app/javascript/flavours/glitch/components/autosuggest_input.jsx index 90ff298c0..ea9fd0828 100644 --- a/app/javascript/flavours/glitch/components/autosuggest_input.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/autosuggest_textarea.jsx b/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx index 6e6e567b9..a016e44b7 100644 --- a/app/javascript/flavours/glitch/components/autosuggest_textarea.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/column_back_button_slim.jsx b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx index b43d85b3b..4df045b5f 100644 --- a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx +++ b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx @@ -26,7 +26,7 @@ export default class ColumnBackButtonSlim extends React.PureComponent { 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/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx index f4b6e059f..7fb75b59e 100644 --- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/error_boundary.jsx b/app/javascript/flavours/glitch/components/error_boundary.jsx index 8518dfc86..234a53417 100644 --- a/app/javascript/flavours/glitch/components/error_boundary.jsx +++ b/app/javascript/flavours/glitch/components/error_boundary.jsx @@ -72,7 +72,7 @@ export default class ErrorBoundary extends React.PureComponent { } return ( - <div tabIndex='-1'> + <div tabIndex={-1}> <div className='error-boundary'> <h1><FormattedMessage id='web_app_crash.title' defaultMessage="We're sorry, but something went wrong with the Mastodon app." /></h1> <p> diff --git a/app/javascript/flavours/glitch/components/gifv.jsx b/app/javascript/flavours/glitch/components/gifv.jsx index 9ec201c6c..1ce7e7c29 100644 --- a/app/javascript/flavours/glitch/components/gifv.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/intersection_observer_article.jsx b/app/javascript/flavours/glitch/components/intersection_observer_article.jsx index 77cd66358..6c00e557d 100644 --- a/app/javascript/flavours/glitch/components/intersection_observer_article.jsx +++ b/app/javascript/flavours/glitch/components/intersection_observer_article.jsx @@ -120,7 +120,7 @@ export default class IntersectionObserverArticle extends React.Component { aria-posinset={index + 1} aria-setsize={listLength} data-id={id} - tabIndex='0' + tabIndex={0} style={style} > {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })} diff --git a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx index 961d3dead..9d1b7f55a 100644 --- a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/poll.jsx b/app/javascript/flavours/glitch/components/poll.jsx index 2ccc1761e..fb37612d9 100644 --- a/app/javascript/flavours/glitch/components/poll.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/spoilers.jsx b/app/javascript/flavours/glitch/components/spoilers.jsx index 75e4ec3a1..d1d875807 100644 --- a/app/javascript/flavours/glitch/components/spoilers.jsx +++ b/app/javascript/flavours/glitch/components/spoilers.jsx @@ -38,7 +38,7 @@ class Spoilers extends React.PureComponent { <p className='spoiler__text'> {spoilerText} {' '} - <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> + <button tabIndex={0} className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> {toggleText} </button> </p>, diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx index fa90c98d0..fbb610823 100644 --- a/app/javascript/flavours/glitch/components/status.jsx +++ b/app/javascript/flavours/glitch/components/status.jsx @@ -564,7 +564,7 @@ class Status extends ImmutablePureComponent { if (hidden) { return ( <HotKeys handlers={handlers}> - <div ref={this.handleRef} className='status focusable' tabIndex='0'> + <div ref={this.handleRef} className='status focusable' tabIndex={0}> <span>{status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span> <span>{status.get('content')}</span> </div> @@ -581,7 +581,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}> @@ -769,7 +769,7 @@ class Status extends ImmutablePureComponent { style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null} {...selectorAttribs} ref={handleRef} - tabIndex='0' + tabIndex={0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))} > diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx index 34742c81b..e66df588a 100644 --- a/app/javascript/flavours/glitch/components/status_content.jsx +++ b/app/javascript/flavours/glitch/components/status_content.jsx @@ -387,7 +387,7 @@ class StatusContent extends React.PureComponent { } return ( - <div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> + <div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <p style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} > @@ -424,14 +424,14 @@ class StatusContent extends React.PureComponent { className={classNames} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} - tabIndex='0' + tabIndex={0} > <div ref={this.setContentsRef} key={`contents-${tagLinks}-${rewriteMentions}`} dangerouslySetInnerHTML={content} className='status__content__text translate' - tabIndex='0' + tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} lang={lang} @@ -445,14 +445,14 @@ class StatusContent extends React.PureComponent { return ( <div className='status__content' - tabIndex='0' + tabIndex={0} > <div ref={this.setContentsRef} key={`contents-${tagLinks}`} className='status__content__text translate' dangerouslySetInnerHTML={content} - tabIndex='0' + tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} lang={lang} diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx index f366f734d..67d5afbdd 100644 --- a/app/javascript/flavours/glitch/features/about/index.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/account/components/account_note.jsx b/app/javascript/flavours/glitch/features/account/components/account_note.jsx index 5adca87d0..8ab00f6d4 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.jsx +++ b/app/javascript/flavours/glitch/features/account/components/account_note.jsx @@ -53,11 +53,11 @@ class Header extends ImmutablePureComponent { if (isEditing) { action_buttons = ( <div className='account__header__account-note__buttons'> - <button className='icon-button' tabIndex='0' onClick={this.props.onCancelAccountNote} disabled={isSubmitting}> + <button className='icon-button' tabIndex={0} onClick={this.props.onCancelAccountNote} disabled={isSubmitting}> <Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' /> </button> <div className='flex-spacer' /> - <button className='icon-button' tabIndex='0' onClick={this.props.onSaveAccountNote} disabled={isSubmitting}> + <button className='icon-button' tabIndex={0} onClick={this.props.onSaveAccountNote} disabled={isSubmitting}> <Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' /> </button> </div> @@ -65,7 +65,7 @@ class Header extends ImmutablePureComponent { } else { action_buttons = ( <div className='account__header__account-note__buttons'> - <button className='icon-button' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}> + <button className='icon-button' tabIndex={0} onClick={this.props.onEditAccountNote} disabled={isSubmitting}> <Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' /> </button> </div> diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx index fd7229cc5..556a74ac4 100644 --- a/app/javascript/flavours/glitch/features/audio/index.jsx +++ b/app/javascript/flavours/glitch/features/audio/index.jsx @@ -476,7 +476,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} @@ -499,7 +499,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} @@ -532,7 +532,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} /> @@ -549,7 +549,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/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx index 1ea0df536..1ccccad31 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx @@ -169,7 +169,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent onClick={this.handleClick} onKeyDown={this.handleKeyDown} role='option' - tabIndex='0' + tabIndex={0} key={name} data-index={i} ref={active ? this.setFocusRef : null} diff --git a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx index 14f285c3d..05614de01 100644 --- a/app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx index d2187b8ae..cb6afca8d 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx @@ -147,7 +147,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' : ''} /> </div> diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.jsx b/app/javascript/flavours/glitch/features/compose/components/upload.jsx index 63582c636..7d5784561 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/upload.jsx @@ -43,7 +43,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/flavours/glitch/features/direct_timeline/components/conversation.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx index 05fd68707..63a331086 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx @@ -182,7 +182,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/flavours/glitch/features/filters/select_filter.jsx b/app/javascript/flavours/glitch/features/filters/select_filter.jsx index b3285bc91..a33892f83 100644 --- a/app/javascript/flavours/glitch/features/filters/select_filter.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/list_editor/components/search.jsx b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx index 94782ba69..3b66bc325 100644 --- a/app/javascript/flavours/glitch/features/list_editor/components/search.jsx +++ b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx @@ -51,7 +51,7 @@ export default 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/flavours/glitch/features/list_editor/index.jsx b/app/javascript/flavours/glitch/features/list_editor/index.jsx index 8b8a0cf31..44951d1c6 100644 --- a/app/javascript/flavours/glitch/features/list_editor/index.jsx +++ b/app/javascript/flavours/glitch/features/list_editor/index.jsx @@ -60,7 +60,7 @@ class ListEditor extends ImmutablePureComponent { {accountIds.map(accountId => <AccountContainer 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/flavours/glitch/features/list_timeline/index.jsx b/app/javascript/flavours/glitch/features/list_timeline/index.jsx index f885a751f..a32383b13 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.jsx +++ b/app/javascript/flavours/glitch/features/list_timeline/index.jsx @@ -177,11 +177,11 @@ class ListTimeline extends React.PureComponent { multiColumn={multiColumn} > <div className='column-settings__row column-header__links'> - <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> + <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 className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}> + <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/flavours/glitch/features/local_settings/navigation/item/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx index a4d1b40fa..9ac6d9b73 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx @@ -60,7 +60,7 @@ export default class LocalSettingsPage extends React.PureComponent { <a onClick={handleClick} role='button' - tabIndex='0' + tabIndex={0} className={finalClassName} title={title} aria-label={title} diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx index 556df8f66..9b55fe4e9 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx @@ -91,7 +91,7 @@ export default class AdminReport extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex='0'> + <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='flag' fixedWidth /> diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx index ead2a9701..d982108e9 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx @@ -78,7 +78,7 @@ export default class NotificationFollow extends ImmutablePureComponent { // Renders. return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex='0'> + <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon fixedWidth id='user-plus' /> diff --git a/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx b/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx index ee77cfb8e..cd150314b 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx @@ -11,7 +11,7 @@ export default class ClearColumnButton extends React.Component { 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/flavours/glitch/features/notifications/components/follow.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx index 434d6609d..e9ef70911 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx @@ -78,7 +78,7 @@ export default class NotificationFollow extends ImmutablePureComponent { // Renders. return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-follow focusable', { unread })} tabIndex='0'> + <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon fixedWidth id='user-plus' /> diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx index 01dec320e..2b985bc08 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx @@ -95,7 +95,7 @@ class FollowRequest extends ImmutablePureComponent { return ( <HotKeys handlers={this.getHandlers()}> - <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex='0'> + <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0}> <div className='notification__message'> <div className='notification__favourite-icon-wrapper'> <Icon id='user' fixedWidth /> diff --git a/app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.jsx b/app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.jsx index 798e4c787..5b2db48fd 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/pinned_accounts_editor/index.jsx b/app/javascript/flavours/glitch/features/pinned_accounts_editor/index.jsx index de3fff8ec..834de652f 100644 --- a/app/javascript/flavours/glitch/features/pinned_accounts_editor/index.jsx +++ b/app/javascript/flavours/glitch/features/pinned_accounts_editor/index.jsx @@ -59,7 +59,7 @@ class PinnedAccountsEditor extends ImmutablePureComponent { {accountIds.map(accountId => <AccountContainer 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/flavours/glitch/features/report/components/option.jsx b/app/javascript/flavours/glitch/features/report/components/option.jsx index 6ecfc7a24..7827a6b3b 100644 --- a/app/javascript/flavours/glitch/features/report/components/option.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx index a59da5e10..f01ad2dbe 100644 --- a/app/javascript/flavours/glitch/features/status/index.jsx +++ b/app/javascript/flavours/glitch/features/status/index.jsx @@ -672,7 +672,7 @@ class Status extends ImmutablePureComponent { {ancestors} <HotKeys handlers={handlers}> - <div className='focusable' tabIndex='0' aria-label={textForScreenReader(intl, status, false, isExpanded)}> + <div className='focusable' tabIndex={0} aria-label={textForScreenReader(intl, status, false, isExpanded)}> <DetailedStatus key={`details-${status.get('id')}`} status={status} diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx index c6e3ee37c..9a9b1a3f1 100644 --- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx @@ -36,7 +36,7 @@ export default class ActionsModal extends ImmutablePureComponent { if (!contents) { contents = ( <React.Fragment> - {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/flavours/glitch/features/ui/components/column_link.jsx b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx index dcdac077f..4fffa54f4 100644 --- a/app/javascript/flavours/glitch/features/ui/components/column_link.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx @@ -32,7 +32,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, return onClick(e); }; return ( - <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex='0'> + <a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex={0}> {iconElement} <span>{text}</span> {badgeElement} diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx index a3811e91d..fd2bd43cf 100644 --- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx @@ -140,8 +140,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/flavours/glitch/features/ui/components/onboarding_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx index df84a1571..29eb91a6b 100644 --- a/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx +++ b/app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx @@ -299,7 +299,7 @@ class OnboardingModal extends React.PureComponent { <div key={`dot-${i}`} role='button' - tabIndex='0' + tabIndex={0} data-index={i} onClick={this.handleDot} className={className} diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx index 80323770c..28a8bb1fd 100644 --- a/app/javascript/flavours/glitch/features/video/index.jsx +++ b/app/javascript/flavours/glitch/features/video/index.jsx @@ -600,7 +600,7 @@ class Video extends React.PureComponent { preload={preload} loop role='button' - tabIndex='0' + tabIndex={0} aria-label={alt} title={alt} lang={lang} @@ -629,7 +629,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} /> @@ -645,7 +645,7 @@ class Video extends React.PureComponent { <span className={classNames('video-player__volume__handle')} - tabIndex='0' + tabIndex={0} style={{ left: `${volume * 100}%` }} /> </div> |