Adding ability for screen reader to provide flag info when selecting a

flag drop down or flag edit field on chrome://flags page

Bug: 982439
Change-Id: Ieb95cd57fdabcd70ec12a8d8685e7e42292afaaf
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1693702Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: Andrii Sagaidak <ansagaid@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#676128}

components/flags_ui/resources/flags.html

@@ -89,14 +89,16 @@
                     : 'experiment-switched flex-container'">
               <div class="flex">
                 <h3 class="experiment-name" jscontent="name"
-                    jsvalues="title: is_default ? '' : 'Experiment enabled'"></h3>
+                    jsvalues="title: is_default ? '' : 'Experiment enabled';
+                        id:internal_name + '_name'"></h3>
                 <p>
                   <span jsvalues=".innerHTML:description"></span> –
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <div jsdisplay="origin_list_value!==null">
                   <textarea class="experiment-origin-list-value"
-                      jsvalues=".internal_name:internal_name; .value:origin_list_value"
+                      jsvalues=".internal_name:internal_name; .value:origin_list_value;
+                          aria-labelledby:internal_name + '_name'"
                       tabindex="7"></textarea>
                 </div>
                 <a class="permalink" jsvalues="href: '#' + internal_name"
@@ -105,7 +107,8 @@
               <div class="flex experiment-actions">
                 <div jsdisplay="options && options.length > 0">
                   <select class="experiment-select" tabindex="6"
-                      jsvalues=".internal_name:internal_name;.disabled:!enabled;">
+                      jsvalues=".internal_name:internal_name;.disabled:!enabled;
+                          aria-labelledby:internal_name + '_name'">
                     <option jsvalues=".selected:selected;"
                         jsselect="options"
                         jscontent="description">
@@ -114,12 +117,12 @@
                 </div>
                 <select class="experiment-enable-disable" tabindex="6"
                     jsdisplay="enabled !== undefined"
-                    jsvalues=".internal_name:internal_name;">
+                    jsvalues=".internal_name:internal_name;
+                        aria-labelledby:internal_name + '_name'">
                   <option jsvalues=".selected:!enabled; data-default: enabled ? 1 : 0"
                       value="disabled">Disabled</option>
                   <option jsvalues=".selected:enabled; data-default: !enabled ? 1 : 0"
                       value="enabled">Enabled</option>
-                  </option>
                 </select>
               </div>
             </div>
@@ -133,14 +136,16 @@
                     : 'experiment-switched flex-container'">
               <div class="flex">
                 <h3 class="experiment-name" jscontent="name"
-                    jsvalues="title: is_default ? '' : 'Experiment enabled'"></h3>
+                    jsvalues="title: is_default ? '' : 'Experiment enabled';
+                        id:internal_name + '_name'"></h3>
                 <p>
                   <span jsvalues=".innerHTML:description"></span> –
                   <span class="platforms" jscontent="supported_platforms.join(', ')"></span>
                 </p>
                 <div jsdisplay="origin_list_value!==null">
                   <textarea class="experiment-origin-list-value"
-                      jsvalues=".internal_name:internal_name; .value:origin_list_value"
+                      jsvalues=".internal_name:internal_name; .value:origin_list_value;
+                          aria-labelledby:internal_name + '_name'"
                       tabindex="7"></textarea>
                 </div>
                 <a class="permalink" jsvalues="href: '#' + internal_name"
@@ -149,7 +154,8 @@
               <div class="flex experiment-actions">
                 <div jsdisplay="options && options.length > 0">
                   <select class="experiment-select" tabindex="6"
-                      jsvalues=".internal_name:internal_name;.disabled:!enabled">
+                      jsvalues=".internal_name:internal_name;.disabled:!enabled;
+                          aria-labelledby:internal_name + '_name'">
                     <option jsvalues=".selected:selected;"
                         jsselect="options"
                         jscontent="description">
@@ -159,7 +165,8 @@
                 <!-- Represent enabled / disabled options in a drop down -->
                 <select class="experiment-enable-disable" tabindex="6"
                     jsdisplay="enabled !== undefined"
-                    jsvalues=".internal_name:internal_name;">
+                    jsvalues=".internal_name:internal_name;
+                        aria-labelledby:internal_name + '_name'">
                   <option jsvalues=".selected:!enabled; data-default:!enabled ? 1 : 0"
                       value="disabled">Disabled</option>
                   <option jsvalues=".selected:enabled; data-default: enabled ? 1 : 0"