@aurodesignsystem-dev/auro-dialog 0.0.0-pr84.0 → 0.0.0-pr87.1

package/demo/api.js

@@ -5,6 +5,7 @@ import { initEditCloseButtonExample } from "../apiExamples/editCloseButton";
 import { initModalExample } from "../apiExamples/modal";
 import { initPopoverAndDropdownExample } from "../apiExamples/popoverAndDropdown";
 import { initSizeOptionsExample } from "../apiExamples/sizeOptions";
+import { initAriaLabelSlotExample } from "../apiExamples/ariaLabelSlot";
 
 import "../src/registered"
 
@@ -20,6 +21,7 @@ export function initExamples(initCount) {
     initModalExample();
     initPopoverAndDropdownExample();
     initSizeOptionsExample();
+    initAriaLabelSlotExample();
   } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/api.md

@@ -30,11 +30,12 @@ The auro-dialog appears above the page and requires the user's attention.
 
 ## Slots
 
-| Name      | Description                                |
-|-----------|--------------------------------------------|
-| [content](#content) | Injects content into the body of the modal |
-| [footer](#footer)  | Used for action options, e.g. buttons      |
-| [header](#header)  | Text to display as the header of the modal |
+| Name                    | Description                                      |
+|-------------------------|--------------------------------------------------|
+| `ariaLabel.closeButton` | Text to describe the close button for screen readers. Default: "Close". |
+| [content](#content)               | Injects content into the body of the modal       |
+| [footer](#footer)                | Used for action options, e.g. buttons            |
+| [header](#header)                | Text to display as the header of the modal       |
 
 ## CSS Shadow Parts
 
@@ -721,6 +722,51 @@ When using the dialog with the `unformatted` attribute, some may want to adjust
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Close button aria-label slot
+
+To customize the aria-label text for the close button, use the `ariaLabel.closeButton` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlot.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/ariaLabelSlot.html -->
+  <div>
+    <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
+  </div>
+  <auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
+    <span slot="ariaLabel.closeButton">This will be the new aria label for the close button</span>
+    <span slot="content">
+      <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
+      <div class="unformattedWrapper">
+        <h1 id="dialog-header" class="heading-lg">This is a header</h1>
+        These are words that are slotted into the scope of the custom element.
+      </div>
+    </span>
+  </auro-dialog>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlot.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlot.html -->
+
+```html
+<div>
+  <auro-button id="openAriaLabelSlot">Unformatted Dialog w/ custom close button aria-label</auro-button>
+</div>
+<auro-dialog id="ariaLabelMdDialog" unformatted md lg ondark>
+  <span slot="ariaLabel.closeButton">This will be the new aria label for the close button</span>
+  <span slot="content">
+    <img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
+    <div class="unformattedWrapper">
+      <h1 id="dialog-header" class="heading-lg">This is a header</h1>
+      These are words that are slotted into the scope of the custom element.
+    </div>
+  </span>
+</auro-dialog>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Theme Support
 
 The component may be restyled using the following code sample and changing the values of the following token(s).

package/demo/api.min.js

@@ -178,6 +178,19 @@ function initSizeOptionsExample() {
   });
 }
 
+function initAriaLabelSlotExample() {
+  const button = document.querySelector("#openAriaLabelSlot");
+  const dialog = document.querySelector("#ariaLabelMdDialog");
+
+  button.addEventListener("click", () => {
+    if (dialog.hasAttribute("open")) {
+      dialog.removeAttribute("open");
+    } else {
+      dialog.setAttribute("open", true);
+    }
+  });
+}
+
 AuroDialog.register();
 
 function initExamples(initCount) {
@@ -192,6 +205,7 @@ function initExamples(initCount) {
     initModalExample();
     initPopoverAndDropdownExample();
     initSizeOptionsExample();
+    initAriaLabelSlotExample();
   } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called