Improve hover and focus style in columns settings (mastodon#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
olh · Sep 30, 2021 · 900481b · 900481b
1 parent 24f9ea7
commit 900481b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 13 deletions.
diff --git 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)) {

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -2822,15 +2822,15 @@ a.account__display-name {
  transition: background-color 0.2s ease;
 }
 
-.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
  background-color: darken($ui-base-color, 10%);
 }
 
 .react-toggle--checked .react-toggle-track {
  background-color: $ui-highlight-color;
 }
 
-.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
  background-color: lighten($ui-highlight-color, 10%);
 }
 
@@ -3548,12 +3548,17 @@ a.status-card.compact:hover {
 }
 
 .column-header__setting-btn {
- &:hover {
+ &:hover,
+ &:focus {
  color: $darker-text-color;
  text-decoration: underline;
  }
 }
 
+.column-header__collapsible__extra + .column-header__setting-btn {
+ padding-top: 5px;
+}
+
 .column-header__permission-btn {
  display: inline;
  font-weight: inherit;
@@ -3564,10 +3569,15 @@ a.status-card.compact:hover {
  float: right;
 
  .column-header__setting-btn {
- padding: 0 10px;
+ padding: 5px;
+
+ &:first-child {
+ padding-right: 7px;
+ }
 
  &:last-child {
- padding-right: 0;
+ padding-left: 7px;
+ margin-left: 5px;
  }
  }
 }

diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
@@ -126,6 +126,20 @@ body.rtl {
 
  .column-header__setting-arrows {
  float: left;
+
+ .column-header__setting-btn {
+ &:first-child {
+ padding-left: 7px;
+ padding-right: 5px;
+ }
+
+ &:last-child {
+ padding-right: 7px;
+ padding-left: 5px;
+ margin-right: 5px;
+ margin-left: 0;
+ }
+ }
  }
 
  .setting-toggle__label {
@@ -451,11 +465,6 @@ body.rtl {
  margin-left: 5px;
  }
 
- .column-header__setting-arrows .column-header__setting-btn:last-child {
- padding-left: 0;
- padding-right: 10px;
- }
-
  .simple_form .input.radio_buttons .radio > label input {
  left: auto;
  right: 0;