@aurodesignsystem-dev/auro-hyperlink 0.0.0-pr322.1 → 0.0.0-pr328.0

package/demo/a11y.html

@@ -51,8 +51,8 @@
     <script type="module" src="./index.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
   </body>
 </html>

package/demo/a11y.md

@@ -55,7 +55,7 @@ Reference [Accessibility Techniques for Links](https://dequeuniversity.com/check
     </tr>
     <tr>
       <td>Links to external sites</td>
-      <td>A link to an external site MAY indicate that it leads to an external site.</td>
+      <td>A link to an external site SHOULD indicate that it leads to an external site.</td>
       <td>Best practice</td>
       <td><auro-hyperlink href="https://webaim.org/techniques/hypertext/link_text" target="_blank" type="nav">Web AIM Links and Hypertext</auro-hyperlink></td>
     </tr>
@@ -69,7 +69,7 @@ Reference [Accessibility Techniques for Links](https://dequeuniversity.com/check
       <td>Avoid "link" (or similar) in the link text</td>
       <td>The link text SHOULD NOT state its semantic role (e.g. don't say "link to..."), because screen readers already state the role before reading the link text.</td>
       <td>Best practice</td>
-      <td></td>
+      <td><b>DO NOT DO THIS:</b><br>See the link for <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights</auro-hyperlink> with Alaska.</td>
     </tr>
   </tbody>
 </table>
@@ -103,10 +103,10 @@ Reference [Accessibility Techniques for Links](https://dequeuniversity.com/check
 
 #### Focus Order
 
-| Topic | Description | Requirement | Example |
-|---|---|---|---|
-|Focus order|The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.|WCAG 2.4.3||
-|Tabindex|The tabindex attribute SHOULD NOT be used with positive values to customize the tab order (e.g. don't use `tabindex="1"`).|Best practice||
+| Topic | Description | Requirement |
+|---|---|---|
+|Focus order|The navigation order of focusable elements (links, form elements, etc.) MUST be logical and intuitive.|WCAG 2.4.3|
+|Tabindex|The tabindex attribute SHOULD NOT be used with positive values to customize the tab order (e.g. don't use `tabindex="1"`).|Best practice|
 
 #### Link Colors, Contrast, and Styles
 
@@ -121,13 +121,15 @@ Reference [Accessibility Techniques for Links](https://dequeuniversity.com/check
   </thead>
   <tbody>
     <tr>
-      <td>Links visually distinguishable from non-links</td>
+      <td>Visually distinguishable</td>
       <td>Links MUST be visually distinguishable from surrounding non-link text.</td>
       <td>WCAG 1.4.1</td><td>Find <auro-hyperlink href="https://www.alaskaair.com/en/flights-to-mexico">low-fare flights to Mexico</auro-hyperlink> on Alaska Airlines.</td>
     </tr>
     <tr>
-      <td>Color as a way to visually distinguish links</td>
-      <td>Color alone MUST NOT be used as the only way to distinguish links from surrounding text <strong>unless the color contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g. underline, outline, etc.) is provided when the link is hovered or receives focus.</strong><br><br>See <auro-hyperlink href="https://webaim.org/resources/contrastchecker/?fcolor=0074CB&amp;bcolor=222222" target="_blank">color contrast test</auro-hyperlink>.</td>
+      <td>Using color to distinguish links</td>
+      <td>
+        Color MUST NOT be the only method used to distinguish links from surrounding text, <strong>unless the color contrast between the link and adjacent text is at least 3:1 and an additional visual indicator (such as an underline or outline) is provided on hover and focus.</strong><br><br> See <auro-hyperlink href="https://webaim.org/resources/contrastchecker/?fcolor=0074CB&amp;bcolor=222222" target="_blank">color contrast test</auro-hyperlink>.
+      </td>
       <td>WCAG 1.4.1</td>
       <td><auro-hyperlink type="nav" href="https://www.alaskaair.com/en/flights-to-mexico">Find low-fare flights to Mexico</auro-hyperlink></td>
     </tr>

package/demo/api.html

@@ -51,7 +51,7 @@
     <script defer type="module" src="./api.min.js"></script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
   </body>
 </html>

package/demo/api.js

@@ -1,4 +1,5 @@
 import { AuroHyperlink } from "../src/index";
+import { roleButtonExample } from "../apiExamples/role-button";
 
 AuroHyperlink.register();
 
@@ -7,7 +8,7 @@ function initHyperlinkApiExamples(initCount) {
   initCount = initCount || 0;
 
   try {
-    initHyperlinkApiExamples();
+    roleButtonExample();
   } catch {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called