Revert 'Accessibility: focus management in topics'

reverts:

- 3df0626aa5
- 3212cdda78
- 59b7760e2e
- bfc1301823

app/assets/javascripts/discourse/components/topic-list-item.js.es6

@@ -30,9 +30,8 @@ export default Ember.Component.extend(bufferedRender({
   rerenderTriggers: ['bulkSelectEnabled', 'topic.pinned'],
   tagName: 'tr',
   classNameBindings: [':topic-list-item', 'unboundClassNames', 'topic.visited'],
-  attributeBindings: ['data-topic-id', 'tabindex'],
+  attributeBindings: ['data-topic-id'],
   'data-topic-id': Em.computed.alias('topic.id'),
-  'tabindex': 0,
 
   actions: {
     toggleBookmark() {

app/assets/javascripts/discourse/lib/keyboard-shortcuts.js.es6

@@ -89,8 +89,6 @@ export default {
         this._bindToClick(binding.click, key);
       }
     });
-
-    this._bindFocus();
   },
 
   toggleBookmark() {
@@ -310,19 +308,6 @@ export default {
     }
   },
 
-  _bindFocus() {
-    const addSelected = function(e, addOrRemove) {
-      const row = '.topic-post, .topic-list-item, .topic-list tbody tr';
-      const $wrapper = $(e.target).closest(row);
-      const $srcWrapper = $(e.relatedTarget).closest(row);
-      if (!$wrapper.is($srcWrapper)) $wrapper.toggleClass('selected', addOrRemove);
-    };
-
-    const $document = $(document);
-    $document.on('focusin.topic-post', e => addSelected(e, true));
-    $document.on('focusout.topic-post', e => addSelected(e, false));
-  },
-
   _moveSelection(direction) {
     const $articles = this._findArticles();
 
@@ -330,15 +315,9 @@ export default {
       return;
     }
 
-    let $selected = $articles.filter(function(_, el) {
+    const $selected = ($articles.filter('.selected').length !== 0)
-      return el.contains(document.activeElement); // :focus
+      ? $articles.filter('.selected')
-    });
+      : $articles.filter('[data-islastviewedtopic=true]');
-    if ($selected.length === 0) {
-      $selected = $articles.filter('.selected');
-    }
-    if ($selected.length === 0) {
-      $selected = $articles.filter('[data-islastviewedtopic=true]');
-    }
     let index = $articles.index($selected);
 
     if ($selected.length !== 0) { //boundries check
@@ -375,11 +354,10 @@ export default {
       $article.addClass('selected');
 
       if ($article.is('.topic-post')) {
-        $('article', $article).focus();
+        $('a.tabLoc', $article).focus();
         this._scrollToPost($article);
 
       } else {
-        $article.focus();
         this._scrollList($article, direction);
       }
     }

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -394,11 +394,11 @@ createWidget('post-article', {
   },
 
   buildAttributes(attrs) {
-    return { 'data-post-id': attrs.id, 'data-user-id': attrs.user_id, 'tabindex': '0' };
+    return { 'data-post-id': attrs.id, 'data-user-id': attrs.user_id };
   },
 
   html(attrs, state) {
-    const rows = [];
+    const rows = [h('a.tabLoc', { attributes: { href: ''} })];
     if (state.repliesAbove.length) {
       const replies = state.repliesAbove.map(p => {
         return this.attach('embedded-post', p, { model: this.store.createRecord('post', p), state: { above: true } });

app/assets/stylesheets/common/components/keyboard_shortcuts.scss

@@ -6,20 +6,10 @@
   box-shadow: -3px 0 0 $danger;
 }
 
-.mobile-view {
-  .topic-list tr.selected td:first-child, .topic-list-item.selected td:first-child, .topic-post.selected {
-    box-shadow: none;
-  }
-}
-
 .topic-list-item.selected {
   background-color: inherit;
 }
 
-.topic-post article:focus, .topic-list tr:focus, .topic-list-item:focus {
-  outline: 0;
-}
-
 .keyboard-shortcuts-modal .modal-body {
   max-height: 560px;
 }

app/assets/stylesheets/desktop/topic-post.scss

@@ -126,7 +126,7 @@ nav.post-controls {
     border: none;
     margin-left: 3px;
 
-    &.d-hover, &:focus {
+    &.d-hover {
       background: $primary-low;
       color: $primary;
     }
@@ -142,12 +142,12 @@ nav.post-controls {
       position: relative;
     }
 
-    &.delete.d-hover, &.delete:focus {
+    &.delete.d-hover {
       background: $danger;
       color: $secondary;
     }
 
-    &.like.d-hover, &.like:focus {
+    &.like.d-hover {
       color: $love;
       background: $love-low;
     }