@primer/view-components 0.32.1-rc.afd2e09b → 0.33.0-rc.1d71dea1

package/app/components/primer/alpha/x_banner.d.ts

@@ -1,3 +1,8 @@
+declare global {
+    interface HTMLElementEventMap {
+        'banner:dismiss': CustomEvent<void>;
+    }
+}
 declare class XBannerElement extends HTMLElement {
     #private;
     titleText: HTMLElement;

package/app/components/primer/alpha/x_banner.js

@@ -17,15 +17,16 @@ let XBannerElement = class XBannerElement extends HTMLElement {
         _XBannerElement_instances.add(this);
     }
     dismiss() {
-        const parentElement = this.parentElement;
-        if (!parentElement)
-            return;
         if (__classPrivateFieldGet(this, _XBannerElement_instances, "a", _XBannerElement_dismissScheme_get) === 'remove') {
+            const parentElement = this.parentElement;
+            if (!parentElement)
+                return;
             parentElement.removeChild(this);
         }
         else {
             this.hide();
         }
+        this.dispatchEvent(new CustomEvent('banner:dismiss'));
     }
     show() {
         this.style.setProperty('display', 'initial');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.32.1-rc.afd2e09b",
+  "version": "0.33.0-rc.1d71dea1",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -2425,7 +2425,7 @@
   },
   {
     "fully_qualified_name": "Primer::Alpha::Banner",
-    "description": "Use `Banner` to highlight important information.",
+    "description": "Use `Banner` to highlight important information.\n\n### Events\n\n|Name      |Type                |Bubbles |Cancelable |\n|:---------|:-------------------|:-------|:----------|\n|`dismiss` |`CustomEvent<void>` |No      |No         |",
     "accessibility_docs": "### Improve discoverability with a heading and landmark\nBanners are made visually prominent with icons and colors to immediately draw attention.\n\nTo ensure the Banner is also easily discoverable for assistive technology users, consider:\n1. Providing a heading inside of the Banner that describes the purpose of the Banner.\n2. Designating the Banner as a `region` landmark. This can be achieved by rendering the Banner as a `section`  with an `aria-labelledby` pointing to the heading.\n\n### Communicating feedback\nWhen a Banner is used to communicate feedback, a live region or focus management technique should be in place to ensure that assistive technology users are aware of the feedback, especially when the Banner is shown client-side. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility), or defer to the accessibility team.\n\n#### Approach 1: Announcing a Banner\nA live region announcement can be used to communicate non-critical feedback, such as a success message.\n\nTo successfully trigger a live region announcement for a Banner that is un-`hidden` or dynamically injected onto the page, **do not** set the live region attribute/role on the Banner itself. Instead, it's important to rely on a live region that is already guaranteed to be on the page. Learn more about specific techniques at: [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region).\n\n#### Approach 2: Focusing a Banner\nFocusing the Banner can be appropriate for critical feedback scenarios, such as a [form validation error summary](https://primer.style/ui-patterns/forms/overview#interactive-summary-of-errors) where the Banner contains actions to help unblock the user.\n\nTo properly focus a Banner, add a `tabindex=\"-1\"` place focus with JavaScript (using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).",
     "is_form_component": false,
     "is_published": true,