diff options
| author | Mélanie Chauvel <perso@hack-libre.org> | 2021-10-01 00:55:51 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-10-01 00:55:51 +0200 |
| commit | 900481b7fa638119b826ed888fc8eaca962ecf55 (patch) | |
| tree | 696bcae13d36dc82b083242c7597f5ec9cd11870 /app/javascript/mastodon/components/column_header.js | |
| parent | 24f9ea781850ee8d105aa3e396eaef8499bc5efc (diff) | |
Improve hover and focus style in columns settings (#16222)
* Make focus visible on switches and text buttons in columns settings * Make hover/focus visible on left/right arrows in columns settings Use same style as for station action bar (reply/boost/fav/etc.) * Tab first to “Pin/Unpin” before left/right arrows in columns settings
Diffstat (limited to 'app/javascript/mastodon/components/column_header.js')
| -rw-r--r-- | app/javascript/mastodon/components/column_header.js | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 236e92296..cbbc490a8 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -119,8 +119,8 @@ class ColumnHeader extends React.PureComponent { moveButtons = ( <div key='move-buttons' className='column-header__setting-arrows'> - <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button> - <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button> + <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' /></button> + <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' /></button> </div> ); } else if (multiColumn && this.props.onPin) { @@ -141,8 +141,8 @@ class ColumnHeader extends React.PureComponent { ]; if (multiColumn) { - collapsedContent.push(moveButtons); collapsedContent.push(pinButton); + collapsedContent.push(moveButtons); } if (children || (multiColumn && this.props.onPin)) { |