@aurodesignsystem/auro-dialog 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,12 +1,10 @@
-# [4.0.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v3.1.8...v4.0.0) (2025-10-03)
+# [4.1.0](https://github.com/AlaskaAirlines/auro-dialog/compare/v4.0.0...v4.1.0) (2025-10-21)
 
 
-* feat!: upgrade package tooling to use auro-cli ([8c9303d](https://github.com/AlaskaAirlines/auro-dialog/commit/8c9303dfd9cd89003fcb8b7db83ed683a067ee6a)), closes [AlaskaAirlines/auro-cli#108](https://github.com/AlaskaAirlines/auro-cli/issues/108) [AlaskaAirlines/auro-cli#109](https://github.com/AlaskaAirlines/auro-cli/issues/109) [AlaskaAirlines/auro-cli#110](https://github.com/AlaskaAirlines/auro-cli/issues/110) [AlaskaAirlines/auro-cli#111](https://github.com/AlaskaAirlines/auro-cli/issues/111)
-
-
-### BREAKING CHANGES
+### Features
 
-* Package exports have changed. To access the component class add /class to the end of the import. See "exports" in the package.json for more details.
+* add `appearance` deprecated `ondark` [#81](https://github.com/AlaskaAirlines/auro-dialog/issues/81) ([0bbc2b1](https://github.com/AlaskaAirlines/auro-dialog/commit/0bbc2b1057595a08a57b4f91371a53d0800f5a5c))
+* add slot for close button aria label [#86](https://github.com/AlaskaAirlines/auro-dialog/issues/86) ([f46da4e](https://github.com/AlaskaAirlines/auro-dialog/commit/f46da4e278747952aefbd09b908ab9a88e64faed))
 
 # Semantic Release Automated Changelog
 

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

@@ -10,17 +10,18 @@ The auro-dialog appears above the page and requires the user's attention.
 | Attribute | Type      | Description                                      |
 |-----------|-----------|--------------------------------------------------|
 | [md](#md)      | `Boolean` | Sets dialog box to medium style. Adding both md and lg will set the dialog to md for desktop and lg for mobile. |
-| [onDark](#onDark)  | `Boolean` | Sets close icon to white for dark backgrounds    |
+| [onDark](#onDark)  | `Boolean` | DEPRECATED - use `close-button-appearance="inverse" instead. |
 | [sm](#sm)      | `Boolean` | Sets dialog box to small style. Adding both sm and lg will set the dialog to sm for desktop and lg for mobile. |
 
 ## Properties
 
-| Property         | Attribute     | Type          | Default | Description                                      |
-|------------------|---------------|---------------|---------|--------------------------------------------------|
-| [modal](#modal)          | `modal`       | `Boolean`     | false   | Modal dialog restricts the user to take an action (no default close actions) |
-| [open](#open)           | `open`        | `Boolean`     |         | Sets state of dialog to open                     |
-| [triggerElement](#triggerElement) |               | `HTMLElement` |         | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
-| [unformatted](#unformatted)    | `unformatted` | `Boolean`     | false   | Unformatted dialog window, edge-to-edge fill for content |
+| Property                | Attribute                 | Type          | Default     | Description                                      |
+|-------------------------|---------------------------|---------------|-------------|--------------------------------------------------|
+| [closeButtonAppearance](#closeButtonAppearance) | `close-button-appearance` | `string`      | "'default'" | Defines whether the close button should be light colored for use on dark backgrounds. |
+| [modal](#modal)                 | `modal`                   | `Boolean`     | false       | Modal dialog restricts the user to take an action (no default close actions) |
+| [open](#open)                  | `open`                    | `Boolean`     |             | Sets state of dialog to open                     |
+| [triggerElement](#triggerElement)        |                           | `HTMLElement` |             | The element to focus when the dialog is closed. If not set, defaults to the value of document.activeElement when the dialog is opened. |
+| [unformatted](#unformatted)           | `unformatted`             | `Boolean`     | false       | Unformatted dialog window, edge-to-edge fill for content |
 
 ## Events
 
@@ -30,11 +31,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.dialog.close` | Text to describe the "x" icon 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
 
@@ -269,7 +271,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </div>
     <div slot="footer">
       <auro-button id="closeDefaultModal">I understand
-        <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -288,7 +290,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </div>
     <div slot="footer">
       <auro-button id="closeMediumModal">I understand
-        <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -307,7 +309,7 @@ When using this state, the modal dialog must include a button action to dismiss
     </div>
     <div slot="footer">
       <auro-button id="closeSmallModal">I understand
-        <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -339,7 +341,7 @@ When using this state, the modal dialog must include a button action to dismiss
   </div>
   <div slot="footer">
     <auro-button id="closeDefaultModal">I understand
-      <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -358,7 +360,7 @@ When using this state, the modal dialog must include a button action to dismiss
   </div>
   <div slot="footer">
     <auro-button id="closeMediumModal">I understand
-      <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -377,7 +379,7 @@ When using this state, the modal dialog must include a button action to dismiss
   </div>
   <div slot="footer">
     <auro-button id="closeSmallModal">I understand
-      <auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -414,7 +416,7 @@ The use of these combinations will set the first value to the dialog for a deskt
     <div slot="footer">
       <auro-button id="closeSmLg">
         I understand
-        <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -434,7 +436,7 @@ The use of these combinations will set the first value to the dialog for a deskt
     <div slot="footer">
       <auro-button id="closeMdLg">
         I understand
-        <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -466,7 +468,7 @@ The use of these combinations will set the first value to the dialog for a deskt
   <div slot="footer">
     <auro-button id="closeSmLg">
       I understand
-      <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -486,7 +488,7 @@ The use of these combinations will set the first value to the dialog for a deskt
   <div slot="footer">
     <auro-button id="closeMdLg">
       I understand
-      <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -542,7 +544,7 @@ This is a use case where there is a popover and combobox component inside the di
     <div slot="footer">
       <auro-button id="closePopAndDrop">
         I understand
-        <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+        <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
       </auro-button>
     </div>
   </auro-dialog>
@@ -595,7 +597,7 @@ This is a use case where there is a popover and combobox component inside the di
   <div slot="footer">
     <auro-button id="closePopAndDrop">
       I understand
-      <auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
+      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
     </auro-button>
   </div>
 </auro-dialog>
@@ -631,7 +633,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
   <div>
     <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
   </div>
-  <auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
+  <auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
     <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">
@@ -651,7 +653,7 @@ Within the scope of the auro-dialog there is `aria-labelledby="dialog-header"`.
 <div>
   <auro-button id="openAccessibility">Unformatted Medium Dialog</auro-button>
 </div>
-<auro-dialog id="unformattedMdDialog" unformatted md lg ondark>
+<auro-dialog id="unformattedMdDialog" unformatted md lg close-button-appearance="inverse">
   <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">
@@ -721,6 +723,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.dialog.close` 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.dialog.close">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.dialog.close">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