Improve accessibility (part 3) (#4405)

* fix(compose): Add aria-label for the navigation links * fix(search): Add input label * fix(navigation_bar): Link description * fix(autosuggest_textarea): Add input label * fix(compose_form): Add input label * fix(upload_button): Add input label * fix(account/header): Add link content * fix(column_header): Use h1 tag * fix(column_header): Labels move buttons moving column * fix(settings_text): Add label to input * fix(column_header): Remove role from h1 * fix(modal_root): Use role=dialog * fix(modal_root): Focus restauration * fix(modal_root): Apply inert to sibligs * fix(column_header): Add role=button * chore(eslint): Disable jsx-a11y/label-has-for
2017-07-28 00:54:48 +02:00 · 2017-07-28 00:54:48 +02:00 · 6884dd79ba
parent f9075577e4
commit 6884dd79ba
43 changed files with 171 additions and 56 deletions
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@ -112,7 +112,7 @@ rules:
  jsx-a11y/iframe-has-title: warn
  jsx-a11y/img-has-alt: warn
  jsx-a11y/img-redundant-alt: warn
-  jsx-a11y/label-has-for: warn
+  jsx-a11y/label-has-for: off
  jsx-a11y/mouse-events-have-key-events: warn
  jsx-a11y/no-access-key: warn
  jsx-a11y/no-distracting-elements: warn
--- a/app/javascript/mastodon/components/autosuggest_textarea.js
+++ b/app/javascript/mastodon/components/autosuggest_textarea.js
@ -162,6 +162,8 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {

    return (
      <div className='autosuggest-textarea'>
+        <label>
+          <span style={{ display: 'none' }}>{placeholder}</span>
          <Textarea
            inputRef={this.setTextarea}
            className='autosuggest-textarea__textarea'
@ -176,6 +178,7 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
            onPaste={this.onPaste}
            style={style}
          />
+        </label>

        <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
          {suggestions.map((suggestion, i) => (
--- a/app/javascript/mastodon/components/column_header.js
+++ b/app/javascript/mastodon/components/column_header.js
@ -6,6 +6,8 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 const messages = defineMessages({
  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
+  moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
+  moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
 });

@injectIntl
@ -101,8 +103,8 @@ export default class ColumnHeader extends React.PureComponent {

      moveButtons = (
        <div key='move-buttons' className='column-header__setting-arrows'>
-          <button className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button>
-          <button className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button>
+          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button>
+          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button>
        </div>
      );
    } else if (multiColumn) {
@ -133,7 +135,7 @@ export default class ColumnHeader extends React.PureComponent {

    return (
      <div className={wrapperClassName}>
-        <div role='heading' tabIndex={focusable && '0'} className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
+        <h1 tabIndex={focusable && '0'} role='button' className={buttonClassName} aria-label={title} onClick={this.handleTitleClick}>
          <i className={`fa fa-fw fa-${icon} column-header__icon`} />
          {title}

@ -141,7 +143,7 @@ export default class ColumnHeader extends React.PureComponent {
            {backButton}
            {collapseButton}
          </div>
-        </div>
+        </h1>

        <div className={collapsibleClassName} tabIndex={collapsed && -1} onTransitionEnd={this.handleTransitionEnd}>
          <div className='column-header__collapsible-inner'>
--- a/app/javascript/mastodon/components/setting_text.js
+++ b/app/javascript/mastodon/components/setting_text.js
@ -19,12 +19,15 @@ export default class SettingText extends React.PureComponent {
    const { settings, settingKey, label } = this.props;

    return (
+      <label>
+        <span style={{ display: 'none' }}>{label}</span>
        <input
          className='setting-text'
          value={settings.getIn(settingKey)}
          onChange={this.handleChange}
          placeholder={label}
        />
+      </label>
    );
  }

--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@ -52,9 +52,10 @@ class Avatar extends ImmutablePureComponent {
    return (
      <Motion defaultStyle={{ radius: 90 }} style={{ radius: spring(isHovered ? 30 : 90, { stiffness: 180, damping: 12 }) }}>
        {({ radius }) =>
-          <a // eslint-disable-line jsx-a11y/anchor-has-content
+          <a
            href={account.get('url')}
            className='account__header__avatar'
+            role='presentation'
            target='_blank'
            rel='noopener'
            style={{ borderRadius: `${radius}px`, backgroundImage: `url(${autoPlayGif || isHovered ? account.get('avatar') : account.get('avatar_static')})` }}
@ -62,7 +63,9 @@ class Avatar extends ImmutablePureComponent {
            onMouseOut={this.handleMouseOut}
            onFocus={this.handleMouseOver}
            onBlur={this.handleMouseOut}
-          />
+          >
+            <span style={{ display: 'none' }}>{account.get('acct')}</span>
+          </a>
        }
      </Motion>
    );
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/app/javascript/mastodon/features/compose/components/compose_form.js
@ -159,7 +159,10 @@ export default class ComposeForm extends ImmutablePureComponent {
      <div className='compose-form'>
        <Collapsable isVisible={this.props.spoiler} fullHeight={50}>
          <div className='spoiler-input'>
+            <label>
+              <span style={{ display: 'none' }}>{intl.formatMessage(messages.spoiler_placeholder)}</span>
              <input placeholder={intl.formatMessage(messages.spoiler_placeholder)} value={this.props.spoiler_text} onChange={this.handleChangeSpoilerText} onKeyDown={this.handleKeyDown} type='text' className='spoiler-input__input'  id='cw-spoiler-input' />
+            </label>
          </div>
        </Collapsable>

--- a/app/javascript/mastodon/features/compose/components/navigation_bar.js
+++ b/app/javascript/mastodon/features/compose/components/navigation_bar.js
@ -18,6 +18,7 @@ export default class NavigationBar extends ImmutablePureComponent {
    return (
      <div className='navigation-bar'>
        <Permalink href={this.props.account.get('url')} to={`/accounts/${this.props.account.get('id')}`}>
+          <span style={{ display: 'none' }}>{this.props.account.get('acct')}</span>
          <Avatar src={this.props.account.get('avatar')} animate size={40} />
        </Permalink>

--- a/app/javascript/mastodon/features/compose/components/search.js
+++ b/app/javascript/mastodon/features/compose/components/search.js
@ -52,6 +52,8 @@ export default class Search extends React.PureComponent {

    return (
      <div className='search'>
+        <label>
+          <span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
          <input
            className='search__input'
            type='text'
@ -61,6 +63,7 @@ export default class Search extends React.PureComponent {
            onKeyUp={this.handleKeyDown}
            onFocus={this.handleFocus}
          />
+        </label>

        <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
          <i className={`fa fa-search ${hasValue ? '' : 'active'}`} />
--- a/app/javascript/mastodon/features/compose/components/upload_button.js
+++ b/app/javascript/mastodon/features/compose/components/upload_button.js
@ -57,6 +57,8 @@ export default class UploadButton extends ImmutablePureComponent {
    return (
      <div className='compose-form__upload-button'>
        <IconButton icon='camera' title={intl.formatMessage(messages.upload)} disabled={disabled} onClick={this.handleClick} className='compose-form__upload-button-icon' size={18} inverted style={iconStyle} />
+        <label>
+          <span style={{ display: 'none' }}>{intl.formatMessage(messages.upload)}</span>
          <input
            key={resetFileKey}
            ref={this.setRef}
@ -67,6 +69,7 @@ export default class UploadButton extends ImmutablePureComponent {
            disabled={disabled}
            style={{ display: 'none' }}
          />
+        </label>
      </div>
    );
  }
--- a/app/javascript/mastodon/features/compose/index.js
+++ b/app/javascript/mastodon/features/compose/index.js
@ -65,21 +65,21 @@ export default class Compose extends React.PureComponent {
      const { columns } = this.props;
      header = (
        <nav className='drawer__header'>
-          <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)}><i role='img' className='fa fa-fw fa-asterisk' /></Link>
+          <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><i role='img' className='fa fa-fw fa-asterisk' /></Link>
          {!columns.some(column => column.get('id') === 'HOME') && (
-            <Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)}><i role='img' className='fa fa-fw fa-home' /></Link>
+            <Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><i role='img' className='fa fa-fw fa-home' /></Link>
          )}
          {!columns.some(column => column.get('id') === 'NOTIFICATIONS') && (
-            <Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)}><i role='img' className='fa fa-fw fa-bell' /></Link>
+            <Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><i role='img' className='fa fa-fw fa-bell' /></Link>
          )}
          {!columns.some(column => column.get('id') === 'COMMUNITY') && (
-            <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)}><i role='img' className='fa fa-fw fa-users' /></Link>
+            <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><i role='img' className='fa fa-fw fa-users' /></Link>
          )}
          {!columns.some(column => column.get('id') === 'PUBLIC') && (
-            <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)}><i role='img' className='fa fa-fw fa-globe' /></Link>
+            <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i role='img' className='fa fa-fw fa-globe' /></Link>
          )}
-          <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)}><i role='img' className='fa fa-fw fa-cog' /></a>
-          <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)}><i role='img' className='fa fa-fw fa-sign-out' /></a>
+          <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fa fa-fw fa-cog' /></a>
+          <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i role='img' className='fa fa-fw fa-sign-out' /></a>
        </nav>
      );
    }
--- a/app/javascript/mastodon/features/ui/components/modal_root.js
+++ b/app/javascript/mastodon/features/ui/components/modal_root.js
@ -44,10 +44,34 @@ export default class ModalRoot extends React.PureComponent {
    window.addEventListener('keyup', this.handleKeyUp, false);
  }

+  componentWillReceiveProps (nextProps) {
+    if (!!nextProps.type && !this.props.type) {
+      this.activeElement = document.activeElement;
+
+      this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (!this.type && !!prevProps.type) {
+      this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
+      this.activeElement.focus();
+      this.activeElement = null;
+    }
+  }
+
  componentWillUnmount () {
    window.removeEventListener('keyup', this.handleKeyUp);
  }

+  getSiblings = () => {
+    return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
+  }
+
+  setRef = ref => {
+    this.node = ref;
+  }
+
  willEnter () {
    return { opacity: 0, scale: 0.98 };
  }
@ -86,11 +110,11 @@ export default class ModalRoot extends React.PureComponent {
        willLeave={this.willLeave}
      >
        {interpolatedStyles =>
-          <div className='modal-root'>
+          <div className='modal-root' ref={this.setRef}>
            {interpolatedStyles.map(({ key, data: { type, props }, style }) => (
              <div key={key} style={{ pointerEvents: visible ? 'auto' : 'none' }}>
                <div role='presentation' className='modal-root__overlay' style={{ opacity: style.opacity }} onClick={onClose} />
-                <div className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
+                <div role='dialog' className='modal-root__container' style={{ opacity: style.opacity, transform: `translateZ(0px) scale(${style.scale})` }}>
                  <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading} error={this.renderError} renderDelay={200}>
                    {(SpecificComponent) => <SpecificComponent {...props} onClose={onClose} />}
                  </BundleContainer>
--- a/app/javascript/mastodon/locales/ar.json
+++ b/app/javascript/mastodon/locales/ar.json
@ -35,6 +35,8 @@
  "column.public": "الخيط العام الموحد",
  "column_back_button.label": "العودة",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/bg.json
+++ b/app/javascript/mastodon/locales/bg.json
@ -35,6 +35,8 @@
  "column.public": "Публичен канал",
  "column_back_button.label": "Назад",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/ca.json
+++ b/app/javascript/mastodon/locales/ca.json
@ -35,6 +35,8 @@
  "column.public": "Línia de temps federada",
  "column_back_button.label": "Enrere",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/de.json
+++ b/app/javascript/mastodon/locales/de.json
@ -35,6 +35,8 @@
  "column.public": "Gesamtes bekanntes Netz",
  "column_back_button.label": "Zurück",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/defaultMessages.json
+++ b/app/javascript/mastodon/locales/defaultMessages.json
@ -61,6 +61,14 @@
        "defaultMessage": "Hide settings",
        "id": "column_header.hide_settings"
      },
+      {
+        "defaultMessage": "Move column to the left",
+        "id": "column_header.moveLeft_settings"
+      },
+      {
+        "defaultMessage": "Move column to the right",
+        "id": "column_header.moveRight_settings"
+      },
      {
        "defaultMessage": "Unpin",
        "id": "column_header.unpin"
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@ -35,6 +35,8 @@
  "column.public": "Federated timeline",
  "column_back_button.label": "Back",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/eo.json
+++ b/app/javascript/mastodon/locales/eo.json
@ -35,6 +35,8 @@
  "column.public": "Fratara tempolinio",
  "column_back_button.label": "Reveni",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/es.json
+++ b/app/javascript/mastodon/locales/es.json
@ -35,6 +35,8 @@
  "column.public": "Historia federada",
  "column_back_button.label": "Atrás",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/fa.json
+++ b/app/javascript/mastodon/locales/fa.json
@ -35,6 +35,8 @@
  "column.public": "نوشته‌های همه‌جا",
  "column_back_button.label": "بازگشت",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/fi.json
+++ b/app/javascript/mastodon/locales/fi.json
@ -35,6 +35,8 @@
  "column.public": "Yleinen aikajana",
  "column_back_button.label": "Takaisin",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/fr.json
+++ b/app/javascript/mastodon/locales/fr.json
@ -35,6 +35,8 @@
  "column.public": "Fil public global",
  "column_back_button.label": "Retour",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Épingler",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Retirer",
--- a/app/javascript/mastodon/locales/he.json
+++ b/app/javascript/mastodon/locales/he.json
@ -35,6 +35,8 @@
  "column.public": "בפרהסיה",
  "column_back_button.label": "חזרה",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/hr.json
+++ b/app/javascript/mastodon/locales/hr.json
@ -35,6 +35,8 @@
  "column.public": "Federalni timeline",
  "column_back_button.label": "Natrag",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/hu.json
+++ b/app/javascript/mastodon/locales/hu.json
@ -35,6 +35,8 @@
  "column.public": "Nyilvános",
  "column_back_button.label": "Vissza",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/id.json
+++ b/app/javascript/mastodon/locales/id.json
@ -35,6 +35,8 @@
  "column.public": "Linimasa gabunggan",
  "column_back_button.label": "Kembali",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/io.json
+++ b/app/javascript/mastodon/locales/io.json
@ -35,6 +35,8 @@
  "column.public": "Federata tempolineo",
  "column_back_button.label": "Retro",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/it.json
+++ b/app/javascript/mastodon/locales/it.json
@ -35,6 +35,8 @@
  "column.public": "Timeline federata",
  "column_back_button.label": "Indietro",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/ja.json
+++ b/app/javascript/mastodon/locales/ja.json
@ -35,6 +35,8 @@
  "column.public": "連合タイムライン",
  "column_back_button.label": "戻る",
  "column_header.hide_settings": "設定を隠す",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "ピン留めする",
  "column_header.show_settings": "設定を表示",
  "column_header.unpin": "ピン留めを外す",
--- a/app/javascript/mastodon/locales/ko.json
+++ b/app/javascript/mastodon/locales/ko.json
@ -35,6 +35,8 @@
  "column.public": "연합 타임라인",
  "column_back_button.label": "돌아가기",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "고정하기",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "고정 해제",
--- a/app/javascript/mastodon/locales/nl.json
+++ b/app/javascript/mastodon/locales/nl.json
@ -35,6 +35,8 @@
  "column.public": "Globale tijdlijn",
  "column_back_button.label": "terug",
  "column_header.hide_settings": "Instellingen verbergen",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Vastmaken",
  "column_header.show_settings": "Instellingen tonen",
  "column_header.unpin": "Losmaken",
--- a/app/javascript/mastodon/locales/no.json
+++ b/app/javascript/mastodon/locales/no.json
@ -35,6 +35,8 @@
  "column.public": "Felles tidslinje",
  "column_back_button.label": "Tilbake",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/oc.json
+++ b/app/javascript/mastodon/locales/oc.json
@ -35,6 +35,8 @@
  "column.public": "Flux public global",
  "column_back_button.label": "Tornar",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Penjar",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Despenjar",
--- a/app/javascript/mastodon/locales/pl.json
+++ b/app/javascript/mastodon/locales/pl.json
@ -35,6 +35,8 @@
  "column.public": "Globalna oś czasu",
  "column_back_button.label": "Wróć",
  "column_header.hide_settings": "Ukryj ustawienia",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Przypnij",
  "column_header.show_settings": "Pokaż ustawienia",
  "column_header.unpin": "Cofnij przypięcie",
--- a/app/javascript/mastodon/locales/pt-BR.json
+++ b/app/javascript/mastodon/locales/pt-BR.json
@ -35,6 +35,8 @@
  "column.public": "Global",
  "column_back_button.label": "Voltar",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/pt.json
+++ b/app/javascript/mastodon/locales/pt.json
@ -35,6 +35,8 @@
  "column.public": "Global",
  "column_back_button.label": "Voltar",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/ru.json
+++ b/app/javascript/mastodon/locales/ru.json
@ -35,6 +35,8 @@
  "column.public": "Глобальная лента",
  "column_back_button.label": "Назад",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Закрепить",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Открепить",
--- a/app/javascript/mastodon/locales/th.json
+++ b/app/javascript/mastodon/locales/th.json
@ -35,6 +35,8 @@
  "column.public": "Federated timeline",
  "column_back_button.label": "Back",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/tr.json
+++ b/app/javascript/mastodon/locales/tr.json
@ -35,6 +35,8 @@
  "column.public": "Federe zaman tüneli",
  "column_back_button.label": "Geri",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/uk.json
+++ b/app/javascript/mastodon/locales/uk.json
@ -35,6 +35,8 @@
  "column.public": "Глобальна стрічка",
  "column_back_button.label": "Назад",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/zh-CN.json
+++ b/app/javascript/mastodon/locales/zh-CN.json
@ -35,6 +35,8 @@
  "column.public": "跨站公共时间轴",
  "column_back_button.label": "Back",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/zh-HK.json
+++ b/app/javascript/mastodon/locales/zh-HK.json
@ -35,6 +35,8 @@
  "column.public": "跨站時間軸",
  "column_back_button.label": "返回",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",
--- a/app/javascript/mastodon/locales/zh-TW.json
+++ b/app/javascript/mastodon/locales/zh-TW.json
@ -35,6 +35,8 @@
  "column.public": "聯盟時間軸",
  "column_back_button.label": "上一頁",
  "column_header.hide_settings": "Hide settings",
+  "column_header.moveLeft_settings": "Move column to the left",
+  "column_header.moveRight_settings": "Move column to the right",
  "column_header.pin": "Pin",
  "column_header.show_settings": "Show settings",
  "column_header.unpin": "Unpin",