Make "show" widget in element definitions boxes play nicely with scre…

…en readers - Make show widget keyboard accesible - Make arrow icon decorative
w3c · Jul 14, 2019 · 945208a · 945208a
1 parent 3bff189
commit 945208a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/master/style/expanders.js b/master/style/expanders.js
@@ -1,31 +1,30 @@
-function expand(e) {
-  e = e.parentNode;
-  e.parentNode.removeAttribute('class');
-  e.style.display = "none";
-  e.nextSibling.style.display = "inline";
-}
-
 (function() {
-  var i, a = [], e0, e1p, e1, e2, l = document.getElementsByTagName('span');
+  function expand(e) {
+    var e1p = e.target.parentNode;
+    e1p.parentNode.removeAttribute('class');
+    e1p.style.display = "none";
+    e1p.nextSibling.style.display = "inline";
+  }
+
+  var i, e0, e1, e1p, e2, l = document.querySelectorAll('span.expanding');
   for (i = 0; i != l.length; i++) {
     e0 = l[i];
-    if (e0.getAttribute('class') == 'expanding') {
-      a.push(e0);
-    }
-  }
-  for (i = 0; i != a.length; i++) {
-    e0 = a[i];
-    e1 = document.createElement('span');
+
+    e1 = document.createElement('button');
     e1.setAttribute('class', 'expander');
-    e1.setAttribute('onclick', 'expand(event.target)');
+    e1.addEventListener('click', expand);
+    e1.textContent = 'show';
+
     e1p = document.createElement('span');
     e1p.textContent = ' ';
     e1p.appendChild(e1);
+
     e2 = document.createElement('span');
     e2.style.display = 'none';
     while (e0.firstChild) {
       e2.appendChild(e0.firstChild);
     }
+
     e0.appendChild(e1p);
     e0.appendChild(e2);
   }

diff --git a/master/style/svg.css b/master/style/svg.css
@@ -81,11 +81,19 @@ span.annotation { color: purple; }
 .element-summary dd { margin-top: 0; }
 .element-summary ul.no-bullets { list-style: none; margin-left: 0; padding-left: 0 }
 .element-summary ul.no-bullets li { padding-left: 2em; text-indent: -2em; }
-.expander { color: #888; text-decoration: underline; cursor: pointer; font-size: 85% }
-.expander { }
+.expander { 
+  color: #888;
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 85%;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background: none;
+}
 .expander:active { color: #C00 }
 .expander:hover { background: #ffa }
-.expander:after { content: 'show »' }
+.expander:after { margin-left: .2em; content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAARVBMVEUAAACIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIgZ92ePAAAAF3RSTlMAAQIGBwgQGBkbHB00R3iCo6WoyMzO9cBRxjsAAAA7SURBVAgdBcEJAkAwDACwoIwxZ/n/UyUAYC/uAMYsNQMY33nJAKZv2BJ0V4us0J0t3gqO5lmBnh4A4AdkpwGwmaD7sQAAAABJRU5ErkJggg==); }
 
 /* attribute definition boxes */