ARIA 1.1 Combobox Examples: Remove null entry rendered in Edge and fi…

…x HTML errors To resolve issue #622: 1. Change the way grid and listbox are cleared to prevent extraneous "null" entry in IE/Edge. 2. Fix various HTML errors in the example pages.
w3c · Apr 20, 2018 · a3349f2 · a3349f2
1 parent db540ae
commit a3349f2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 18 deletions.
diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/aria1.1pattern/grid-combo.html
@@ -10,12 +10,12 @@
 <script src="../../js/examples.js"></script>
 <script src="../../js/highlight.pack.js"></script>
 <script src="../../js/app.js"></script>
-<script src="../../js/utils.js" type="text/javascript"></script>
+<script src="../../js/utils.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
-<script src="js/grid-combobox.js" type="text/javascript"></script>
-<script src="js/grid-combo-example.js" type="text/javascript"></script>
+<script src="js/grid-combobox.js"></script>
+<script src="js/grid-combo-example.js"></script>
 </head>
 <body>
   <nav aria-label="Related Links" class="feedback">
@@ -76,7 +76,6 @@ <h2 id="ex_label">Example</h2>
           </div>
         </div>
       </div>
-      </div>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
     </section>
 
@@ -114,7 +113,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
             </td>
           </tr>
           <tr>
-            <th><li>Standard single line text editing keys</th>
+            <th>Standard single line text editing keys</th>
             <td>
               <ul>
                 <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
@@ -243,7 +242,7 @@ <h3 id="rps_label_combobox">Combobox Container</h3>
               <code>combobox</code>
             </th>
             <td></td>
-            <td><code>div</</code></td>
+            <td><code>div</code></td>
             <td>
               <ul>
                 <li>Identifies the element as a combobox.</li>
@@ -346,7 +345,7 @@ <h3 id="rps_label_textbox">Textbox</h3>
         </tbody>
       </table>
       <h3 id="rps_label_popup">Grid Popup</h3>
-      <table aria-labelledby="rps_label_listbox rps_label" class="data attributes">
+      <table aria-labelledby="rps_label_popup rps_label" class="data attributes">
         <thead>
           <tr>
             <th scope="col">Role</th>
@@ -409,8 +408,8 @@ <h3 id="rps_label_popup">Grid Popup</h3>
       <h2>Javascript and CSS Source Code</h2>
       <ul>
         <li> CSS: <a href="css/combobox-1.1.css" type="tex/css">combobox-1.1.css</a></li>
-        <li>Javascript: <a href="js/grid-combobox.js" type="text/javascript">grid-combobox.js</a></li>
-        <li>Javascript: <a href="js/grid-combo-example.js" type="text/javascript">grid-combo-example.js</a></li>
+        <li>Javascript: <a href="js/grid-combobox.js">grid-combobox.js</a></li>
+        <li>Javascript: <a href="js/grid-combo-example.js">grid-combo-example.js</a></li>
       </ul>
     </section>
 

diff --git a/examples/combobox/aria1.1pattern/js/grid-combobox.js b/examples/combobox/aria1.1pattern/js/grid-combobox.js
@@ -285,7 +285,7 @@ aria.GridCombobox.prototype.hideResults = function () {
   this.shown = false;
   this.activeRowIndex = -1;
   this.activeColIndex = 0;
-  this.grid.innerHTML = null;
+  this.grid.innerHTML = '';
   aria.Utils.addClass(this.grid, 'hidden');
   this.combobox.setAttribute('aria-expanded', 'false');
   this.rowsCount = 0;

diff --git a/examples/combobox/aria1.1pattern/js/listbox-combobox.js b/examples/combobox/aria1.1pattern/js/listbox-combobox.js
@@ -224,7 +224,7 @@ aria.ListboxCombobox.prototype.checkHide = function (evt) {
 aria.ListboxCombobox.prototype.hideListbox = function () {
   this.shown = false;
   this.activeIndex = -1;
-  this.listbox.innerHTML = null;
+  this.listbox.innerHTML = '';
   aria.Utils.addClass(this.listbox, 'hidden');
   this.combobox.setAttribute('aria-expanded', 'false');
   this.resultsCount = 0;

diff --git a/examples/combobox/aria1.1pattern/listbox-combo.html b/examples/combobox/aria1.1pattern/listbox-combo.html
@@ -10,12 +10,12 @@
 <script src="../../js/examples.js"></script>
 <script src="../../js/highlight.pack.js"></script>
 <script src="../../js/app.js"></script>
-<script src="../../js/utils.js" type="text/javascript"></script>
+<script src="../../js/utils.js"></script>
 
 <!--  js and css for this example. -->
 <link href="css/combobox-1.1.css" rel="stylesheet">
-<script src="js/listbox-combobox.js" type="text/javascript"></script>
-<script src="js/listbox-combo-example.js" type="text/javascript"></script>
+<script src="js/listbox-combobox.js"></script>
+<script src="js/listbox-combo-example.js"></script>
 </head>
 <body>
   <nav aria-label="Related Links" class="feedback">
@@ -230,7 +230,7 @@ <h3 id="kbd_label_textbox">Textbox</h3>
             </td>
           </tr>
           <tr>
-            <th><li>Standard single line text editing keys</th>
+            <th>Standard single line text editing keys</th>
             <td>
               <ul>
                 <li>Keys used for cursor movement and text manipulation, such as <kbd>Delete</kbd> and <kbd>Shift + Right Arrow</kbd>.</li>
@@ -347,7 +347,7 @@ <h3 id="rps_label_combobox">Combobox Container</h3>
               <code>combobox</code>
             </th>
             <td></td>
-            <td><code>div</</code></td>
+            <td><code>div</code></td>
             <td>
               <ul>
                 <li>Identifies the element as a combobox.</li>
@@ -526,8 +526,8 @@ <h3 id="rps_label_listbox">Listbox Popup</h3>
       <h2>Javascript and CSS Source Code</h2>
       <ul>
         <li>CSS: <a href="css/combobox-1.1.css" type="tex/css">combobox-1.1.css</a></li>
-        <li>Javascript: <a href="js/listbox-combobox.js" type="text/javascript">listbox-combobox.js</a></li>
-        <li>Javascript: <a href="js/listbox-combo-example.js" type="text/javascript">listbox-combo-example.js</a></li>
+        <li>Javascript: <a href="js/listbox-combobox.js">listbox-combobox.js</a></li>
+        <li>Javascript: <a href="js/listbox-combo-example.js">listbox-combo-example.js</a></li>
       </ul>
     </section>