@reliability-design/web 1.4.5 → 1.4.6

package/dist/components/rel-segmented-button/rel-segmented-button.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 export type SegmentSize = "small" | "medium";
@@ -20,6 +20,9 @@ export class RelSegmentedButton extends LitElement {
 
   @property({ type: String }) align: SegmentAlign = "left";
 
+  /** Accessible name for the radiogroup (it renders no visible group label). */
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+
   static styles = css`
     :host {
       color: var(--rel-text-default);
@@ -204,6 +207,7 @@ export class RelSegmentedButton extends LitElement {
       <div
         part="base" class="${containerClasses}"
         role="radiogroup"
+        aria-label="${this.fieldAriaLabel ?? nothing}"
         @keydown="${this.onKeyDown}"
       >
         ${this.options.map((option) => this.renderSegment(option, rovingValue))}

package/dist/components/rel-select/rel-select.ts

@@ -5,6 +5,7 @@ import "@reliability-design/icons/rel-icon";
 import "../rel-chip/rel-chip.js";
 import "../rel-checkbox/rel-checkbox.js";
 import type { FieldLabelStyle } from "../rel-textfield/rel-textfield.js";
+import { announce } from "../../utils/announce";
 
 export type SelectState = "default" | "error" | "disabled";
 export type SelectSize = "small" | "medium" | "large";
@@ -731,13 +732,15 @@ export class RelSelect extends LitElement {
   }
 
   private addGlobalListeners() {
-    document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    // Capture phase so a pointerdown that another component stops in its own
+    // capture listener (e.g. a rel-popover trigger) still closes this listbox.
+    document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.addEventListener("resize", this.updatePosition);
     window.addEventListener("scroll", this.onPageScroll, true);
   }
 
   private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.onPageScroll, true);
   }
@@ -882,6 +885,7 @@ export class RelSelect extends LitElement {
       idx >= 0
         ? this.selectedValues.filter((v) => v !== option.value)
         : [...this.selectedValues, option.value];
+    announce(`${option.label} ${idx >= 0 ? "deselected" : "selected"}`);
     if (this.state === "error") this.state = "default";
     this.emitChange();
   }
@@ -896,6 +900,7 @@ export class RelSelect extends LitElement {
       const toAdd = filtered.map((o) => o.value).filter((v) => !this.selectedValues.includes(v));
       this.selectedValues = [...this.selectedValues, ...toAdd];
     }
+    announce(status === "checked" ? "All options deselected" : "All options selected");
     if (this.state === "error") this.state = "default";
     this.emitChange();
   }
@@ -903,6 +908,8 @@ export class RelSelect extends LitElement {
   private removeChip(value: string) {
     if (this.state === "disabled") return;
     this.selectedValues = this.selectedValues.filter((v) => v !== value);
+    const opt = this.normalizedOptions.find((o) => o.value === value);
+    announce(`${opt?.label ?? value} removed`);
     this.emitChange();
   }
 
@@ -941,8 +948,14 @@ export class RelSelect extends LitElement {
 
   private onSearchInput = (e: InputEvent) => {
     this.searchValue = (e.target as HTMLInputElement).value;
-    this.highlightedIndex = this.filteredOptions.length > 0 ? 0 : -1;
+    const count = this.filteredOptions.length;
+    this.highlightedIndex = count > 0 ? 0 : -1;
     this.selectAllHighlighted = false;
+    if (count === 0) {
+      announce(this.options.length === 0 ? "No options available" : "No matches found");
+    } else {
+      announce(`${count} option${count === 1 ? "" : "s"} available`);
+    }
     requestAnimationFrame(() => this.updatePosition());
   };
 
@@ -1186,6 +1199,17 @@ export class RelSelect extends LitElement {
 
     const selectedSingle = opts.find((o) => o.value === this.selected);
 
+    const baseName = accessibleName || this.placeholder;
+    let triggerLabel = baseName;
+    if (this.multiple && this.selectedValues.length > 0) {
+      const labels = this.selectedValues.map((v) => opts.find((o) => o.value === v)?.label ?? v);
+      const shown = labels.slice(0, 3);
+      const more = labels.length - shown.length;
+      triggerLabel = `${baseName}, ${shown.join(", ")}${more > 0 ? `, plus ${more} more` : ""}`;
+    } else if (!this.multiple && selectedSingle) {
+      triggerLabel = `${baseName}, ${selectedSingle.label}`;
+    }
+
     return html`
       <div class="${wrapperClasses}">
         ${labelHidden
@@ -1209,9 +1233,9 @@ export class RelSelect extends LitElement {
             aria-haspopup="listbox"
             aria-expanded="${this.open}"
             aria-controls="${listboxId}"
-            aria-activedescendant="${activeOptionId}"
+            aria-activedescendant="${this.noSearch ? activeOptionId : nothing}"
             aria-invalid="${this.state === "error"}"
-            aria-label="${this.fieldAriaLabelledby ? nothing : accessibleName || this.placeholder}"
+            aria-label="${this.fieldAriaLabelledby ? nothing : triggerLabel}"
             aria-labelledby="${this.fieldAriaLabelledby ?? nothing}"
             ?disabled="${isDisabled}"
             @click="${this.onTriggerClick}"
@@ -1271,6 +1295,11 @@ export class RelSelect extends LitElement {
                       <input
                         part="input" class="search-input"
                         type="text"
+                        role="combobox"
+                        aria-expanded="${this.open}"
+                        aria-controls="${listboxId}"
+                        aria-activedescendant="${activeOptionId}"
+                        aria-label="${accessibleName || this.placeholder}"
                         placeholder="${this.searchPlaceholder}"
                         .value="${this.searchValue}"
                         @input="${this.onSearchInput}"
@@ -1285,19 +1314,20 @@ export class RelSelect extends LitElement {
                     class="select-all-row ${this.selectAllHighlighted ? "highlighted" : ""}"
                     role="option"
                     aria-selected="${this.selectAllStatus === "checked"}"
+                    aria-label="${this.selectAllLabel}"
                     @pointerenter="${() => {
                       this.selectAllHighlighted = true;
                       this.highlightedIndex = -1;
                     }}"
                     @pointerleave="${() => (this.selectAllHighlighted = false)}"
+                    @mousedown="${(e: Event) => e.preventDefault()}"
+                    @click="${() => this.toggleSelectAll()}"
                   >
                     <rel-checkbox
+                      inert
+                      aria-hidden="true"
                       label="${this.selectAllLabel}"
                       status="${this.selectAllStatus}"
-                      @rel-change=${(e: Event) => {
-                        e.stopPropagation();
-                        this.toggleSelectAll();
-                      }}
                     ></rel-checkbox>
                   </div>`
                 : ""}
@@ -1320,20 +1350,21 @@ export class RelSelect extends LitElement {
                       class="checkbox-option ${index === this.highlightedIndex ? "highlighted" : ""}"
                       role="option"
                       aria-selected="${this.selectedValues.includes(option.value)}"
+                      aria-label="${option.label}"
                       @pointerenter="${() => {
                         this.highlightedIndex = index;
                         this.selectAllHighlighted = false;
                       }}"
+                      @mousedown="${(e: Event) => e.preventDefault()}"
+                      @click="${() => this.toggleMultiOption(option)}"
                     >
                       <rel-checkbox
+                        inert
+                        aria-hidden="true"
                         label="${option.label}"
                         icon="${option.icon}"
                         supportingtext="${option.supportingText}"
                         status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
-                        @rel-change=${(e: Event) => {
-                          e.stopPropagation();
-                          this.toggleMultiOption(option);
-                        }}
                       ></rel-checkbox>
                     </div>
                   `

package/dist/components/rel-sheet/rel-sheet.ts

@@ -1,9 +1,11 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import "../rel-progress/rel-progress.js";
 import { getDeepActiveElement, getFocusableElements, trapTabKey } from "../../utils/focus.js";
 
 export type ModalSide = "top" | "bottom" | "center";
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "fullscreen";
 
 @customElement("rel-modal")
 export class RelModal extends LitElement {
@@ -11,9 +13,37 @@ export class RelModal extends LitElement {
   @property({ type: String }) side: ModalSide = "bottom";
   @property({ type: String }) title = "";
   @property({ type: String }) description = "";
+  /** Alias for `description`; rendered only when `description` is empty. */
+  @property({ type: String }) subtitle = "";
   @property({ type: Boolean }) dismissible = true;
   @property({ type: Boolean }) modal = true;
 
+  /** Panel width scale. `md` matches the Figma Modal Sheet width; `fullscreen` covers the viewport. */
+  @property({ type: String, reflect: true }) size: ModalSize = "md";
+
+  /* Granular dismissal switches — each is ANDed with the legacy coarse
+     `dismissible` switch so existing `dismissible={false}` consumers keep
+     their fully-locked behavior. */
+  @property({ type: Boolean, attribute: "close-on-backdrop-click" }) closeOnBackdropClick = true;
+  @property({ type: Boolean, attribute: "close-on-escape" }) closeOnEscape = true;
+  @property({ type: Boolean, attribute: "show-close-button" }) showCloseButton = true;
+
+  /** Move focus into the panel when opened (modal mode only). */
+  @property({ type: Boolean, attribute: "auto-focus" }) autoFocus = true;
+  /** Return focus to the opener when closed. */
+  @property({ type: Boolean, attribute: "restore-focus" }) restoreFocus = true;
+
+  /** When false, the body no longer scrolls internally — tall content clips at the panel's max height. */
+  @property({ type: Boolean }) scrollable = true;
+
+  /** Shows a spinner overlay and blocks all interaction inside the panel. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+  /** Blocks user-initiated closes (X / backdrop / Escape) and footer actions. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Stacking order of the whole modal (backdrop + panel). */
+  @property({ type: Number, attribute: "z-index" }) zIndex = 1000;
+
   /**
    * Figma "Breakpoint" axis. responsive (default) collapses to a full-width
    * bottom sheet below 480px; web keeps the fixed desktop panel at every size.
@@ -86,16 +116,30 @@ export class RelModal extends LitElement {
       overflow: hidden;
       outline: none;
       font-family: var(--rel-fonts-font-family);
-      width: clamp(360px, 49vw, 708px);
+      /* md is the Figma Modal Sheet Breakpoint=Web width (708px cap). */
+      --modal-width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       left: 50%;
       transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
         opacity var(--modal-transition-duration) var(--modal-transition-timing);
     }
 
+    .panel[data-size="sm"] {
+      --modal-width: min(400px, calc(100vw - 32px));
+    }
+
+    .panel[data-size="lg"] {
+      --modal-width: min(900px, calc(100vw - 48px));
+    }
+
+    .panel[data-size="xl"] {
+      --modal-width: min(1140px, calc(100vw - 48px));
+    }
+
     .panel[data-side="bottom"] {
       bottom: 48px;
       left: 50%;
-      width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-border-radius-sm);
       transform: translateX(-50%) translateY(calc(100% + 48px));
@@ -108,7 +152,7 @@ export class RelModal extends LitElement {
     .panel[data-side="top"] {
       top: 48px;
       left: 50%;
-      width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-border-radius-sm);
       transform: translateX(-50%) translateY(calc(-100% - 48px));
@@ -121,7 +165,7 @@ export class RelModal extends LitElement {
     .panel[data-side="center"] {
       top: 50%;
       left: 50%;
-      width: clamp(360px, 49vw, 708px);
+      width: var(--modal-width);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-border-radius-sm);
       transform: translate(-50%, -50%) scale(0.96);
@@ -159,6 +203,50 @@ export class RelModal extends LitElement {
       }
     }
 
+    /* size="fullscreen" — edge-to-edge at every side value; declared after the
+       side and responsive-collapse rules so it wins their specificity ties. */
+    .panel[data-size="fullscreen"],
+    .panel[data-size="fullscreen"][data-side="top"],
+    .panel[data-size="fullscreen"][data-side="center"],
+    .panel[data-size="fullscreen"][data-side="bottom"] {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      max-height: none;
+      border-radius: 0;
+      transform: translateY(16px);
+      opacity: 0;
+    }
+
+    .modal-container.open .panel[data-size="fullscreen"],
+    .modal-container.open .panel[data-size="fullscreen"][data-side="top"],
+    .modal-container.open .panel[data-size="fullscreen"][data-side="center"],
+    .modal-container.open .panel[data-size="fullscreen"][data-side="bottom"] {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    @media (max-width: 480px) {
+      :host([breakpoint="responsive"]) .panel[data-size="fullscreen"] {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        max-height: none;
+        border-radius: 0;
+        transform: translateY(16px);
+      }
+
+      :host([breakpoint="responsive"]) .modal-container.open .panel[data-size="fullscreen"] {
+        transform: translateY(0);
+      }
+    }
+
     .header {
       display: flex;
       align-items: flex-start;
@@ -241,12 +329,51 @@ export class RelModal extends LitElement {
       outline-offset: 2px;
     }
 
+    .close-button:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .close-button:disabled:hover {
+      background: transparent;
+    }
+
     .content {
       flex: 1;
       overflow-y: auto;
       padding: var(--rel-spacing-xl);
     }
 
+    .content.no-scroll {
+      overflow-y: visible;
+    }
+
+    :host([disabled]) .footer {
+      opacity: 0.5;
+    }
+
+    .loading-overlay {
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Scrim as a pseudo-element so its opacity doesn't dull the spinner. */
+    .loading-overlay::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background: var(--rel-bg-surface);
+      opacity: 0.7;
+    }
+
+    .loading-overlay rel-progress {
+      position: relative;
+    }
+
     .footer {
       display: none;
     }
@@ -332,7 +459,7 @@ export class RelModal extends LitElement {
 
     // Move focus into the dialog — before this, a keyboard user had to Tab
     // through the entire page behind the overlay to reach the sheet.
-    if (this.modal) {
+    if (this.modal && this.autoFocus) {
       this.updateComplete.then(() => {
         const panel = this.panelElement;
         if (!panel) return;
@@ -353,11 +480,13 @@ export class RelModal extends LitElement {
   private handleClose() {
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
-    if (this.previousFocus?.focus) {
+    if (this.restoreFocus && this.previousFocus?.focus) {
       this.updateComplete.then(() => {
         this.previousFocus?.focus();
         this.previousFocus = null;
       });
+    } else {
+      this.previousFocus = null;
     }
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
@@ -387,7 +516,7 @@ export class RelModal extends LitElement {
 
   private handleKeydown = (e: KeyboardEvent) => {
     if (!this.open) return;
-    if (e.key === "Escape" && this.dismissible) {
+    if (e.key === "Escape" && this.dismissible && this.closeOnEscape && !this.disabled) {
       e.preventDefault();
       this.open = false;
       return;
@@ -399,23 +528,26 @@ export class RelModal extends LitElement {
   };
 
   private handleOverlayClick = (e: MouseEvent) => {
-    if (!this.dismissible) return;
+    if (!this.dismissible || !this.closeOnBackdropClick || this.disabled || this.loading) return;
     if (e.target === this.overlayElement) {
       this.open = false;
     }
   };
 
   private handleCloseButtonClick() {
+    if (this.disabled || this.loading) return;
     this.open = false;
   }
 
   render() {
     const hasTitle = !!this.title;
-    const hasDescription = !!this.description;
-    const showHeader = hasTitle || hasDescription || this.dismissible;
+    const effectiveDescription = this.description || this.subtitle;
+    const hasDescription = !!effectiveDescription;
+    const showCloseX = this.dismissible && this.showCloseButton;
+    const showHeader = hasTitle || hasDescription || showCloseX;
 
     return html`
-      <div class="modal-container ${this.open ? "open" : ""}">
+      <div class="modal-container ${this.open ? "open" : ""}" style="z-index: ${this.zIndex}">
         <div
           part="overlay"
           class="overlay ${!this.modal ? 'no-modal' : ''}"
@@ -425,19 +557,26 @@ export class RelModal extends LitElement {
           part="panel"
           class="panel"
           data-side="${this.side}"
+          data-size="${this.size}"
           role="${this.modal ? "dialog" : "region"}"
           aria-modal="${this.modal}"
+          aria-busy="${this.loading ? "true" : nothing}"
+          aria-labelledby="${hasTitle ? "modal-title" : nothing}"
+          aria-describedby="${hasDescription ? "modal-description" : nothing}"
+          aria-label="${hasTitle ? nothing : "Dialog"}"
           tabindex="-1">
 
-          <div part="header" class="header ${!showHeader ? "empty" : ""}">
+          <div part="header" class="header ${!showHeader ? "empty" : ""}" ?inert=${this.loading}>
             <div class="header-text">
-              ${hasTitle ? html`<h2 class="title">${this.title}</h2>` : ""}
-              ${hasDescription ? html`<p class="description">${this.description}</p>` : ""}
+              ${hasTitle ? html`<h2 class="title" id="modal-title">${this.title}</h2>` : ""}
+              ${hasDescription ? html`<p class="description" id="modal-description">${effectiveDescription}</p>` : ""}
+              <slot name="header"></slot>
             </div>
-            ${this.dismissible
+            ${showCloseX
               ? html`<button
                   part="close-button"
                   class="close-button"
+                  ?disabled=${this.disabled}
                   @click="${this.handleCloseButtonClick}"
                   aria-label="Close">
                   <rel-icon name="close" size="sm"></rel-icon>
@@ -445,13 +584,19 @@ export class RelModal extends LitElement {
               : ""}
           </div>
 
-          <div part="content" class="content">
+          <div part="content" class="content ${this.scrollable ? "" : "no-scroll"}" ?inert=${this.loading}>
             <slot></slot>
           </div>
 
-          <div part="footer" class="footer">
+          <div part="footer" class="footer" ?inert=${this.loading || this.disabled}>
             <slot name="footer"></slot>
           </div>
+
+          ${this.loading
+            ? html`<div part="loading" class="loading-overlay">
+                <rel-progress mode="circular-indeterminate" label="Loading"></rel-progress>
+              </div>`
+            : ""}
         </div>
       </div>
     `;

package/dist/components/rel-sidebar/rel-sidebar.ts

@@ -670,6 +670,7 @@ export class RelSidebar extends LitElement {
           data-side="${this.side}"
           style="--sidebar-width: ${this.getWidthValue()}"
           role="navigation"
+          aria-label="Sidebar"
           aria-hidden="${isOffcanvas && !this.isOpen}"
           tabindex="-1"
         >
@@ -778,11 +779,16 @@ export class RelSidebarTrigger extends LitElement {
   };
 
   render() {
+    const p = this.provider;
+    const expanded =
+      p && !p.isMobile && p.collapsible === "icon"
+        ? !this.isCollapsed
+        : this.isOpen;
     return html`
       <button
         @click="${this.handleClick}"
         type="button"
-        aria-expanded="${this.isOpen}"
+        aria-expanded="${expanded}"
         aria-label="Toggle sidebar"
       >
         <slot>

package/dist/components/rel-skeleton/rel-skeleton.ts

@@ -16,6 +16,15 @@ export class RelSkeleton extends LitElement {
   protected override updated(changed: Map<string, unknown>) {
     if (changed.has("width") && this.width) this.style.width = this.width;
     if (changed.has("height") && this.height) this.style.height = this.height;
+    if (changed.has("loaded")) {
+      if (this.loaded) {
+        this.removeAttribute("role");
+        this.removeAttribute("aria-label");
+      } else {
+        this.setAttribute("role", "status");
+        this.setAttribute("aria-label", "Loading");
+      }
+    }
   }
 
   static styles = css`

package/dist/components/rel-slider/rel-slider.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 /**
@@ -34,6 +34,8 @@ export class RelSlider extends LitElement {
   /** Upper value when type="range" (attribute value-end). */
   @property({ type: Number, attribute: "value-end" }) valueEnd: number = 100;
 
+  @property({ type: String, attribute: "field-aria-label" }) fieldAriaLabel?: string;
+
   @state() private ticks: number[] = [];
 
   private _onChange: (value: number) => void = () => {};
@@ -619,7 +621,7 @@ export class RelSlider extends LitElement {
           <input
             class="slider-input"
             type="range"
-            aria-label="Range start"
+            aria-label="${this.fieldAriaLabel ? `${this.fieldAriaLabel} minimum` : "Minimum value"}"
             .min="${String(this.min)}"
             .max="${String(this.max)}"
             .step="${String(this.step)}"
@@ -630,7 +632,7 @@ export class RelSlider extends LitElement {
           <input
             class="slider-input"
             type="range"
-            aria-label="Range end"
+            aria-label="${this.fieldAriaLabel ? `${this.fieldAriaLabel} maximum` : "Maximum value"}"
             .min="${String(this.min)}"
             .max="${String(this.max)}"
             .step="${String(this.step)}"
@@ -653,6 +655,7 @@ export class RelSlider extends LitElement {
         <input
           class="slider-input"
           type="range"
+          aria-label="${this.fieldAriaLabel || nothing}"
           .min="${String(this.min)}"
           .max="${String(this.max)}"
           .step="${this.type === 'discrete' ? String(this.step) : '1'}"

package/dist/components/rel-snackbar/rel-snackbar.ts

@@ -1,6 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
+import { announce } from "../../utils/announce";
 
 export type SnackbarLines = "single" | "double";
 export type SnackbarType = "default" | "success" | "error" | "warning";
@@ -100,19 +101,19 @@ export class RelSnackbar extends LitElement {
       min-width: 0;
     }
 
-    .snackbar-message {
+    .snackbar-message {
       margin-right: var(--rel-spacing-sm);
-      flex: 1;
+      flex: 1;
 
-      font-family: var(--rel-body-md-regular-font-family);
+      font-family: var(--rel-body-md-regular-font-family);
 
-      font-weight: var(--rel-body-md-regular-font-weight);
+      font-weight: var(--rel-body-md-regular-font-weight);
 
-      font-size: var(--rel-body-md-regular-font-size);
+      font-size: var(--rel-body-md-regular-font-size);
 
-      line-height: var(--rel-body-md-regular-line-height);
+      line-height: var(--rel-body-md-regular-line-height);
 
-      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
 
     }
 
@@ -137,17 +138,17 @@ export class RelSnackbar extends LitElement {
     .snackbar-action {
       background: none;
       border: none;
-      color: var(--rel-text-static-light);
+      color: var(--rel-text-static-light);
       cursor: pointer;
       padding: 0;
       display: flex;
       align-items: center;
-      transition: opacity 0.2s ease;
-      font-family: var(--rel-action-md-font-family);
-      font-weight: var(--rel-action-md-font-weight);
-      font-size: var(--rel-action-md-font-size);
-      line-height: var(--rel-action-md-line-height);
-      letter-spacing: var(--rel-action-md-letter-spacing);
+      transition: opacity 0.2s ease;
+      font-family: var(--rel-action-md-font-family);
+      font-weight: var(--rel-action-md-font-weight);
+      font-size: var(--rel-action-md-font-size);
+      line-height: var(--rel-action-md-line-height);
+      letter-spacing: var(--rel-action-md-letter-spacing);
     }
 
     .snackbar-action:hover {
@@ -232,6 +233,9 @@ export class RelSnackbar extends LitElement {
     if ((changed.has("duration") || changed.has("longerAction")) && this.show) {
       this.setAutoDismiss();
     }
+    if ((changed.has("show") || changed.has("message")) && this.show) {
+      announce(this.message, this.type === "error" ? "assertive" : "polite");
+    }
   }
 
   disconnectedCallback() {
@@ -297,7 +301,7 @@ export class RelSnackbar extends LitElement {
       .join(" ");
 
     return html`
-      <div class="${snackbarClasses}">
+      <div class="${snackbarClasses}" role="${this.type === "error" ? "alert" : "status"}">
         <div class="snackbar-body">
           ${this.type !== "default" ? this.renderIcon() : ""}
           <div part="label" class="snackbar-message">${this.message}</div>
@@ -313,7 +317,7 @@ export class RelSnackbar extends LitElement {
             : ""}
           ${this.iconClose
             ? html`
-                <button part="close-button" class="snackbar-close" @click="${this.dismiss}">
+                <button part="close-button" class="snackbar-close" @click="${this.dismiss}" aria-label="Close">
                   <rel-icon name="close" size="md"></rel-icon>
                 </button>
               `