Issue 5549 - Implement missing error handlings for custom filter lists

desktop-options.html

Index: desktop-options.html
===================================================================
--- a/desktop-options.html
+++ b/desktop-options.html
@@ -289,6 +289,9 @@
           <header>
             <h2 class="i18n_options_customFilters_title"></h2>
             <p class="i18n_options_customFilters_description"></p>
+            <p>
+              <a class="i18n_options_customFilters_learn" id="link-filters-1" target="_blank"></a>
+            </p>
           </header>
           <div id="custom-filters">
             <h3 class="i18n_options_customFilters_widget_title"></h3>
@@ -297,18 +300,22 @@
               <button class="i18n_options_customFilters_start primary" data-action="edit-custom-filters">
               </button>
               <p>
-                <a class="i18n_options_customFilters_learn" id="link-filters" target="_blank"></a>
+                <a class="i18n_options_customFilters_learn" id="link-filters-2" target="_blank"></a>

[saroyanm, 2018/02/02 16:57:19]

Suggestion: What about specifying a class or data-attribute, in order not to
manage ID number orders ?

[a.giammarchi, 2018/02/02 17:22:00]

only reason I've used ID is that we use this E(...) function quite a lot to
setup languages so I've thought it was somehow a best practice to use IDs
(performance, aria-labelleedby, etc)

so, is ist OK if I just use a class instead of the following?
E("link-filters-1").setAttribute("href", link);
E("link-filters-2").setAttribute("href", link);

[saroyanm, 2018/02/02 17:58:57]

We are using E only for not writing document.getElementById or
"document.queryselector("ID")", so feel free to use whatever you think makes
most sense here. We also planing to simplify documentation link with issue
#6114.

               </p>
             </div>
             <textarea id="custom-filters-raw" rows="15"></textarea>
-            <div class="side-controls">
-              <button id="custom-filters-edit" class="i18n_options_customFilter_edit secondary" data-action="edit-custom-filters">
-              </button>
-              <div class="side-controls" id="custom-filters-raw-controls">
-                <button class="i18n_options_customFilter_cancel secondary" data-action="cancel-custom-filters"></button>
-                <button class="i18n_options_customFilter_save primary" data-action="save-custom-filters"></button>
+            <div id="custom-filters-edit-area">
+              <div id="custom-filters-edit-error" class="i18n_options_customFilters_edit_error"></div>

[saroyanm, 2018/02/02 16:57:19]

Nit: You call this element "custom-filters-edit-error" and the list item
"custom-filters-error".

I don't understand why the one called "edit" when the other one is not, even oth
only appear in edit mode.

So I'll suggest to rename this to something more descriptive. ex.:
custom-filters-error-message

[a.giammarchi, 2018/02/02 17:22:00]

I think this is very subjective. This is an error about editing within the edit
area so I prefer current id.

[saroyanm, 2018/02/02 17:58:57]

I see. In general edit-area IMO sounds bit ambiguous in this case, because
textarea can also be considered as an edit-area. Currently we use "controls"
(ex.: ".side-controls"), to define the form control elements container.
Ideally we would use same styling to be consistent. Couple of suggestions for
"custom-filters-edit-area":
* .control
* #custom-filters-control

+              <div class="side-controls">
+                <button id="custom-filters-edit" class="i18n_options_customFilter_edit secondary" data-action="edit-custom-filters">
+                </button>
+                <div id="custom-filters-raw-controls" class="side-controls">
+                  <button class="i18n_options_customFilter_cancel secondary" data-action="cancel-custom-filters"></button>
+                  <button class="i18n_options_customFilter_save primary" data-action="save-custom-filters"></button>
+                </div>
               </div>
             </div>
+            <ul id="custom-filters-error"></ul>

[saroyanm, 2018/02/02 16:57:20]

While we don't have yet plan simplifying the semantics, we can improve the
accessibility.
Suggestion#2:
<ul aria-labelledby="custom-filters-edit-error" role="alert"
id="custom-filters-error"></ul>

This will help assisting technologies, to specify the relationship between the
error message and filters and inform the user when the issue will appear also
this will help us meet WCAG2 spec requirement.

[a.giammarchi, 2018/02/02 17:22:00]

I like that, will do.

           </div>
         </section>
       </div>