@lion/ui 0.10.0 → 0.10.1

package/components/button/src/LionButton.js

@@ -149,7 +149,11 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
     super.updated(changedProperties);
 
     if (changedProperties.has('disabled')) {
-      this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
+      if (this.disabled) {
+        this.setAttribute('aria-disabled', 'true');
+      } else if (this.getAttribute('aria-disabled') !== null) {
+        this.removeAttribute('aria-disabled');
+      }
     }
   }
 

package/components/button/test-suites/LionButton.suite.js

@@ -40,7 +40,7 @@ export function LionButtonSuite({ klass = LionButton } = {}) {
       el.disabled = false;
       await el.updateComplete;
       expect(el.getAttribute('tabindex')).to.equal('0');
-      expect(el.getAttribute('aria-disabled')).to.equal('false');
+      expect(el.getAttribute('aria-disabled')).to.not.exist;
       expect(el.hasAttribute('disabled')).to.equal(false);
 
       el.disabled = true;

package/components/calendar/src/LionCalendar.js

@@ -658,25 +658,16 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     day.ariaCurrent = day.today ? 'date' : undefined;
     day.disabledInfo = '';
 
+    if (day.disabled) {
+      day.disabledInfo = `${this.msgLit(`lion-calendar:defaultDisabledDate`)}`;
+    }
     if (this.minDate && normalizeDateTime(day.date) < normalizeDateTime(this.minDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Earliest date to select is ${
-        this.__getSelectableDateRange().earliestSelectableDate
-      }. Please select another date.`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:beforeDisabledDate`, { params: this.__getSelectableDateRange().earliestSelectableDate })}`;
     }
-
     if (this.maxDate && normalizeDateTime(day.date) > normalizeDateTime(this.maxDate)) {
       day.disabled = true;
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Latest date to select is ${
-        this.__getSelectableDateRange().latestSelectableDate
-      }. Please select another date.`;
-    }
-
-    if (day.disabled) {
-      // TODO: turn this into a translated string
-      day.disabledInfo = `This date is unavailable. Please select another date`;
+      day.disabledInfo = `${this.msgLit(`lion-calendar:afterDisabledDate`, { params: this.__getSelectableDateRange().latestSelectableDate })}`;
     }
 
     return this.dayPreprocessor(day);

package/components/calendar/test/lion-calendar.test.js

@@ -896,6 +896,94 @@ describe('<lion-calendar>', () => {
             'Next year, December 2001',
           );
         });
+
+        it('disables a date with disableDates function provide a correct message', async () => {
+          /** @param {Date} d */
+          const disable15th = d => d.getDate() === 15;
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/01')}"
+              .disableDates=${disable15th}
+            ></lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(15).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(15).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                15
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days before "minDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .minDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(1).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(1).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                1
+              </span>
+              <span class="u-sr-only">
+                December 2000 Friday This date is unavailable. Earliest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
+
+        it('disables days after "maxDate" property provide a correct message', async () => {
+          const el = await fixture(html`
+            <lion-calendar
+              .selectedDate="${new Date('2000/12/31')}"
+              .maxDate="${new Date('2000/12/09')}"
+            >
+            </lion-calendar>
+          `);
+          const elObj = new CalendarObject(el);
+          expect(elObj.getDayObj(30).isDisabled).to.equal(true);
+          expect(elObj.getDayObj(30).el).dom.to.equal(`
+            <div
+              class="calendar__day-button"
+              aria-disabled="true"
+              role="button"
+              tabindex="-1"
+              aria-pressed="false"
+              past=""
+              current-month="">
+              <span class="calendar__day-button__text">
+                30
+              </span>
+              <span class="u-sr-only">
+                December 2000 Saturday This date is unavailable. Latest available date is 9 December 2000. Please choose another date.
+              </span>
+            </div>
+          `);
+        });
       });
     });
   });

package/components/calendar/translations/bg.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предишен месец',
   nextFullYear: 'Следващ година',
   previousFullYear: 'Предишен година',
+  defaultDisabledDate: 'Тази дата не е налична. Моля, изберете друга дата.',
+  beforeDisabledDate:
+    'Тази дата не е налична. Най-ранната налична да е {params}. Моля, изберете друга дата.',
+  afterDisabledDate:
+    'Тази дата не е налична. Най-късната налична дата е {params}. Моля, изберете друга дата.',
 };

package/components/calendar/translations/cs.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Předchozí měsíc',
   nextFullYear: 'Příští rok',
   previousFullYear: 'Předchozí rok',
+  defaultDisabledDate: 'Toto datum není k dispozici. Vyberte jiné datum.',
+  beforeDisabledDate:
+    'Toto datum není k dispozici. Nejbližší dostupné datum je {params}. Vyberte jiné datum.',
+  afterDisabledDate:
+    'Toto datum není k dispozici. Poslední dostupné datum je {params}. Vyberte jiné datum.',
 };

package/components/calendar/translations/de.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorheriger Monat',
   nextFullYear: 'Nächstes Jahr',
   previousFullYear: 'Vorheriges Jahr',
+  defaultDisabledDate: 'Dieses Datum ist nicht verfügbar. Bitte wählen Sie ein anderes Datum aus.',
+  beforeDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das früheste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
+  afterDisabledDate:
+    'Dieses Datum ist nicht verfügbar. Das späteste verfügbare Datum ist {params}. Bitte wählen Sie ein anderes Datum aus.',
 };

package/components/calendar/translations/en.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Previous month',
   nextFullYear: 'Next year',
   previousFullYear: 'Previous year',
+  defaultDisabledDate: 'This date is unavailable. Please choose another date.',
+  beforeDisabledDate:
+    'This date is unavailable. Earliest available date is {params}. Please choose another date.',
+  afterDisabledDate:
+    'This date is unavailable. Latest available date is {params}. Please choose another date.',
 };

package/components/calendar/translations/es.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mes anterior',
   nextFullYear: 'Año siguiente',
   previousFullYear: 'Año anterior',
+  defaultDisabledDate: 'Esta fecha no está disponible. Elija otra.',
+  beforeDisabledDate:
+    'Esta fecha no está disponible. La fecha más próxima disponible es {params}. Elija otra.',
+  afterDisabledDate:
+    'Esta fecha no está disponible. La fecha más lejana disponible es {params}. Elija otra.',
 };

package/components/calendar/translations/fr.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mois précédent',
   nextFullYear: 'An prochain',
   previousFullYear: 'An précédent',
+  defaultDisabledDate: "Cette date n'est pas disponible. Veuillez choisir une autre date.",
+  beforeDisabledDate:
+    "Cette date n'est pas disponible. La prochaine date disponible est la suivante : {params}. Veuillez choisir une autre date.",
+  afterDisabledDate:
+    "Cette date n'est pas disponible. La dernière date disponible est la suivante : {params}. Veuillez choisir une autre date.",
 };

package/components/calendar/translations/hu.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Előző hónap',
   nextFullYear: 'Következő év',
   previousFullYear: 'Előző év',
+  defaultDisabledDate: 'Ez a dátum nem választható. Válasszon másik dátumot.',
+  beforeDisabledDate:
+    'Ez a dátum nem választható. A legkorábbi elérhető dátum {params}. Válasszon másik dátumot.',
+  afterDisabledDate:
+    'Ez a dátum nem választható. A legkésőbbi elérhető dátum {params}. Válasszon másik dátumot.',
 };

package/components/calendar/translations/it.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Mese precedente',
   nextFullYear: 'Anno successivo',
   previousFullYear: 'Anno precedente',
+  defaultDisabledDate: "Questa data non è disponibile. Scegline un'altra.",
+  beforeDisabledDate:
+    "Questa data non è disponibile. La prima data disponibile è {params}. Scegline un'altra.",
+  afterDisabledDate:
+    "Questa data non è disponibile. L'ultima data disponibile è {params}. Scegline un'altra.",
 };

package/components/calendar/translations/nl.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Vorige maand',
   nextFullYear: 'Volgend jaar',
   previousFullYear: 'Vorig jaar',
+  defaultDisabledDate: 'Deze datum is niet beschikbaar. Kies een andere datum.',
+  beforeDisabledDate:
+    'Deze datum is niet beschikbaar. Vroegste beschikbare datum is {params}. Kies een andere datum.',
+  afterDisabledDate:
+    'Deze datum is niet beschikbaar. Laatste beschikbare datum is {params}. Kies een andere datum.',
 };

package/components/calendar/translations/pl.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Poprzedni miesiąc',
   nextFullYear: 'Następny rok',
   previousFullYear: 'Poprzedni rok',
+  defaultDisabledDate: 'Ta data jest niedostępna. Wybierz inną datę.',
+  beforeDisabledDate:
+    'Ta data jest niedostępna. Najwcześniejsza dostępna data to {params}. Wybierz inną datę.',
+  afterDisabledDate:
+    'Ta data jest niedostępna. Najpóźniejsza dostępna data to {params}. Wybierz inną datę.',
 };

package/components/calendar/translations/ro.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Luna anterioară',
   nextFullYear: 'An viitoare',
   previousFullYear: 'An anterioară',
+  defaultDisabledDate: 'Această dată nu este disponibilă. Vă rugăm să alegeți altă dată.',
+  beforeDisabledDate:
+    'Această dată nu este disponibilă. Cea mai apropiată dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
+  afterDisabledDate:
+    'Această dată nu este disponibilă. Ultima dată disponibilă este {params}. Vă rugăm să alegeți altă dată.',
 };

package/components/calendar/translations/ru.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Предыдущий месяц',
   nextFullYear: 'Следующий год',
   previousFullYear: 'Предыдущий год',
+  defaultDisabledDate: 'Эта дата недоступна. Выберите другую дату.',
+  beforeDisabledDate:
+    'Эта дата недоступна. Самая ранняя доступная дата — {params}. Выберите другую дату.',
+  afterDisabledDate:
+    'Эта дата недоступна. Самая поздняя доступная дата — {params}. Выберите другую дату.',
 };

package/components/calendar/translations/sk.js

@@ -3,4 +3,9 @@ export default {
   previousMonth: 'Predchádzajúci mesiac',
   nextFullYear: 'Nasledujúci rok',
   previousFullYear: 'Predchádzajúci rok',
+  defaultDisabledDate: 'Tento dátum nie je k dispozícii. Vyberte iný dátum.',
+  beforeDisabledDate:
+    'Tento dátum nie je k dispozícii. Najbližší možný dátum je {params}. Vyberte iný dátum.',
+  afterDisabledDate:
+    'Tento dátum nie je k dispozícii. Posledný možný dátum je {params}. Vyberte iný dátum.',
 };

package/components/calendar/translations/uk.js

@@ -3,4 +3,7 @@ export default {
   previousMonth: 'Попередній місяць',
   nextFullYear: 'Наступний року',
   previousFullYear: 'Попередній року',
+  defaultDisabledDate: 'Ця дата недоступна. Виберіть іншу дату.',
+  beforeDisabledDate: 'Ця дата недоступна. Найближча доступна дата {params}. Виберіть іншу дату.',
+  afterDisabledDate: 'Ця дата недоступна. Остання доступна дата {params}. Виберіть іншу дату.',
 };

package/components/calendar/translations/zh.js

@@ -3,4 +3,7 @@ export default {
   previousMonth: '前一个月',
   nextFullYear: '明一年',
   previousFullYear: '前一年',
+  defaultDisabledDate: '此日期不可选。请选择另一个日期。',
+  beforeDisabledDate: '此日期不可选。最早可选日期为 {params}。请选择另一个日期。',
+  afterDisabledDate: '此日期不可选。最晚可选日期为 {params}。请选择另一个日期。',
 };

package/components/core/src/SlotMixin.js

@@ -182,6 +182,21 @@ const SlotMixinImplementation = superclass =>
       // Providing all options breaks Safari: we keep host and creationScope
       const { creationScope, host } = this.renderOptions;
       render(template, rerenderTarget, { creationScope, host, renderBefore });
+
+      // Assume we had this config:
+      // `'my-slot': () => ({ template: myBool ? html`<div id=a></div>` : html`<span id=b></span>`, renderAsDirectHostChild: true })`
+      // If myBool started as true, <div id=a></div> would be rendered in first render above, a slot would be applied,
+      // resulting in <div id=a slot=my-slot></div>
+      // However, when myBool changes to false, the <span id=b></span> would be rendered as root instead...
+      // We need to make sure that this "replaced root" gets the slot applied as well => <span id=b slot=my-slot></span>
+      const isRerenderingRootOfTemplate =
+        renderAsDirectHostChild &&
+        renderBefore.previousElementSibling &&
+        !renderBefore.previousElementSibling.slot;
+
+      if (isRerenderingRootOfTemplate) {
+        renderBefore.previousElementSibling.slot = slotName;
+      }
     }
 
     /**

package/components/core/test/SlotMixin.test.js

@@ -345,6 +345,56 @@ describe('SlotMixin', () => {
       expect(isActiveElement(el._focusableNode._buttonNode, { deep: true })).to.be.true;
     });
 
+    it('allows for switching template root in slot as a direct child', async () => {
+      const tagName = defineCE(
+        // @ts-expect-error
+        class extends SlotMixin(LitElement) {
+          static properties = { isSwitched: Boolean };
+
+          constructor() {
+            super();
+            this.isSwitched = false;
+          }
+
+          get slots() {
+            return {
+              ...super.slots,
+              'my-root-switcher-node': () => ({
+                template: this.isSwitched
+                  ? html`<div id="is-switched"></div>`
+                  : html`<span id="is-not-switched"> </span> `,
+                renderAsDirectHostChild: true,
+              }),
+            };
+          }
+
+          render() {
+            return html`<slot name="my-root-switcher-node"></slot>`;
+          }
+
+          get _myRootSwitcherNode() {
+            return /** @type HTMLSpanElement */ (
+              Array.from(this.children).find(elm => elm.slot === 'my-root-switcher-node')
+            );
+          }
+        },
+      );
+      const el = /** @type {* & SlotHost} */ (await fixture(`<${tagName}></${tagName}>`));
+
+      expect(el._myRootSwitcherNode.id).to.equal('is-not-switched');
+      expect(el.innerHTML).to.equal(
+        `<!--_start_slot_my-root-switcher-node_--><!----><span id="is-not-switched" slot="my-root-switcher-node"> </span> <!--_end_slot_my-root-switcher-node_-->`,
+      );
+
+      el.isSwitched = true;
+      await el.updateComplete;
+
+      expect(el._myRootSwitcherNode.id).to.equal('is-switched');
+      expect(el.innerHTML).to.equal(
+        `<!--_start_slot_my-root-switcher-node_--><!----><div id="is-switched" slot="my-root-switcher-node"></div><!--_end_slot_my-root-switcher-node_-->`,
+      );
+    });
+
     describe('firstRenderOnConnected (for backwards compatibility)', () => {
       it('does render on connected when firstRenderOnConnected:true', async () => {
         // Start with elem that does not render on connectedCallback

package/components/dialog/src/LionDialog.js

@@ -2,6 +2,18 @@ import { html, LitElement } from 'lit';
 import { OverlayMixin, withModalDialogConfig } from '@lion/ui/overlays.js';
 
 export class LionDialog extends OverlayMixin(LitElement) {
+  /** @type {any} */
+  static get properties() {
+    return {
+      isAlertDialog: { type: Boolean, attribute: 'is-alert-dialog' },
+    };
+  }
+
+  constructor() {
+    super();
+    this.isAlertDialog = false;
+  }
+
   /**
    * @protected
    */
@@ -9,6 +21,7 @@ export class LionDialog extends OverlayMixin(LitElement) {
   _defineOverlayConfig() {
     return {
       ...withModalDialogConfig(),
+      isAlertDialog: this.isAlertDialog,
     };
   }
 

package/components/dialog/test/lion-dialog.test.js

@@ -170,6 +170,27 @@ describe('lion-dialog', () => {
   });
 
   describe('Accessibility', () => {
+    it('passes a11y audit', async () => {
+      const el = await fixture(html`
+        <lion-dialog>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      await expect(el).to.be.accessible();
+    });
+
+    it('passes a11y audit when opened', async () => {
+      const el = await fixture(html`
+        <lion-dialog opened>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+    });
+
     it('does not add [aria-expanded] to invoker button', async () => {
       const el = await fixture(
         html` <lion-dialog>
@@ -187,6 +208,41 @@ describe('lion-dialog', () => {
       await aTimeout(0);
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
     });
+
+    it('has role="dialog" by default', async () => {
+      const el = await fixture(
+        html` <lion-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
+
+      expect(contentNode.getAttribute('role')).to.equal('dialog');
+    });
+
+    it('has role="alertdialog" by when "is-alert-dialog" is set', async () => {
+      const el = await fixture(
+        html` <lion-dialog is-alert-dialog>
+          <div slot="content" class="dialog">Hey there</div>
+          <button slot="invoker">Popup button</button>
+        </lion-dialog>`,
+      );
+      const contentNode = /** @type {HTMLElement} */ (el.querySelector('[slot="content"]'));
+
+      expect(contentNode.getAttribute('role')).to.equal('alertdialog');
+    });
+
+    it('passes a11y audit when opened and role="alertdialog"', async () => {
+      const el = await fixture(html`
+        <lion-dialog opened is-alert-dialog>
+          <button slot="invoker">Invoker</button>
+          <div slot="content" class="dialog" aria-label="Dialog">Hey there</div>
+        </lion-dialog>
+      `);
+      // error expected since we put role="none" on the dialog itself, which is valid but not recognized by Axe
+      await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
+    });
   });
 
   describe('Edge cases', () => {

package/components/form-core/src/choice-group/ChoiceInputMixin.js

@@ -171,7 +171,9 @@ const ChoiceInputMixinImplementation = superclass =>
     render() {
       return html`
         <slot name="input"></slot>
-        <div class="choice-field__graphic-container">${this._choiceGraphicTemplate()}</div>
+        <div class="choice-field__graphic-container" aria-hidden="true">
+          ${this._choiceGraphicTemplate()}
+        </div>
         <div class="choice-field__label">
           <slot name="label"></slot>
         </div>

package/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -181,7 +181,7 @@ export class LionInputTelDropdown extends LionInputTel {
 
         return {
           template: templates.dropdown(this._templateDataDropdown),
-          renderAsDirectHostChild: Boolean,
+          renderAsDirectHostChild: true,
         };
       },
     };

package/components/overlays/src/OverlayController.js

@@ -151,6 +151,7 @@ export class OverlayController extends EventTarget {
       hidesOnOutsideEsc: false,
       hidesOnOutsideClick: false,
       isTooltip: false,
+      isAlertDialog: false,
       invokerRelation: 'description',
       visibilityTriggerFunction: undefined,
       handlesAccessibility: false,
@@ -381,6 +382,14 @@ export class OverlayController extends EventTarget {
     return /** @type {boolean} */ (this.config?.isTooltip);
   }
 
+  /**
+   * The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow
+   * to communicate an important message and require a response.
+   */
+  get isAlertDialog() {
+    return /** @type {boolean} */ (this.config?.isAlertDialog);
+  }
+
   /**
    * By default, the tooltip content is a 'description' for the invoker (uses aria-describedby).
    * Setting this property to 'label' makes the content function as a label (via aria-labelledby)
@@ -611,6 +620,10 @@ export class OverlayController extends EventTarget {
     });
     // @ts-ignore
     wrappingDialogElement.open = true;
+    if (this.isTooltip) {
+      // needed to prevent tooltip getting focus in Safari and Firefox
+      wrappingDialogElement.setAttribute('tabindex', '-1');
+    }
 
     this.__wrappingDialogNode.style.display = 'none';
     this.contentWrapperNode.style.zIndex = '1';
@@ -672,7 +685,10 @@ export class OverlayController extends EventTarget {
         if (this.invokerNode && !isModal) {
           this.invokerNode.setAttribute('aria-expanded', `${this.isShown}`);
         }
-        if (!this.contentNode.getAttribute('role')) {
+        if (this.isAlertDialog) {
+          this.contentNode.setAttribute('role', 'alertdialog');
+        } else if (!this.contentNode.getAttribute('role')) {
+          // N.B. if we did not explicitly set `isTooltip` or `isAlertDialog`, a role potentially already provided by a user (like 'listbox') takes precedence
           this.contentNode.setAttribute('role', 'dialog');
         }
       }

package/components/overlays/test/OverlayController.test.js

@@ -1876,6 +1876,22 @@ describe('OverlayController', () => {
     it.skip('adds attributes inert and aria-hidden="true" on all siblings of rootNode if an overlay is shown', async () => {});
     it.skip('disables pointer events and selection on inert elements', async () => {});
 
+    describe('Alert dialog', () => {
+      it('sets role="alertdialog" when isAlertDialog is set', async () => {
+        const invokerNode = /** @type {HTMLElement} */ (
+          await fixture('<div role="button">invoker</div>')
+        );
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          handlesAccessibility: true,
+          isAlertDialog: true,
+          invokerNode,
+        });
+
+        expect(ctrl.contentNode?.getAttribute('role')).to.equal('alertdialog');
+      });
+    });
+
     describe('Tooltip', () => {
       it('adds [aria-describedby] on invoker', async () => {
         const invokerNode = /** @type {HTMLElement} */ (
@@ -1922,6 +1938,19 @@ describe('OverlayController', () => {
         expect(ctrl.contentNode.getAttribute('role')).to.equal('tooltip');
       });
 
+      it('adds tabindex="-1" to the wrappingDialog element', async () => {
+        const invokerNode = /** @type {HTMLElement} */ (
+          await fixture('<div role="button">invoker</div>')
+        );
+        const ctrl = new OverlayController({
+          ...withLocalTestConfig(),
+          handlesAccessibility: true,
+          isTooltip: true,
+          invokerNode,
+        });
+        expect(ctrl.__wrappingDialogNode?.getAttribute('tabindex')).to.equal('-1');
+      });
+
       describe('Teardown', () => {
         it('restores [role] on dialog content', async () => {
           const invokerNode = /** @type {HTMLElement} */ (

package/components/overlays/types/OverlayConfig.ts

@@ -41,7 +41,7 @@ export interface OverlayConfig {
   contentNode?: HTMLElement;
   /** The wrapper element of contentNode, used to supply inline positioning styles. When a Popper arrow is needed, it acts as parent of the arrow node. Will be automatically created for global and non projected contentNodes. Required when used in shadow dom mode or when Popper arrow is supplied. Essential for allowing webcomponents to style their projected contentNodes */
   contentWrapperNode?: HTMLElement;
-  /** The element that is placed behin the contentNode. When not provided and `hasBackdrop` is true, a backdropNode will be automatically created */
+  /** The element that is placed behind the contentNode. When not provided and `hasBackdrop` is true, a backdropNode will be automatically created */
   backdropNode?: HTMLElement;
   /** The element that should be called `.focus()` on after dialog closes */
   elementToFocusAfterHide?: HTMLElement;
@@ -59,7 +59,7 @@ export interface OverlayConfig {
   trapsKeyboardFocus?: boolean;
   /** Hides the overlay when pressing [ esc ] */
   hidesOnEsc?: boolean;
-  /** Hides the overlay when clicking next to it, exluding invoker */
+  /** Hides the overlay when clicking next to it, excluding invoker */
   hidesOnOutsideClick?: boolean;
   /** Hides the overlay when pressing esc, even when contentNode has no focus */
   hidesOnOutsideEsc?: boolean;
@@ -82,6 +82,8 @@ export interface OverlayConfig {
 
   /** Has a totally different interaction- and accessibility pattern from all other overlays. Will behave as role="tooltip" element instead of a role="dialog" element */
   isTooltip?: boolean;
+  /** The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response. */
+  isAlertDialog?: boolean;
   /** By default, the tooltip content is a 'description' for the invoker (uses aria-describedby) Setting this property to 'label' makes the content function as a label (via aria-labelledby) */
   invokerRelation?: 'label' | 'description';