@vaadin/notification 24.5.0-rc2 → 24.6.0-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/notification",
-  "version": "24.5.0-rc2",
+  "version": "24.6.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -38,16 +38,16 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "24.5.0-rc2",
-    "@vaadin/lit-renderer": "24.5.0-rc2",
-    "@vaadin/vaadin-lumo-styles": "24.5.0-rc2",
-    "@vaadin/vaadin-material-styles": "24.5.0-rc2",
-    "@vaadin/vaadin-themable-mixin": "24.5.0-rc2",
+    "@vaadin/component-base": "24.6.0-alpha2",
+    "@vaadin/lit-renderer": "24.6.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "24.6.0-alpha2",
+    "@vaadin/vaadin-material-styles": "24.6.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "24.6.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/button": "24.5.0-rc2",
-    "@vaadin/chai-plugins": "24.5.0-rc2",
+    "@vaadin/button": "24.6.0-alpha2",
+    "@vaadin/chai-plugins": "24.6.0-alpha2",
     "@vaadin/testing-helpers": "^1.0.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "be5bf40aec33761c6defdb5b3093c7b6dd5d97fd"
+  "gitHead": "21fa9ea077a04949a90d00934bfefe3e346bd129"
 }

package/src/vaadin-notification.d.ts

@@ -40,6 +40,7 @@ export interface NotificationCustomEventMap {
 export interface NotificationEventMap extends HTMLElementEventMap, NotificationCustomEventMap {}
 
 export interface ShowOptions {
+  assertive?: boolean;
   duration?: number;
   position?: NotificationPosition;
   theme?: string;
@@ -116,6 +117,7 @@ declare class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementM
    *
    * ```
    * {
+   *   assertive?: boolean
    *   position?: string
    *   duration?: number
    *   theme?: string
@@ -123,6 +125,7 @@ declare class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementM
    * ```
    *
    * See the individual documentation for:
+   * - [`assertive`](#/elements/vaadin-notification#property-assertive)
    * - [`position`](#/elements/vaadin-notification#property-position)
    * - [`duration`](#/elements/vaadin-notification#property-duration)
    *
@@ -131,6 +134,13 @@ declare class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementM
    */
   static show(contents: TemplateResult | string, options?: ShowOptions): Notification;
 
+  /**
+   * When true, the notification card has `aria-live` attribute set to
+   * `assertive` instead of `polite`. This makes screen readers announce
+   * the notification content immediately when it appears.
+   */
+  assertive: boolean;
+
   /**
    * The duration in milliseconds to show the notification.
    * Set to `0` or a negative number to disable the notification auto-closing.

package/src/vaadin-notification.js

@@ -208,7 +208,6 @@ class NotificationCard extends ThemableMixin(PolymerElement) {
   ready() {
     super.ready();
     this.setAttribute('role', 'alert');
-    this.setAttribute('aria-live', 'polite');
   }
 }
 
@@ -273,7 +272,10 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
           display: none !important;
         }
       </style>
-      <vaadin-notification-card theme$="[[_theme]]"> </vaadin-notification-card>
+      <vaadin-notification-card
+        theme$="[[_theme]]"
+        aria-live$="[[__computeAriaLive(assertive)]]"
+      ></vaadin-notification-card>
     `;
   }
 
@@ -283,6 +285,16 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
 
   static get properties() {
     return {
+      /**
+       * When true, the notification card has `aria-live` attribute set to
+       * `assertive` instead of `polite`. This makes screen readers announce
+       * the notification content immediately when it appears.
+       */
+      assertive: {
+        type: Boolean,
+        value: false,
+      },
+
       /**
        * The duration in milliseconds to show the notification.
        * Set to `0` or a negative number to disable the notification auto-closing.
@@ -340,6 +352,7 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
    *
    * ```
    * {
+   *   assertive?: boolean
    *   position?: string
    *   duration?: number
    *   theme?: string
@@ -347,6 +360,7 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
    * ```
    *
    * See the individual documentation for:
+   * - [`assertive`](#/elements/vaadin-notification#property-assertive)
    * - [`position`](#/elements/vaadin-notification#property-position)
    * - [`duration`](#/elements/vaadin-notification#property-duration)
    *
@@ -373,6 +387,9 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
     if (options && options.position) {
       notification.position = options.position;
     }
+    if (options && options.assertive) {
+      notification.assertive = options.assertive;
+    }
     if (options && options.theme) {
       notification.setAttribute('theme', options.theme);
     }
@@ -436,6 +453,11 @@ class Notification extends OverlayClassMixin(ThemePropertyMixin(ElementMixin(Pol
     this.renderer(this._card, this);
   }
 
+  /** @private */
+  __computeAriaLive(assertive) {
+    return assertive ? 'assertive' : 'polite';
+  }
+
   /** @private */
   _rendererChanged(renderer, opened, card) {
     if (!card) {

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "24.5.0-rc2",
+  "version": "24.6.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -21,6 +21,17 @@
                 ]
               }
             },
+            {
+              "name": "assertive",
+              "description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "duration",
               "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",
@@ -73,6 +84,17 @@
                   ]
                 }
               },
+              {
+                "name": "assertive",
+                "description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "duration",
                 "description": "The duration in milliseconds to show the notification.\nSet to `0` or a negative number to disable the notification auto-closing.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/notification",
-  "version": "24.5.0-rc2",
+  "version": "24.6.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,6 +19,13 @@
           "description": "`<vaadin-notification>` is a Web Component providing accessible and customizable notifications (toasts).\n\n### Rendering\n\nThe content of the notification can be populated by using the renderer callback function.\n\nThe renderer function provides `root`, `notification` arguments.\nGenerate DOM content, append it to the `root` element and control the state\nof the host element by accessing `notification`. Before generating new content,\nusers are able to check if there is already content in `root` for reusing it.\n\n```html\n<vaadin-notification id=\"notification\"></vaadin-notification>\n```\n```js\nconst notification = document.querySelector('#notification');\nnotification.renderer = function(root, notification) {\n  root.textContent = \"Your work has been saved\";\n};\n```\n\nRenderer is called on the opening of the notification.\nDOM generated during the renderer call can be reused\nin the next renderer call and will be provided with the `root` argument.\nOn first call it will be empty.\n\n### Styling\n\n`<vaadin-notification>` uses `<vaadin-notification-card>` internal\nthemable component as the actual visible notification cards.\n\nThe following shadow DOM parts of the `<vaadin-notification-card>` are available for styling:\n\nPart name | Description\n----------------|----------------\n`overlay` | The notification container\n`content` | The content of the notification\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nNote: the `theme` attribute value set on `<vaadin-notification>` is\npropagated to the internal `<vaadin-notification-card>`.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?assertive",
+              "description": "When true, the notification card has `aria-live` attribute set to\n`assertive` instead of `polite`. This makes screen readers announce\nthe notification content immediately when it appears.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "?opened",
               "description": "True if the notification is currently displayed.",