Merge branch 'master' into codepen-implementation-part6

w3c · Dec 23, 2020 · 2905c75 · 2905c75
2 parents f698a99 + 2c38b7f
commit 2905c75
Show file tree

Hide file tree

Showing 31 changed files with 1,099 additions and 452 deletions.
diff --git a/.github/workflows/lint-css.yml b/.github/workflows/lint-css.yml
@@ -29,7 +29,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js
-        uses: actions/[email protected].3
+        uses: actions/[email protected].4
 
       - uses: xt0rted/stylelint-problem-matcher@v1
 

diff --git a/.github/workflows/lint-html.yml b/.github/workflows/lint-html.yml
@@ -33,7 +33,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js
-        uses: actions/[email protected].3
+        uses: actions/[email protected].4
 
       - name: Install npm dependencies
         run: npm ci

diff --git a/.github/workflows/lint-js.yml b/.github/workflows/lint-js.yml
@@ -31,7 +31,7 @@ jobs:
       # setup-node task is used without a particular version in order to load
       # the ESLint problem matchers
       - name: Set up Node.js
-        uses: actions/[email protected].3
+        uses: actions/[email protected].4
 
       - name: Install npm dependencies
         run: npm ci

diff --git a/.github/workflows/regression.yml b/.github/workflows/regression.yml
@@ -35,7 +35,7 @@ jobs:
           fetch-depth: 0
 
       - name: Set up Node.js
-        uses: actions/[email protected].3
+        uses: actions/[email protected].4
 
       - name: Install npm dependencies
         run: npm ci

diff --git a/.github/workflows/spelling.yml b/.github/workflows/spelling.yml
@@ -34,7 +34,7 @@ jobs:
         uses: actions/checkout@v2
 
       - name: Set up Node.js
-        uses: actions/[email protected].3
+        uses: actions/[email protected].4
 
       - name: Install npm dependencies
         run: npm ci

diff --git a/cspell.json b/cspell.json
@@ -168,6 +168,7 @@
         "Thiel",
         "Thiers",
         "thomascorthals",
+        "togglable",
         "transactinide",
         "transuranic",
         "Transuranium",
@@ -208,7 +209,7 @@
         "aria-owns=\"(?:[^\\\"]+|\\.)*\"",
         "href=\"(?:[^\\\"]+|\\.)*\"",
         "for=\"(?:[^\\\"]+|\\.)*\"",
-        "url\\(\"data\\:image/svg\\+xml.*\"\\);"
+        "url\\(\"data\\:image/svg\\+xml.*\"\\)[,;]"
     ],
     "allowCompoundWords": true,
     "ignorePaths": [

diff --git a/examples/button/button_idl.html b/examples/button/button_idl.html
@@ -38,7 +38,9 @@ <h1>Button Examples (IDL Version)</h1>
     </p>
 
     <section>
-      <h2 id="ex_label">Example</h2>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
 
       <p>
         <strong>IMPORTANT:</strong> This example uses features of the draft ARIA 1.2 specification. As a draft specification, it is subject to change. Support provided by browsers or assistive technologies is experimental.
@@ -53,9 +55,38 @@ <h2 id="ex_label">Example</h2>
         <a tabindex="0" id="toggle">
           Mute
           <svg aria-hidden="true" focusable="false">
-            <use xlink:href="images/mute.svg#icon-sound"></use>
+            <use xlink:href="#icon-sound"></use>
           </svg>
         </a>
+
+        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">
+          <defs>
+            <symbol id="icon-mute" viewBox="0 0 75 75">
+              <polygon
+                 id="polygon1"
+                 points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
+                 style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;" />
+              <path
+                 id="path3003"
+                 d="M 48.651772,50.269646 69.395223,25.971024"
+                 style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round" />
+              <path
+                 id="path3003-1"
+                 d="M 69.395223,50.269646 48.651772,25.971024"
+                 style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+            </symbol>
+            <symbol id="icon-sound" viewBox="0 0 75 75">
+              <polygon points="39.389,13.769 22.235,28.606 6,28.606 6,47.699 21.989,47.699 39.389,62.75 39.389,13.769"
+                style="stroke:currentColor;stroke-width:5;stroke-linejoin:round;fill:currentColor;"/>
+              <path d="M 48.128,49.03 C 50.057,45.934 51.19,42.291 51.19,38.377 C 51.19,34.399 50.026,30.703 48.043,27.577"
+                style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+              <path d="M 55.082,20.537 C 58.777,25.523 60.966,31.694 60.966,38.377 C 60.966,44.998 58.815,51.115 55.178,56.076"
+                style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+              <path d="M 61.71,62.611 C 66.977,55.945 70.128,47.531 70.128,38.378 C 70.128,29.161 66.936,20.696 61.609,14.01"
+                style="fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round"/>
+            </symbol>
+          </defs>
+        </svg>
       </div>
 
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
@@ -163,7 +194,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
     <section>
       <h2>Javascript and CSS Source Code</h2>
 
-      <ul>
+      <ul id="css_js_files">
         <li>
           CSS:
           <a href="css/button.css" type="text/css">button.css</a>
@@ -185,7 +216,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
       <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
 
       <script>
-        sourceCode.add('source1', 'example');
+        sourceCode.add('source1', 'example', 'ex_label', 'css_js_files');
         sourceCode.make();
       </script>
     </section>

diff --git a/examples/button/js/button_idl.js b/examples/button/js/button_idl.js
@@ -7,8 +7,8 @@
 
 'use strict';
 
-var ICON_MUTE_URL = 'images/mute.svg#icon-mute';
-var ICON_SOUND_URL = 'images/mute.svg#icon-sound';
+var ICON_MUTE_URL = '#icon-mute';
+var ICON_SOUND_URL = '#icon-sound';
 
 function init() {
   var actionButton = document.getElementById('action');

diff --git a/examples/css/core.css b/examples/css/core.css
@@ -55,6 +55,12 @@ table.data.attributes tbody td {
   hyphens: manual;
 }
 
+/* We need to override the top margin for the link example */
+
+th .example-header {
+  margin-top: 1em;
+}
+
 .example-header > :first-child {
   margin: 0;
 }

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
@@ -66,7 +66,7 @@
   width: 320px;
   clear: both;
   border: 3px solid hsl(216, 80%, 51%);
-  margin-top: 1em;
+  margin-top: 0.15em;
   border-radius: 5px;
   padding: 0;
   background-color: #fff;

diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css
@@ -41,11 +41,11 @@ dl.faq button:active {
 }
 
 dl.faq button[aria-expanded="false"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill=' %23034575' stroke= '%23034575' /%3E%3C/svg%3E%0A");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
   padding-right: 0.35em;
 }
 
 dl.faq button[aria-expanded="true"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='%23034575' stroke= '%23034575' /%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
   padding-right: 0.35em;
 }
diff --git a/examples/disclosure/css/disclosure-img-long-description.css b/examples/disclosure/css/disclosure-img-long-description.css
@@ -29,12 +29,12 @@ figure button:active {
 }
 
 figure button[aria-expanded="false"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill=' %23034575' stroke= '%23034575' /%3E%3C/svg%3E%0A");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E%0A");
   padding-right: 0.25em;
 }
 
 figure button[aria-expanded="true"]::before {
-  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='%23034575' stroke= '%23034575' /%3E%3C/svg%3E ");
+  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentColor' stroke= 'currentColor' /%3E%3C/svg%3E ");
   padding-right: 0.25em;
 }
 

diff --git a/examples/index.html b/examples/index.html
@@ -792,4 +792,4 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
   </nav>
 
 
-</body></html>
+</body></html>
diff --git a/examples/link/css/link.css b/examples/link/css/link.css
@@ -21,7 +21,7 @@
 
 [role="link"].link3::before {
   display: block;
-  content: url("../images/w3c-logo.png");
-  width: 153px;
-  height: 104px;
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' height='143px' width='210px' version='1.1'%3E%3Cpath d='m52.352 24.412l16.955 57.643 16.953-57.643h45.964v5.73l-17.307 29.816c6.08 1.949 10.678 5.498 13.795 10.641 3.119 5.146 4.68 11.184 4.68 18.121 0 8.578-2.283 15.787-6.844 21.631s-10.465 8.768-17.713 8.768c-5.458 0-10.211-1.732-14.262-5.201-4.054-3.469-7.054-8.164-9.002-14.09l9.585-3.975c1.404 3.586 3.256 6.412 5.556 8.475 2.299 2.066 5.008 3.1 8.125 3.1 3.271 0 6.041-1.832 8.301-5.494 2.262-3.664 3.393-8.066 3.393-13.215 0-5.691-1.209-10.096-3.623-13.213-2.811-3.662-7.215-5.496-13.216-5.496h-4.674v-5.611l16.367-28.297h-19.755l-1.124 1.914-24.031 81.088h-1.169l-17.54-58.691-17.536 58.691h-1.168l-28.056-94.696h12.276l16.953 57.643 11.46-38.815-5.611-18.826h12.273v-0.004z' fill='%23005A9C'/%3E%3Cpath d='m196.02 24.412c-2.41 0-4.574 0.869-6.215 2.535-1.74 1.768-2.709 4.051-2.709 6.412s0.922 4.549 2.611 6.266c1.717 1.74 3.928 2.686 6.314 2.686 2.334 0 4.6-0.945 6.361-2.658 1.689-1.641 2.611-3.828 2.611-6.289 0-2.387-0.945-4.623-2.584-6.289-1.7-1.745-3.94-2.663-6.38-2.663zm7.78 9.024c0 2.064-0.799 3.979-2.26 5.393-1.543 1.494-3.457 2.289-5.57 2.289-1.986 0-3.949-0.818-5.418-2.311-1.465-1.494-2.287-3.406-2.287-5.443 0-2.039 0.846-4.027 2.361-5.566 1.416-1.443 3.328-2.211 5.416-2.211 2.139 0 4.051 0.799 5.543 2.311 1.45 1.438 2.22 3.373 2.22 5.538zm-7.53-5.321h-3.826v10.143h1.914v-4.324h1.891l2.063 4.324h2.137l-2.264-4.621c1.465-0.301 2.313-1.293 2.313-2.734 0.01-1.84-1.39-2.788-4.22-2.788zm-0.35 1.244c1.789 0 2.609 0.498 2.609 1.74 0 1.191-0.82 1.617-2.563 1.617h-1.617v-3.357h1.57z'/%3E%3Cpath d='m180.97 23.881l1.988 12.09-7.039 13.469s-2.701-5.715-7.191-8.875c-3.781-2.664-6.246-3.244-10.1-2.449-4.949 1.021-10.561 6.938-13.01 14.234-2.93 8.727-2.959 12.953-3.063 16.832-0.164 6.223 0.816 9.896 0.816 9.896s-4.275-7.906-4.234-19.486c0.027-8.268 1.328-15.764 5.152-23.16 3.365-6.504 8.367-10.408 12.807-10.867 4.59-0.473 8.215 1.738 11.02 4.131 2.941 2.516 5.916 8.01 5.916 8.01l6.92-13.825z'/%3E%3Cpath d='m181.84 92.289s-3.111 5.563-5.049 7.705c-1.939 2.145-5.408 5.918-9.691 7.807-4.283 1.887-6.529 2.24-10.764 1.836-4.229-0.406-8.16-2.855-9.537-3.877s-4.898-4.029-6.889-6.836c-1.992-2.807-5.102-8.416-5.102-8.416s1.732 5.623 2.82 8.01c0.623 1.375 2.541 5.576 5.266 9.232 2.541 3.41 7.475 9.283 14.973 10.609 7.498 1.328 12.65-2.041 13.926-2.855 1.273-0.814 3.961-3.066 5.664-4.889 1.775-1.896 3.457-4.32 4.385-5.773 0.682-1.063 1.789-3.215 1.789-3.215l-1.79-9.331z'/%3E%3C/svg%3E");
+  width: 210px;
+  height: 143px;
 }
diff --git a/examples/link/images/w3c-logo.png b/examples/link/images/w3c-logo.png
diff --git a/examples/link/images/w3c-logo.svg b/examples/link/images/w3c-logo.svg
diff --git a/examples/link/link.html b/examples/link/link.html
@@ -50,7 +50,7 @@ <h2 id="ex_label">Examples</h2>
       <tbody>
         <tr>
           <th>
-            1
+            <div class="example-header"><span id="ex1_label">1</span></div>
           </th>
           <td>
             <code>span</code> element with text content.
@@ -59,15 +59,15 @@ <h2 id="ex_label">Examples</h2>
             <span
                 tabindex="0"
                 role="link"
-                onclick="goToLink(event, 'http://www.w3.org/')"
-                onkeydown="goToLink(event, 'http://www.w3.org/')">
+                onclick="goToLink(event, 'https://www.w3.org/')"
+                onkeydown="goToLink(event, 'https://www.w3.org/')">
               W3C website
             </span>
           </td>
         </tr>
         <tr>
           <th>
-            2
+            <div class="example-header"><span id="ex2_label">2</span></div>
           </th>
           <td>
             <code>img</code> element with <code>alt</code> attribute.
@@ -76,15 +76,15 @@ <h2 id="ex_label">Examples</h2>
             <img
               tabindex="0"
               role="link"
-              onclick="goToLink(event, 'http://www.w3.org/')"
-              onkeydown="goToLink(event, 'http://www.w3.org/')"
-              src="images/w3c-logo.png"
+              onclick="goToLink(event, 'https://www.w3.org/')"
+              onkeydown="goToLink(event, 'https://www.w3.org/')"
+              src="images/w3c-logo.svg"
               alt="W3C Website">
           </td>
         </tr>
         <tr>
           <th>
-            3
+            <div class="example-header"><span id="ex3_label">3</span></div>
           </th>
           <td>
             CSS <code>:before</code> content property on a <code>span</code> element.
@@ -94,8 +94,8 @@ <h2 id="ex_label">Examples</h2>
               tabindex="0"
               role="link"
               class="link3"
-              onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
-              onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
+              onclick="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')"
+              onkeydown="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')"
               aria-label="W3C website"></span>
           </td>
         </tr>
@@ -175,7 +175,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
   <section>
     <h2>Javascript and CSS Source Code</h2>
-    <ul>
+    <ul id="css_js_files">
       <li>
         CSS:
         <a href="css/link.css" type="tex/css">link.css</a>
@@ -202,9 +202,9 @@ <h3 id="sc3_label">Link 3</h3>
     <pre><code id="sc3"></code></pre>
     <div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
     <script>
-      sourceCode.add('sc1', 'ex1');
-      sourceCode.add('sc2', 'ex2');
-      sourceCode.add('sc3', 'ex3');
+      sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
+      sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
+      sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
       sourceCode.make();
     </script>
   </section>

diff --git a/examples/toolbar/js/FormatToolbar.js b/examples/toolbar/js/FormatToolbar.js
@@ -47,6 +47,7 @@ FormatToolbar.prototype.init = function () {
     this.domNode.getBoundingClientRect().width - 12 + 'px';
   this.textarea.addEventListener('mouseup', this.selectTextContent.bind(this));
   this.textarea.addEventListener('keyup', this.selectTextContent.bind(this));
+  this.domNode.addEventListener('click', this.handleContainerClick.bind(this));
 
   this.selected = this.textarea.selectText;
 
@@ -81,6 +82,16 @@ FormatToolbar.prototype.init = function () {
   }
 };
 
+FormatToolbar.prototype.handleContainerClick = function () {
+  if (event.target !== this.domNode) return;
+  this.setFocusCurrentItem();
+};
+
+FormatToolbar.prototype.setFocusCurrentItem = function () {
+  var item = this.domNode.querySelector('[tabindex="0"]');
+  item.focus();
+};
+
 FormatToolbar.prototype.selectTextContent = function () {
   this.start = this.textarea.selectionStart;
   this.end = this.textarea.selectionEnd;

diff --git a/examples/treegrid/css/expand-icon-highlighted.svg b/examples/treegrid/css/expand-icon-highlighted.svg
diff --git a/examples/treegrid/css/expand-icon.svg b/examples/treegrid/css/expand-icon.svg
diff --git a/examples/treegrid/css/treegrid-1.css b/examples/treegrid/css/treegrid-1.css
@@ -91,7 +91,8 @@
   cursor: pointer;
 
   /* Load both right away so there is no lag when we need the other */
-  background-image: url("expand-icon.svg"), url("expand-icon-highlighted.svg");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='black' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A"),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='hsl(216, 94%25, 50%25)' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
 }
 
@@ -104,5 +105,5 @@
 #treegrid tr[aria-expanded] > td:focus:first-child::before,
 #treegrid tr:focus > td[aria-expanded]:first-child::before,
 #treegrid tr > td[aria-expanded]:focus:first-child::before {
-  background-image: url("expand-icon-highlighted.svg");
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon fill='hsl(216, 94%25, 50%25)' points='2,0 2,10 10,5'%3E%3C/polygon%3E%3C/svg%3E%0A");
 }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -792,4 +792,4 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
		</nav>


		</body></html>
		</body></html>