[20405] [Accessibility] Some interactive elements don't have a meaningful label (2) (#4394)

* Remove elements causing a wrong message from screenreader

* Change test to expect title in link

.gitignore

@@ -37,7 +37,7 @@
 
 # Ignore all logfiles and tempfiles.
 /log/*.log
-/npm-debug.log
+npm-debug.log*
 /tmp
 *.swp
 

frontend/app/templates/components/selectable_title.html

@@ -1,11 +1,10 @@
 <div class="title-container">
   <div class="text">
-    <h2 title="{{ I18n.t('js.toolbar.search_query_title') }}" role="link">
+    <h2>
       <span has-dropdown-menu target="QuerySelectDropdownMenu"
         locals="selectedTitle,groups,transitionMethod">
-        <accessible-by-keyboard>
+        <accessible-by-keyboard link-title="{{ I18n.t('js.toolbar.search_query_title') }}" >
           <i class="icon-pulldown icon-button icon-small">
-            <span class="hidden-for-sighted">{{ I18n.t('js.toolbar.search_query_title') }}</span>
           </i>
           {{ selectedTitle | characters:50 }}
         </accessible-by-keyboard>

frontend/tests/unit/tests/ui_components/selectable-title-directive-test.js

@@ -109,7 +109,7 @@ describe('selectableTitle Directive', function() {
     });
 
     it('should show a title (tooltip) for the title', function() {
-      var content = element.find('h2').first();
+      var content = element.find('h2 a').first();
       expect(content.attr('title')).to.equal('Title1');
     });