issue 3741 - Add "remove" option to list items in new options page

new-options.html

Index: new-options.html
===================================================================
--- a/new-options.html
+++ b/new-options.html
@@ -98,7 +98,8 @@
                 <ul id="blocking-languages-table" class="table list">
                   <template>
                     <button role="checkbox" class="control"></button>
-                    <label class="display"></label>
+                    <span class="display"></span>

[Thomas Greiner, 2016/05/23 12:43:25]

What's the reason for changing this to `<span>` here? Seems like it was done by
accident since the other `<label>` elements are unchanged.

[saroyanm, 2016/06/08 15:21:06]

I think, missed this during the rebase, thanks.

+                    <button data-action="remove-subscription" class="delete control"></button>

[Thomas Greiner, 2016/05/23 12:43:25]

This button's accessibility needs to be improved since it's unclear to visually
impaired users what this button does. At the same time we may also want to
clarify the action of the checkbox since its label might not be sufficient
anymore due to there being two actions now.

So what I could imagine is something along those lines:

<li id="item-42" role="section">
  <button role="checkbox" class="control" title="Toggle subscription"></button>
  <label for="item-42">EasyList</label>
  <button class="control delete" data-action="remove-subscription" title="Remove
subscription"></button>
</li>

If you want, this can be tackled in a separate ticket though.

[saroyanm, 2016/06/08 15:21:06]

Updated: I tested the suggestion you've made with the screen recorder,
apparently it's still not obvious what element should toggle/remove the buttons,
so I've added "aria-labelledby" to both of the elements to point the
listElement, but I had to add "label" attribute to the list element as well to
make that connection work, anyway I can't understand the value of role element
and using for on "label" element. Also the only advantage I can see after
testing with current approach that it will be possible to setup label on parent
element regardless of the label, so for example we can have "Filter list:
German".

                   </template>
                 </ul>
                 <div class="controls">
@@ -124,13 +125,13 @@
                     <template>
                       <button role="checkbox" class="control"></button>
                       <label class="display"></label>
-                      <span class="i18n_options_popular popular"></span>
                     </template>
                   </ul>
                   <ul id="custom-list-table" class="table list">
                     <template>
                       <button role="checkbox" class="control"></button>
                       <label class="display"></label>
+                      <button data-action="remove-subscription" class="delete control"></button>
                     </template>
                   </ul>
                 </div>
@@ -183,8 +184,8 @@
                 </div>
                 <ul id="whitelisting-table" class="table list">
                   <template>
+                    <label class="display"></label>
                     <button class="delete control"></button>
-                    <label class="display"></label>
                   </template>
                 </ul>
                 <div class="controls">