From 5a6a403cc96ab97b7e682063bea6015ca25511cd Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Thu, 29 Mar 2018 06:27:37 +0300
Subject: [PATCH] use <a> wrapper for the toggle icon in options

---
 options.html       | 16 ++++++++++------
 options/options.js | 13 ++++++-------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/options.html b/options.html
index 6dbb2173..63dbecf1 100644
--- a/options.html
+++ b/options.html
@@ -125,12 +125,16 @@
     <div class="block" id="advanced">
       <div class="collapsible-resizer">
         <h1 i18n-text="optionsAdvanced">
-          <svg class="svg-icon is-collapsed" viewBox="0 0 1792 1792">
-            <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
-          </svg>
-          <svg class="svg-icon is-expanded" viewBox="0 0 1792 1792">
-            <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
-          </svg>  	  
+          <a href="#" class="svg-inline-wrapper is-collapsed">
+            <svg class="svg-icon" viewBox="0 0 1792 1792">
+              <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+            </svg>
+          </a>
+          <a href="#" class="svg-inline-wrapper is-expanded">
+            <svg class="svg-icon" viewBox="0 0 1792 1792">
+              <path fill-rule="evenodd" d="M1408 1216q0 26-19 45t-45 19h-896q-26 0-45-19t-19-45 19-45l448-448q19-19 45-19t45 19l448 448q19 19 19 45z"/>
+            </svg>
+          </a>
         </h1>
       </div>
       <div class="items">
diff --git a/options/options.js b/options/options.js
index b563c34b..ca50688b 100644
--- a/options/options.js
+++ b/options/options.js
@@ -8,15 +8,14 @@ setTimeout(splitLongTooltips);
 
 if (!FIREFOX && !OPERA) {
   const block = $('#advanced');
-  const toggleAdvanced = event => {
-    if (block.classList.contains('collapsed') || event.target.closest('h1')) {
-      block.classList.toggle('collapsed');
-    }
+  $('h1', block).onclick = event => {
+    event.preventDefault();
+    block.classList.toggle('collapsed');
+    const isCollapsed = block.classList.contains('collapsed');
+    const visibleToggle = $(isCollapsed ? '.is-collapsed' : '.is-expanded', block);
+    visibleToggle.focus();
   };
   block.classList.add('collapsible', 'collapsed');
-  block.onclick = toggleAdvanced;
-  block.onkeydown = event => event.which === 13 && toggleAdvanced(event);
-  $('h1', block).tabIndex = 0;
 }
 
 // actions