treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Ensure tabIndex is number instead of string 

Port 53376db94c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
lolsob-rspec
Nick Schonning 2023-04-04 10:33:44 -04:00 committed by Claire
parent 3e1e35b8ec
commit 3237eb3759
40 changed files with 58 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/flavours/glitch/components/admin/ReportReasonSelector.jsx
View File

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

2
app/javascript/flavours/glitch/components/autosuggest_input.jsx
View File

@ -180,7 +180,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
} }
return ( 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} {inner}
</div> </div>
); );

2
app/javascript/flavours/glitch/components/autosuggest_textarea.jsx
View File

@ -186,7 +186,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
} }
return ( 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} {inner}
</div> </div>
); );

2
app/javascript/flavours/glitch/components/column_back_button_slim.jsx
View File

@ -26,7 +26,7 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
render () { render () {
return ( return (
<div className='column-back-button--slim'> <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 /> <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div> </div>

2
app/javascript/flavours/glitch/components/dropdown_menu.jsx
View File

@ -119,7 +119,7 @@ class DropdownMenu extends React.PureComponent {
return ( return (
<li className='dropdown-menu__item' key={`${text}-${i}`}> <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} {text}
</a> </a>
</li> </li>

2
app/javascript/flavours/glitch/components/error_boundary.jsx
View File

@ -72,7 +72,7 @@ export default class ErrorBoundary extends React.PureComponent {
} }
return ( return (
<div tabIndex='-1'> <div tabIndex={-1}>
<div className='error-boundary'> <div className='error-boundary'>
<h1><FormattedMessage id='web_app_crash.title' defaultMessage="We're sorry, but something went wrong with the Mastodon app." /></h1> <h1><FormattedMessage id='web_app_crash.title' defaultMessage="We're sorry, but something went wrong with the Mastodon app." /></h1>
<p> <p>

4
app/javascript/flavours/glitch/components/gifv.jsx
View File

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

2
app/javascript/flavours/glitch/components/intersection_observer_article.jsx
View File

@ -120,7 +120,7 @@ export default class IntersectionObserverArticle extends React.Component {
aria-posinset={index + 1} aria-posinset={index + 1}
aria-setsize={listLength} aria-setsize={listLength}
data-id={id} data-id={id}
tabIndex='0' tabIndex={0}
style={style} style={style}
> >
{children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })} {children && React.cloneElement(children, { hidden: !isIntersecting && (isHidden || !!cachedHeight) })}

2
app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
View File

@ -58,7 +58,7 @@ class PictureInPicturePlaceholder extends React.PureComponent {
const { height } = this.state; const { height } = this.state;
return ( 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' /> <Icon id='window-restore' />
<FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' /> <FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
</div> </div>

2
app/javascript/flavours/glitch/components/poll.jsx
View File

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

2
app/javascript/flavours/glitch/components/spoilers.jsx
View File

@ -38,7 +38,7 @@ class Spoilers extends React.PureComponent {
<p className='spoiler__text'> <p className='spoiler__text'>
{spoilerText} {spoilerText}
{' '} {' '}
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> <button tabIndex={0} className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
{toggleText} {toggleText}
</button> </button>
</p>, </p>,

6
app/javascript/flavours/glitch/components/status.jsx
View File

@ -564,7 +564,7 @@ class Status extends ImmutablePureComponent {
if (hidden) { if (hidden) {
return ( return (
<HotKeys handlers={handlers}> <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.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}</span>
<span>{status.get('content')}</span> <span>{status.get('content')}</span>
</div> </div>
@ -581,7 +581,7 @@ class Status extends ImmutablePureComponent {
return ( return (
<HotKeys handlers={minHandlers}> <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(', ')}. <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
{' '} {' '}
<button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}> <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
@ -769,7 +769,7 @@ class Status extends ImmutablePureComponent {
style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null} style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
{...selectorAttribs} {...selectorAttribs}
ref={handleRef} ref={handleRef}
tabIndex='0' tabIndex={0}
data-featured={featured ? 'true' : null} data-featured={featured ? 'true' : null}
aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))} aria-label={textForScreenReader(intl, status, rebloggedByText, !status.get('hidden'))}
> >

10
app/javascript/flavours/glitch/components/status_content.jsx
View File

@ -387,7 +387,7 @@ class StatusContent extends React.PureComponent {
} }
return ( return (
<div className={classNames} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}> <div className={classNames} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp}>
<p <p
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
> >
@ -424,14 +424,14 @@ class StatusContent extends React.PureComponent {
className={classNames} className={classNames}
onMouseDown={this.handleMouseDown} onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp} onMouseUp={this.handleMouseUp}
tabIndex='0' tabIndex={0}
> >
<div <div
ref={this.setContentsRef} ref={this.setContentsRef}
key={`contents-${tagLinks}-${rewriteMentions}`} key={`contents-${tagLinks}-${rewriteMentions}`}
dangerouslySetInnerHTML={content} dangerouslySetInnerHTML={content}
className='status__content__text translate' className='status__content__text translate'
tabIndex='0' tabIndex={0}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
lang={lang} lang={lang}
@ -445,14 +445,14 @@ class StatusContent extends React.PureComponent {
return ( return (
<div <div
className='status__content' className='status__content'
tabIndex='0' tabIndex={0}
> >
<div <div
ref={this.setContentsRef} ref={this.setContentsRef}
key={`contents-${tagLinks}`} key={`contents-${tagLinks}`}
className='status__content__text translate' className='status__content__text translate'
dangerouslySetInnerHTML={content} dangerouslySetInnerHTML={content}
tabIndex='0' tabIndex={0}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave} onMouseLeave={this.handleMouseLeave}
lang={lang} lang={lang}

2
app/javascript/flavours/glitch/features/about/index.jsx
View File

@ -67,7 +67,7 @@ class Section extends React.PureComponent {
return ( return (
<div className={classNames('about__section', { active: !collapsed })}> <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} <Icon id={collapsed ? 'chevron-right' : 'chevron-down'} fixedWidth /> {title}
</div> </div>

6
app/javascript/flavours/glitch/features/account/components/account_note.jsx
View File

@ -53,11 +53,11 @@ class Header extends ImmutablePureComponent {
if (isEditing) { if (isEditing) {
action_buttons = ( action_buttons = (
<div className='account__header__account-note__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' /> <Icon id='times' size={15} /> <FormattedMessage id='account_note.cancel' defaultMessage='Cancel' />
</button> </button>
<div className='flex-spacer' /> <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' /> <Icon id='check' size={15} /> <FormattedMessage id='account_note.save' defaultMessage='Save' />
</button> </button>
</div> </div>
@ -65,7 +65,7 @@ class Header extends ImmutablePureComponent {
} else { } else {
action_buttons = ( action_buttons = (
<div className='account__header__account-note__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' /> <Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
</button> </button>
</div> </div>

8
app/javascript/flavours/glitch/features/audio/index.jsx
View File

@ -476,7 +476,7 @@ class Audio extends React.PureComponent {
} }
return ( 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 <Blurhash
hash={blurhash} hash={blurhash}
@ -499,7 +499,7 @@ class Audio extends React.PureComponent {
<canvas <canvas
role='button' role='button'
tabIndex='0' tabIndex={0}
className='audio-player__canvas' className='audio-player__canvas'
width={this.state.width} width={this.state.width}
height={this.state.height} height={this.state.height}
@ -532,7 +532,7 @@ class Audio extends React.PureComponent {
<span <span
className={classNames('video-player__seek__handle', { active: dragging })} className={classNames('video-player__seek__handle', { active: dragging })}
tabIndex='0' tabIndex={0}
style={{ left: `${progress}%`, backgroundColor: this._getAccentColor() }} style={{ left: `${progress}%`, backgroundColor: this._getAccentColor() }}
onKeyDown={this.handleAudioKeyDown} onKeyDown={this.handleAudioKeyDown}
/> />
@ -549,7 +549,7 @@ class Audio extends React.PureComponent {
<span <span
className='video-player__volume__handle' className='video-player__volume__handle'
tabIndex='0' tabIndex={0}
style={{ left: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} style={{ left: `${volume * 100}%`, backgroundColor: this._getAccentColor() }}
/> />
</div> </div>

2
app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
View File

@ -169,7 +169,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
onClick={this.handleClick} onClick={this.handleClick}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
role='option' role='option'
tabIndex='0' tabIndex={0}
key={name} key={name}
data-index={i} data-index={i}
ref={active ? this.setFocusRef : null} ref={active ? this.setFocusRef : null}

2
app/javascript/flavours/glitch/features/compose/components/language_dropdown.jsx
View File

@ -209,7 +209,7 @@ class LanguageDropdownMenu extends React.PureComponent {
const { value } = this.props; const { value } = this.props;
return ( 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> <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> </div>
); );

2
app/javascript/flavours/glitch/features/compose/components/search.jsx
View File

@ -147,7 +147,7 @@ class Search extends React.PureComponent {
onBlur={this.handleBlur} 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='search' className={hasValue ? '' : 'active'} />
<Icon id='times-circle' className={hasValue ? 'active' : ''} /> <Icon id='times-circle' className={hasValue ? 'active' : ''} />
</div> </div>

2
app/javascript/flavours/glitch/features/compose/components/upload.jsx
View File

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

2
app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
View File

@ -182,7 +182,7 @@ class Conversation extends ImmutablePureComponent {
return ( return (
<HotKeys handlers={handlers}> <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'> <div className='conversation__avatar' onClick={this.handleClick} role='presentation'>
<AvatarComposite accounts={accounts} size={48} /> <AvatarComposite accounts={accounts} size={48} />
</div> </div>

4
app/javascript/flavours/glitch/features/filters/select_filter.jsx
View File

@ -65,7 +65,7 @@ class SelectFilter extends React.PureComponent {
} }
return ( 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} <span className='language-dropdown__dropdown__results__item__native-name'>{filter[1]}</span> {warning}
</div> </div>
); );
@ -73,7 +73,7 @@ class SelectFilter extends React.PureComponent {
renderCreateNew (name) { renderCreateNew (name) {
return ( 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 }} /> <Icon id='plus' fixedWidth /> <FormattedMessage id='filter_modal.select_filter.prompt_new' defaultMessage='New category: {name}' values={{ name }} />
</div> </div>
); );

2
app/javascript/flavours/glitch/features/list_editor/components/search.jsx
View File

@ -51,7 +51,7 @@ export default class Search extends React.PureComponent {
/> />
</label> </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='search' className={classNames({ active: !hasValue })} />
<Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} /> <Icon id='times-circle' aria-label={intl.formatMessage(messages.search)} className={classNames({ active: hasValue })} />
</div> </div>

2
app/javascript/flavours/glitch/features/list_editor/index.jsx
View File

@ -60,7 +60,7 @@ class ListEditor extends ImmutablePureComponent {
{accountIds.map(accountId => <AccountContainer key={accountId} accountId={accountId} added />)} {accountIds.map(accountId => <AccountContainer key={accountId} accountId={accountId} added />)}
</div> </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 }) }}> <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
{({ x }) => {({ x }) =>

4
app/javascript/flavours/glitch/features/list_timeline/index.jsx
View File

@ -177,11 +177,11 @@ class ListTimeline extends React.PureComponent {
multiColumn={multiColumn} multiColumn={multiColumn}
> >
<div className='column-settings__row column-header__links'> <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' /> <Icon id='pencil' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
</button> </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' /> <Icon id='trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
</button> </button>
</div> </div>

2
app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
View File

@ -60,7 +60,7 @@ export default class LocalSettingsPage extends React.PureComponent {
<a <a
onClick={handleClick} onClick={handleClick}
role='button' role='button'
tabIndex='0' tabIndex={0}
className={finalClassName} className={finalClassName}
title={title} title={title}
aria-label={title} aria-label={title}

2
app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
View File

@ -91,7 +91,7 @@ export default class AdminReport extends ImmutablePureComponent {
return ( return (
<HotKeys handlers={this.getHandlers()}> <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__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon id='flag' fixedWidth /> <Icon id='flag' fixedWidth />

2
app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
View File

@ -78,7 +78,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
// Renders. // Renders.
return ( return (
<HotKeys handlers={this.getHandlers()}> <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__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon fixedWidth id='user-plus' /> <Icon fixedWidth id='user-plus' />

2
app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx
View File

@ -11,7 +11,7 @@ export default class ClearColumnButton extends React.Component {
render () { render () {
return ( 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>
); );
} }

2
app/javascript/flavours/glitch/features/notifications/components/follow.jsx
View File

@ -78,7 +78,7 @@ export default class NotificationFollow extends ImmutablePureComponent {
// Renders. // Renders.
return ( return (
<HotKeys handlers={this.getHandlers()}> <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__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon fixedWidth id='user-plus' /> <Icon fixedWidth id='user-plus' />

2
app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
View File

@ -95,7 +95,7 @@ class FollowRequest extends ImmutablePureComponent {
return ( return (
<HotKeys handlers={this.getHandlers()}> <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__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<Icon id='user' fixedWidth /> <Icon id='user' fixedWidth />

2
app/javascript/flavours/glitch/features/notifications/components/grant_permission_button.jsx
View File

@ -10,7 +10,7 @@ export default class GrantPermissionButton extends React.PureComponent {
render () { render () {
return ( 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.' /> <FormattedMessage id='notifications.grant_permission' defaultMessage='Grant permission.' />
</button> </button>
); );

2
app/javascript/flavours/glitch/features/pinned_accounts_editor/index.jsx
View File

@ -59,7 +59,7 @@ class PinnedAccountsEditor extends ImmutablePureComponent {
{accountIds.map(accountId => <AccountContainer key={accountId} accountId={accountId} added />)} {accountIds.map(accountId => <AccountContainer key={accountId} accountId={accountId} added />)}
</div> </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 }) }}> <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
{({ x }) => {({ x }) =>

2
app/javascript/flavours/glitch/features/report/components/option.jsx
View File

@ -40,7 +40,7 @@ export default class Option extends React.PureComponent {
<span <span
className={classNames('poll__input', { active: checked, checkbox: multiple })} className={classNames('poll__input', { active: checked, checkbox: multiple })}
tabIndex='0' tabIndex={0}
role='radio' role='radio'
onKeyPress={this.handleKeyPress} onKeyPress={this.handleKeyPress}
aria-checked={checked} aria-checked={checked}

2
app/javascript/flavours/glitch/features/status/index.jsx
View File

@ -672,7 +672,7 @@ class Status extends ImmutablePureComponent {
{ancestors} {ancestors}
<HotKeys handlers={handlers}> <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 <DetailedStatus
key={`details-${status.get('id')}`} key={`details-${status.get('id')}`}
status={status} status={status}

2
app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
View File

@ -36,7 +36,7 @@ export default class ActionsModal extends ImmutablePureComponent {
if (!contents) { if (!contents) {
contents = ( contents = (
<React.Fragment> <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>
<div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div> <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
<div>{meta}</div> <div>{meta}</div>

2
app/javascript/flavours/glitch/features/ui/components/column_link.jsx
View File

@ -32,7 +32,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent,
return onClick(e); return onClick(e);
}; };
return ( 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} {iconElement}
<span>{text}</span> <span>{text}</span>
{badgeElement} {badgeElement}

4
app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
View File

@ -140,8 +140,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex(); 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 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 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 content = media.map((image) => {
const width = image.getIn(['meta', 'original', 'width']) || null; const width = image.getIn(['meta', 'original', 'width']) || null;

2
app/javascript/flavours/glitch/features/ui/components/onboarding_modal.jsx
View File

@ -299,7 +299,7 @@ class OnboardingModal extends React.PureComponent {
<div <div
key={`dot-${i}`} key={`dot-${i}`}
role='button' role='button'
tabIndex='0' tabIndex={0}
data-index={i} data-index={i}
onClick={this.handleDot} onClick={this.handleDot}
className={className} className={className}

6
app/javascript/flavours/glitch/features/video/index.jsx
View File

@ -600,7 +600,7 @@ class Video extends React.PureComponent {
preload={preload} preload={preload}
loop loop
role='button' role='button'
tabIndex='0' tabIndex={0}
aria-label={alt} aria-label={alt}
title={alt} title={alt}
lang={lang} lang={lang}
@ -629,7 +629,7 @@ class Video extends React.PureComponent {
<span <span
className={classNames('video-player__seek__handle', { active: dragging })} className={classNames('video-player__seek__handle', { active: dragging })}
tabIndex='0' tabIndex={0}
style={{ left: `${progress}%` }} style={{ left: `${progress}%` }}
onKeyDown={this.handleVideoKeyDown} onKeyDown={this.handleVideoKeyDown}
/> />
@ -645,7 +645,7 @@ class Video extends React.PureComponent {
<span <span
className={classNames('video-player__volume__handle')} className={classNames('video-player__volume__handle')}
tabIndex='0' tabIndex={0}
style={{ left: `${volume * 100}%` }} style={{ left: `${volume * 100}%` }}
/> />
</div> </div>