@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.21 → 0.0.0-pr1451.23

package/components/menu/README.md

@@ -21,11 +21,11 @@ The following sections are editable by making changes to the following files:
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
-The `<auro-menu>` element provides a list of options for a user to select from.
+The <code>&lt;auro-menu&gt;</code> element provides a list of options for a user to select from.
 
-A list of options is created within the `<slot>` of the `<auro-menu>` element by using the `<auro-menuoption>` element to define options. Use a standard `<hr>` element to create dividers within the list of options.
+A list of options is created within the <code>&lt;slot&gt;</code> of the <code>&lt;auro-menu&gt;</code> element by using the <code>&lt;auro-menuoption&gt;</code> element to define options. Use a standard <code>&lt;hr&gt;</code> element to create dividers within the list of options.
 
-The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `<auro-menu>` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
+The <code>&lt;auro-menu&gt;</code> element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The <code>&lt;auro-menu&gt;</code> element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element.
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
 <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -36,9 +36,7 @@ The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menu
 
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
-The <code>&lt;auro-menu&gt;</code> element should be used in situations where users may:
-
-* A user needs to select one option from a list of options.
+The <code>&lt;auro-menu&gt;</code> element is not intended for stand-alone use. It serves as the options list within <auro-hyperlink href="https://auro.alaskaair.com/components/auro/select" target="_blank">auro-select</auro-hyperlink> and <auro-hyperlink href="https://auro.alaskaair.com/components/auro/combobox" target="_blank">auro-combobox</auro-hyperlink>. Refer to those components for use cases and implementation guidance.
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Getting Started
@@ -87,11 +85,8 @@ To only develop a single component, use the `--filter` flag:
 <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
-<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
-
-## Custom Component Registration for Version Management
-
-There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
+<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
+There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes" target="_blank">class</auro-hyperlink> and the custom element definition. The class defines the component's behavior, while the custom element registers it under a specific name so it can be used in HTML.
 
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
@@ -99,23 +94,11 @@ You can do this by importing only the component class and using the `register(na
 import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class';
 ​
 // Register with a custom name if desired
-AuroMenu.register('custom-menu');
-AuroMenuOption.register('custom-menu-option');</code></pre>
+AuroMenu.register('[custom]-menu');
+AuroMenuOption.register('[custom]-menu-option');</code></pre>
 
 This will create a new custom element `<custom-menu>` and `<custom-menu-option>` that behaves exactly like `<auro-menu>` and `<auro-menu-option>`, allowing both to coexist on the same page without interfering with each other.
 
-<div class="exampleWrapper exampleWrapper--flex">
-<custom-menu>
-<custom-menuoption value="stops">Stops</custom-menuoption>
-<custom-menuoption value="price">Price</custom-menuoption>
-<custom-menuoption value="duration">Duration</custom-menuoption>
-<custom-menuoption value="departure">Departure</custom-menuoption>
-<custom-menuoption value="arrival">Arrival</custom-menuoption>
-</custom-menu>
-</div>
-<auro-accordion alignRight>
-<span slot="trigger">See code</span>
-
 <pre class="language-html"><code class="language-html">&lt;custom-menu&gt;
   &lt;custom-menuoption value="stops"&gt;Stops&lt;/custom-menuoption&gt;
   &lt;custom-menuoption value="price"&gt;Price&lt;/custom-menuoption&gt;
@@ -123,5 +106,4 @@ This will create a new custom element `<custom-menu>` and `<custom-menu-option>`
   &lt;custom-menuoption value="departure"&gt;Departure&lt;/custom-menuoption&gt;
   &lt;custom-menuoption value="arrival"&gt;Arrival&lt;/custom-menuoption&gt;
 &lt;/custom-menu&gt;</code></pre>
-</auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/menu/demo/accessibility.html

@@ -0,0 +1,53 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/accessibility.md
+
+  With the exception of adding custom elements if needed for the demo.
+
+  ----------------------- DO NOT EDIT -----------------------------
+
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Demo | auro-menu | Accessibility</title>
+
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
+
+    <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
+
+    <!-- Design Token Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
+
+    <!-- Webcore Stylesheet Alaska Theme -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
+
+    <!-- Demo Specific Styles -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+
+    <script type="module">
+      import { renderPage } from './demo-support.js';
+      await renderPage('./accessibility.md');
+    </script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
+
+    <script src="./index.min.js" data-demo-script="true" type="module"></script>
+  </body>
+</html>

package/components/menu/demo/accessibility.md

@@ -0,0 +1,34 @@
+<auro-header level="1" id="overview">Menu - Accessibility</auro-header>
+<div class="contentWrapper">
+<div class="mainContent">
+<div class="scrollWrapper">
+<section>
+<auro-header level="2" id="menuRole">Menu Role</auro-header>
+<p>The <code>auro-menu</code> component renders with <code>role="listbox"</code>. Each <code>auro-menuoption</code> renders with <code>role="option"</code>. This semantic structure allows assistive technologies to communicate the list of options and their states.</p>
+</section>
+<section>
+<auro-header level="2" id="optionStates">Option States</auro-header>
+<p>Menu options communicate their state to assistive technologies:</p>
+<ul>
+<li><strong>Selected:</strong> The <code>aria-selected</code> attribute is set to <code>true</code> on the selected option(s).</li>
+<li><strong>Disabled:</strong> The <code>aria-disabled</code> attribute is set to <code>true</code> on disabled options, preventing interaction.</li>
+<li><strong>Hidden:</strong> Options with the <code>hidden</code> attribute are removed from the accessible tree.</li>
+</ul>
+</section>
+<section>
+<auro-header level="2" id="keyboardInteraction">Keyboard Interaction</auro-header>
+<p>The menu supports full keyboard navigation:</p>
+<ul>
+<li><strong>Arrow Down / Arrow Up:</strong> Moves focus between options.</li>
+<li><strong>Enter / Space:</strong> Selects the currently focused option.</li>
+<li><strong>Home / End:</strong> Moves focus to the first or last option.</li>
+</ul>
+<p>See the <auro-hyperlink href="keyboardBehavior">Keyboard Behavior</auro-hyperlink> page for full details.</p>
+</section>
+<section>
+<auro-header level="2" id="multiselect">Multi-Select</auro-header>
+<p>When the <code>multiselect</code> attribute is set, <code>aria-multiselectable="true"</code> is applied to the menu, allowing multiple options to be selected. Each option's <code>aria-selected</code> attribute reflects its individual selection state.</p>
+</section>
+</div>
+</div>
+</div>

package/components/menu/demo/api.html

@@ -18,8 +18,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Auro Web Component Demo | auro-menu</title>
 
-    <!-- Prism.js Stylesheet -->
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
+    <!-- highlight.js Stylesheet -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
 
     <!-- Legacy reference is still needed to support auro-menu's use of legacy token values at this time -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
@@ -32,31 +32,25 @@
     
     <!-- Demo Specific Styles -->
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
-</head>
+    <link rel="stylesheet" type="text/css" href="./styles.css" />
+  </head>
   <body class="auro-markdown">
     <main></main>
 
     <script type="module">
-      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
-      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
-      fetch('./api.md')
-        .then((response) => response.text())
-        .then((text) => {
-          const rawHtml = marked.parse(text);
-          document.querySelector('main').innerHTML = rawHtml;
-          Prism.highlightAll();
-        });
+      import { renderPage } from './demo-support.js';
+      await renderPage('./api.md');
     </script>
+
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@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-formkit@latest/auro-input/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm" type="module"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-radio/+esm"></script>
-    <script type="module" data-demo-script="true">
-      import { initExamples } from "./api.min.js"
-      initExamples();
-    </script>
+
+    <script src="./api.min.js" data-demo-script="true" type="module"></script>
   </body>
 </html>