Merge branch 'a11y' into 'develop'

a11y: Improve keyboard navigation, add some hover/focus styles

See merge request soapbox-pub/soapbox-fe!826

app/soapbox/components/column.js

@@ -11,6 +11,10 @@ export default class Column extends React.PureComponent {
     label: PropTypes.string,
   };
 
+  setRef = c => {
+    this.node = c;
+  }
+
   render() {
     const { className, label, children, transparent, ...rest } = this.props;
 
@@ -20,6 +24,7 @@ export default class Column extends React.PureComponent {
         aria-label={label}
         className={classNames('column', className, { 'column--transparent': transparent })}
         {...rest}
+        ref={this.setRef}
       >
         {children}
       </div>

app/soapbox/components/scrollable_list.js

@@ -22,7 +22,7 @@ const mapStateToProps = state => {
   };
 };
 
-export default @connect(mapStateToProps)
+export default @connect(mapStateToProps, null, null, { forwardRef: true })
 class ScrollableList extends PureComponent {
 
   static contextTypes = {

app/soapbox/components/sidebar_menu.js

@@ -149,6 +149,10 @@ class SidebarMenu extends ImmutablePureComponent {
     if (accountChanged || otherAccountsChanged) {
       this.fetchOwnAccounts();
     }
+
+    if (this.props.sidebarOpen && !prevProps.sidebarOpen) {
+      document.querySelector('.sidebar-menu__close').focus();
+    }
   }
 
   renderAccount = account => {

app/soapbox/features/notifications/components/notification.js

@@ -174,7 +174,7 @@ class Notification extends ImmutablePureComponent {
 
   renderMention(notification) {
     return (
-      <div className='notification notification-mention' tabIndex='0'>
+      <div className='notification notification-mention focusable-within' tabIndex='0'>
         <StatusContainer
           id={notification.getIn(['status', 'id'])}
           withDismiss

app/soapbox/features/status/index.js

@@ -1,4 +1,4 @@
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -425,10 +425,10 @@ class Status extends ImmutablePureComponent {
     if (id === status.get('id')) {
       this._selectChild(ancestorsIds.size - 1, true);
     } else {
-      let index = ancestorsIds.indexOf(id);
+      let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
-        index = descendantsIds.indexOf(id);
+        index = ImmutableList(descendantsIds).indexOf(id);
         this._selectChild(ancestorsIds.size + index, true);
       } else {
         this._selectChild(index - 1, true);
@@ -442,10 +442,10 @@ class Status extends ImmutablePureComponent {
     if (id === status.get('id')) {
       this._selectChild(ancestorsIds.size + 1, false);
     } else {
-      let index = ancestorsIds.indexOf(id);
+      let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
-        index = descendantsIds.indexOf(id);
+        index = ImmutableList(descendantsIds).indexOf(id);
         this._selectChild(ancestorsIds.size + index + 2, false);
       } else {
         this._selectChild(index + 1, false);

app/styles/components/account-header.scss

@@ -202,7 +202,8 @@
         padding: 7px;
         opacity: 0.6;
 
-        &:hover {
+        &:hover,
+        &:focus {
           opacity: 1;
         }
 

app/styles/components/status.scss

@@ -472,15 +472,14 @@
   }
 }
 
-.focusable {
+.focusable:focus,
-  &:focus {
+.focusable-within:focus-within {
-    outline: 0;
+  outline: 0;
-    box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
+  box-shadow: 0 0 6px 0 hsla(var(--brand-color_hsl), 0.7);
 
-    .status.status-direct {
+  .status.status-direct {
-      &.muted {
+    &.muted {
-        background: transparent;
+      background: transparent;
-      }
     }
   }
 }

app/styles/loading.scss

@@ -173,7 +173,8 @@
   clear: both;
   text-decoration: none;
 
-  &:hover {
+  &:hover,
+  &:focus {
     background: var(--brand-color--faint);
   }
 }

app/styles/navigation.scss

@@ -158,6 +158,11 @@
     opacity: 0.6;
     font-size: 16px;
 
+    &:hover,
+    &:focus {
+      color: var(--primary-text-color);
+    }
+
     .svg-icon {
       margin-right: 7px;
       width: 26px;