@aurodesignsystem/auro-dialog 4.2.1 → 4.2.2-rc-1638600.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -3
- package/README.md +70 -82
- package/demo/accessibility.md +7 -2
- package/demo/accessibility.min.js +338 -48
- package/demo/api.md +2 -2
- package/demo/customize.min.js +338 -48
- package/demo/design.min.js +338 -48
- package/demo/index.md +1 -0
- package/demo/index.min.js +338 -48
- package/demo/readme.min.js +338 -48
- package/dist/{auro-dialog-T9I85UZL.js → auro-dialog-FFeXiEB1.js} +4 -4
- package/dist/index.d.ts +16 -8
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
## [4.2.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v4.2.
|
|
1
|
+
## [4.2.2-rc-1638600.1](https://github.com/AlaskaAirlines/auro-dialog/compare/v4.2.1...v4.2.2-rc-1638600.1) (2026-10-06)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
7
|
-
* update library to suppress Escape keydown for modal AB[#1613688](https://github.com/AlaskaAirlines/auro-dialog/issues/1613688) ([d893a9c](https://github.com/AlaskaAirlines/auro-dialog/commit/d893a9c3b17643bf1d722b82dd75b9fcb1d38432))
|
|
6
|
+
* restore page scroll lock behind non-modal dialogs AB[#1625424](https://github.com/AlaskaAirlines/auro-dialog/issues/1625424) ([56c2f89](https://github.com/AlaskaAirlines/auro-dialog/commit/56c2f8944b170043f95509a97ec6bb9f5276706f)), closes [AB#1647843](https://github.com/AB/issues/1647843)
|
|
8
7
|
|
|
9
8
|
# Semantic Release Automated Changelog
|
|
10
9
|
|
package/README.md
CHANGED
|
@@ -48,9 +48,7 @@ The following sections are editable by making changes to the following files:
|
|
|
48
48
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
49
49
|
|
|
50
50
|
|
|
51
|
-
|
|
52
|
-
$ npm i @aurodesignsystem/auro-dialog
|
|
53
|
-
```
|
|
51
|
+
<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-dialog</code></pre>
|
|
54
52
|
|
|
55
53
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
56
54
|
|
|
@@ -62,9 +60,7 @@ Defining the dependency within each project that is using the `<auro-dialog>` co
|
|
|
62
60
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
63
61
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
64
62
|
|
|
65
|
-
|
|
66
|
-
import "@aurodesignsystem/auro-dialog";
|
|
67
|
-
```
|
|
63
|
+
<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-dialog";</code></pre>
|
|
68
64
|
|
|
69
65
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
66
|
|
|
@@ -73,9 +69,7 @@ import "@aurodesignsystem/auro-dialog";
|
|
|
73
69
|
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
74
70
|
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
75
71
|
|
|
76
|
-
|
|
77
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm"></script>
|
|
78
|
-
```
|
|
72
|
+
<pre class="language-html"><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm"></script></code></pre>
|
|
79
73
|
|
|
80
74
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
81
75
|
|
|
@@ -84,28 +78,26 @@ In cases where the project is not able to process JS assets, there are pre-proce
|
|
|
84
78
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
85
79
|
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
86
80
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
</auro-dialog>
|
|
108
|
-
```
|
|
81
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
82
|
+
<auro-button id="openBasic">Open default dialog</auro-button>
|
|
83
|
+
</div>
|
|
84
|
+
<auro-dialog id="defaultDialog">
|
|
85
|
+
<span slot="header">Default Dialog</span>
|
|
86
|
+
<div slot="content">
|
|
87
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
88
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
89
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
90
|
+
<ul>
|
|
91
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
92
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
93
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
94
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
95
|
+
</ul>
|
|
96
|
+
</div>
|
|
97
|
+
<div slot="footer">
|
|
98
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
99
|
+
</div>
|
|
100
|
+
</auro-dialog></code></pre>
|
|
109
101
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
110
102
|
|
|
111
103
|
## Custom Component Registration for Version Management
|
|
@@ -122,67 +114,63 @@ You can do this by importing only the component class and using the `register(na
|
|
|
122
114
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
123
115
|
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
124
116
|
|
|
125
|
-
|
|
126
|
-
// Import the class only
|
|
117
|
+
<pre class="language-js"><code class="language-js">// Import the class only
|
|
127
118
|
import { AuroDialog } from '@aurodesignsystem/auro-dialog/class';
|
|
128
|
-
|
|
119
|
+
|
|
129
120
|
// Register with a custom name if desired
|
|
130
|
-
AuroDialog.register('custom-dialog')
|
|
131
|
-
```
|
|
121
|
+
AuroDialog.register('custom-dialog');</code></pre>
|
|
132
122
|
|
|
133
123
|
This will create a new custom element `<custom-dialog>` that behaves exactly like `<auro-dialog>`, allowing both to coexist on the same page without interfering with each other.
|
|
134
124
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
135
125
|
<div class="exampleWrapper exampleWrapper--flex">
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
126
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
|
|
127
|
+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
|
|
128
|
+
<div>
|
|
129
|
+
<auro-button id="openCustom">Open default dialog</auro-button>
|
|
130
|
+
</div>
|
|
131
|
+
<custom-dialog id="customDialog">
|
|
132
|
+
<span slot="header">Default Dialog</span>
|
|
133
|
+
<div slot="content">
|
|
134
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
135
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
136
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
137
|
+
<ul>
|
|
138
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
139
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
140
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
141
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
142
|
+
</ul>
|
|
143
|
+
</div>
|
|
144
|
+
<div slot="footer">
|
|
145
|
+
<auro-button secondary id="closeCustom">Close</auro-button>
|
|
146
|
+
</div>
|
|
147
|
+
</custom-dialog>
|
|
148
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
159
149
|
</div>
|
|
160
150
|
<auro-accordion alignRight>
|
|
161
|
-
|
|
151
|
+
<span slot="trigger">See code</span>
|
|
162
152
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
|
|
163
153
|
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
|
|
164
154
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
</custom-dialog>
|
|
186
|
-
```
|
|
155
|
+
<pre class="language-html"><code class="language-html"><div>
|
|
156
|
+
<auro-button id="openCustom">Open default dialog</auro-button>
|
|
157
|
+
</div>
|
|
158
|
+
<custom-dialog id="customDialog">
|
|
159
|
+
<span slot="header">Default Dialog</span>
|
|
160
|
+
<div slot="content">
|
|
161
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
162
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
163
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
164
|
+
<ul>
|
|
165
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
166
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
167
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
168
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
169
|
+
</ul>
|
|
170
|
+
</div>
|
|
171
|
+
<div slot="footer">
|
|
172
|
+
<auro-button secondary id="closeCustom">Close</auro-button>
|
|
173
|
+
</div>
|
|
174
|
+
</custom-dialog></code></pre>
|
|
187
175
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
188
176
|
</auro-accordion>
|
package/demo/accessibility.md
CHANGED
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
<auro-anchorlink fluid href="#semantics">Semantics & Roles</auro-anchorlink>
|
|
8
8
|
<auro-anchorlink fluid href="#labelling">Labelling</auro-anchorlink>
|
|
9
9
|
<auro-anchorlink fluid href="#focusManagement">Focus Management</auro-anchorlink>
|
|
10
|
+
<auro-anchorlink fluid href="#backgroundScroll">Background Scroll</auro-anchorlink>
|
|
10
11
|
<auro-anchorlink fluid href="#unformattedA11y">Unformatted Dialogs</auro-anchorlink>
|
|
11
12
|
<auro-anchorlink fluid href="#closeButtonLabel">Close Button Label</auro-anchorlink>
|
|
12
13
|
</auro-nav>
|
|
@@ -16,8 +17,8 @@
|
|
|
16
17
|
<auro-header level="2" id="semantics">Semantics & Roles</auro-header>
|
|
17
18
|
<p>The component renders its content inside a native HTML <code><dialog></code> element, which carries the implicit <code>role="dialog"</code> and the built-in semantics that assistive technology expects.</p>
|
|
18
19
|
<ul>
|
|
19
|
-
<li>A <strong>non-modal</strong> dialog is presented using the Popover API
|
|
20
|
-
<li>A <strong>modal</strong> dialog is opened with <code>showModal()</code>, which makes the rest of the page <code>inert</code> — content outside the dialog cannot be focused or interacted with until the dialog closes.</li>
|
|
20
|
+
<li>A <strong>non-modal</strong> dialog is presented using the Popover API. Focus is trapped inside it and the page behind it is frozen while it is open, so it is exposed to assistive technology as <code>aria-modal="true"</code>.</li>
|
|
21
|
+
<li>A <strong>modal</strong> dialog is opened with <code>showModal()</code>, which does all of the above and additionally makes the rest of the page <code>inert</code> — content outside the dialog cannot be focused or interacted with until the dialog closes.</li>
|
|
21
22
|
</ul>
|
|
22
23
|
<auro-header level="2" id="labelling">Labelling</auro-header>
|
|
23
24
|
<p>The dialog wires up two ARIA relationships automatically:</p>
|
|
@@ -37,7 +38,11 @@
|
|
|
37
38
|
<li><strong>On open</strong> — once the open animation completes, focus is moved to the first focusable element inside the dialog.</li>
|
|
38
39
|
<li><strong>While open</strong> — focus is trapped within the dialog. <code>Tab</code> and <code>Shift</code> + <code>Tab</code> cycle through the dialog's focusable elements and wrap at the ends; elements outside the dialog are not reachable.</li>
|
|
39
40
|
<li><strong>On close</strong> — focus is restored to the element that was active (<code>document.activeElement</code>) when the dialog opened. The <code>triggerElement</code> property sets a fallback focus target, used only when no element was active at open time.</li>
|
|
41
|
+
<li><strong>Dismissing with the keyboard</strong> — <code>Escape</code> closes a <strong>non-modal</strong> dialog. A <strong>modal</strong> dialog deliberately ignores <code>Escape</code> and must be dismissed through an explicit action, such as the close button. A non-modal dialog can also be dismissed by clicking the page behind it, but that affordance is not exposed to assistive technology while <code>aria-modal="true"</code> is set, so <code>Escape</code> is the equivalent path for keyboard and screen reader users.</li>
|
|
40
42
|
</ul>
|
|
43
|
+
<auro-header level="2" id="backgroundScroll">Background Scroll</auro-header>
|
|
44
|
+
<p>Both presentations freeze the page behind the dialog for as long as it is open, and restore the previous scroll position when it closes. This is deliberate: content drifting out of view behind an open dialog is disorienting, and on touch devices and with a screen reader the page can otherwise move unexpectedly while someone is reading the dialog.</p>
|
|
45
|
+
<p>The lock blocks every scroll vector — wheel, trackpad, touch, and the arrow and space keys — including the VoiceOver three-finger swipe, which <code>overflow: hidden</code> alone does not prevent. Content <em>inside</em> the dialog still scrolls normally.</p>
|
|
41
46
|
<auro-header level="2" id="unformattedA11y">Unformatted Dialogs</auro-header>
|
|
42
47
|
<p>An <code>unformatted</code> dialog does not render the default header heading, so the <code>aria-labelledby="dialog-header"</code> relationship has nothing to point at unless you supply it. To keep the dialog properly labelled, add <code>id="dialog-header"</code> to the heading element within your slotted content:</p>
|
|
43
48
|
|