Issue 2408 - Improved accessibility of checkboxes in options page

options.html

Index: options.html
===================================================================
--- a/options.html
+++ b/options.html
@@ -76,7 +76,7 @@
         <div id="dialog-background"></div>
 
         <!-- General tab content -->
-        <div id="content-general">
+        <div id="content-general" class="tab-content">
           <div>
             <h1 class="i18n_options_blocking_title"></h1>
             <div class="hbox">
@@ -97,7 +97,7 @@
                 </div>
                 <ul id="blocking-languages-table" class="table list">
                   <template>
-                    <input type="checkbox" class="control" />
+                    <button role="checkbox" class="control"></button>
                     <span class="display"></span>
                   </template>
                 </ul>
@@ -122,14 +122,14 @@
                 <div id="custom-wrapper">
                   <ul id="recommend-list-table" class="table list">
                     <template>
-                      <input type="checkbox" class="control" />
+                      <button role="checkbox" class="control"></button>
                       <span class="display"></span>
                       <span class="popular"></span>
                     </template>
                   </ul>
                   <ul id="custom-list-table" class="table list">
                     <template>
-                      <input type="checkbox" class="control" />
+                      <button role="checkbox" class="control"></button>
                       <span class="display"></span>
                     </template>
                   </ul>
@@ -161,7 +161,7 @@
                 </div>
                 <ul id="acceptableads-table" class="table list">
                   <template>
-                    <input type="checkbox" class="control" />
+                    <button role="checkbox" class="control"></button>
                     <span class="display"></span>
                   </template>
                 </ul>
@@ -207,12 +207,14 @@
         </div>
 
         <!-- Advanced tab content -->
-        <div id="content-advanced">
+        <div id="content-advanced" class="tab-content">
           <div>
             <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_options_readMore tooltip" href="#"></a></h1>
             <ul class="table" style="width: auto;">
               <li>
-                <input type="checkbox" id="easylist"/><span id="block-element-explanation" class="i18n_options_tweaks_blockElement"></span></li>
+                <button role="checkbox" id="easylist"></button>
+                <span id="block-element-explanation" class="i18n_options_tweaks_blockElement"></span>
+              </li>
             </ul>
           </div>
           <div>
@@ -224,11 +226,36 @@
               <div id="blocking-list-overview">
                 <ul class="table cols" style="width: auto;">
                   <li class="col-name"><span class="i18n_options_tableCol_name"></span><span class="i18n_options_tableCol_description"></span><span class="i18n_options_tableCol_date"></span></li>
-                  <li><input type="checkbox" id="easylist"/><span>Easylist</span><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li>
-                  <li><input type="checkbox" id="easylist+de"/><span>Easylist Germany + Easylist</span><span>Adblocking english + german sites</span><span>15 March 14 - 10:31</span></li>
-                  <li><input type="checkbox" id="annoyance-fb"/><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li>
-                  <li><input type="checkbox" id="annoyance-youtube"/><span>Facebook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li>
-                  <li><input type="checkbox" id="own-list"/><span>Own blocking list</span><span>Your own blocking list</span><span><a href="#">edit your blocking list</a></span></li>
+                  <li>
+                    <button role="checkbox" id="easylist"></button>
+                    <span>Easylist</span>
+                    <span>Adblocking english sites</span>
+                    <span>15 March 14 - 10:31</span>
+                  </li>
+                  <li>
+                    <button role="checkbox" id="easylist+de"></button>
+                    <span>Easylist Germany + Easylist</span>
+                    <span>Adblocking english + german sites</span>
+                    <span>15 March 14 - 10:31</span>
+                  </li>
+                  <li>
+                    <button role="checkbox" id="annoyance-fb"></button>
+                    <span>Facebook annoyance blocker</span>
+                    <span>Blocks Facebook annoyances</span>
+                    <span>15 March 14 - 10:31</span>
+                  </li>
+                  <li>
+                    <button role="checkbox" id="annoyance-youtube"></button>
+                    <span>Facebook annoyance blocker</span>
+                    <span>Blocks Facebook annoyances</span>
+                    <span>15 March 14 - 10:31</span>
+                  </li>
+                  <li>
+                    <button role="checkbox" id="own-list"></button>
+                    <span>Own blocking list</span>
+                    <span>Your own blocking list</span>
+                    <span><a href="#">edit your blocking list</a></span>
+                  </li>
                 </ul>
                 <div class="controls">
                   <button>
@@ -277,7 +304,7 @@
         </div>
 
         <!-- Help tab content -->
-        <div id="content-help">
+        <div id="content-help" class="tab-content">
           <h1 class="i18n_options_faq_title"></h1>
           <p class="i18n_options_faq_description"></p>
           <p>