@primer/view-components 0.35.1 → 0.35.2-rc.4f8347c9

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

@@ -1,5 +1,7 @@
 import { IncludeFragmentElement } from '@github/include-fragment-element';
 import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
+import type { LiveRegionElement } from '@primer/live-region-element';
+import '@primer/live-region-element';
 import '@oddbird/popover-polyfill';
 type SelectVariant = 'none' | 'single' | 'multiple' | null;
 type SelectedItem = {
@@ -16,11 +18,11 @@ export declare class SelectPanelElement extends HTMLElement {
     filterInputTextField: HTMLInputElement;
     remoteInput: HTMLElement;
     list: HTMLElement;
-    ariaLiveContainer: HTMLElement;
     noResults: HTMLElement;
     fragmentErrorElement: HTMLElement;
     bannerErrorElement: HTMLElement;
     bodySpinner: HTMLElement;
+    liveRegion: LiveRegionElement;
     filterFn?: FilterFn;
     get open(): boolean;
     get selectVariant(): SelectVariant;

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

@@ -18,8 +18,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _SelectPanelElement_instances, _SelectPanelElement_dialogIntersectionObserver, _SelectPanelElement_abortController, _SelectPanelElement_originalLabel, _SelectPanelElement_inputName, _SelectPanelElement_selectedItems, _SelectPanelElement_loadingDelayTimeoutId, _SelectPanelElement_loadingAnnouncementTimeoutId, _SelectPanelElement_hasLoadedData, _SelectPanelElement_waitForCondition, _SelectPanelElement_softDisableItems, _SelectPanelElement_updateTabIndices, _SelectPanelElement_potentiallyDisallowActivation, _SelectPanelElement_isAnchorActivationViaSpace, _SelectPanelElement_isActivation, _SelectPanelElement_checkSelectedItems, _SelectPanelElement_addSelectedItem, _SelectPanelElement_removeSelectedItem, _SelectPanelElement_setTextFieldLoadingSpinnerTimer, _SelectPanelElement_handleIncludeFragmentEvent, _SelectPanelElement_toggleIncludeFragmentElements, _SelectPanelElement_handleRemoteInputEvent, _SelectPanelElement_defaultFilterFn, _SelectPanelElement_handleSearchFieldEvent, _SelectPanelElement_updateItemVisibility, _SelectPanelElement_inErrorState, _SelectPanelElement_setErrorState, _SelectPanelElement_clearErrorState, _SelectPanelElement_maybeAnnounce, _SelectPanelElement_fetchStrategy_get, _SelectPanelElement_filterInputTextFieldElement_get, _SelectPanelElement_performFilteringLocally, _SelectPanelElement_handleInvokerActivated, _SelectPanelElement_handleDialogItemActivated, _SelectPanelElement_handleItemActivated, _SelectPanelElement_setDynamicLabel, _SelectPanelElement_updateInput, _SelectPanelElement_firstItem_get, _SelectPanelElement_hideItem, _SelectPanelElement_showItem, _SelectPanelElement_getItemContent;
 import { getAnchoredPosition } from '@primer/behaviors';
 import { controller, target } from '@github/catalyst';
-import { announceFromElement, announce } from '../aria_live';
 import { IncludeFragmentElement } from '@github/include-fragment-element';
+import '@primer/live-region-element';
 import '@oddbird/popover-polyfill';
 const validSelectors = ['[role="option"]'];
 const menuItemSelectors = validSelectors.join(',');
@@ -525,7 +525,7 @@ _SelectPanelElement_setTextFieldLoadingSpinnerTimer = function _SelectPanelEleme
     if (__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"))
         clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"));
     __classPrivateFieldSet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, setTimeout(() => {
-        announce('Loading', { element: this.ariaLiveContainer });
+        this.liveRegion.announce('Loading');
     }, 2000), "f");
     __classPrivateFieldSet(this, _SelectPanelElement_loadingDelayTimeoutId, setTimeout(() => {
         __classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get)?.showLeadingSpinner();
@@ -551,7 +551,7 @@ _SelectPanelElement_handleIncludeFragmentEvent = function _SelectPanelElement_ha
             const errorElement = this.fragmentErrorElement;
             // check if the errorElement is visible in the dom
             if (errorElement && !errorElement.hasAttribute('hidden')) {
-                announceFromElement(errorElement, { element: this.ariaLiveContainer, assertive: true });
+                this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
                 return;
             }
             break;
@@ -738,7 +738,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
     }
     // check if the errorElement is visible in the dom
     if (errorElement && !errorElement.hasAttribute('hidden')) {
-        announceFromElement(errorElement, { element: this.ariaLiveContainer, assertive: true });
+        this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
         return;
     }
 };
@@ -748,17 +748,15 @@ _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorSta
 };
 _SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
     if (this.open && this.list) {
-        const items = this.items;
+        const items = this.visibleItems;
         if (items.length > 0) {
             const instructions = 'tab for results';
-            announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`, {
-                element: this.ariaLiveContainer,
-            });
+            this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`);
         }
         else {
             const noResultsEl = this.noResults;
             if (noResultsEl) {
-                announceFromElement(noResultsEl, { element: this.ariaLiveContainer });
+                this.liveRegion.announceFromElement(noResultsEl);
             }
         }
     }
@@ -976,9 +974,6 @@ __decorate([
 __decorate([
     target
 ], SelectPanelElement.prototype, "list", void 0);
-__decorate([
-    target
-], SelectPanelElement.prototype, "ariaLiveContainer", void 0);
 __decorate([
     target
 ], SelectPanelElement.prototype, "noResults", void 0);
@@ -991,6 +986,9 @@ __decorate([
 __decorate([
     target
 ], SelectPanelElement.prototype, "bodySpinner", void 0);
+__decorate([
+    target
+], SelectPanelElement.prototype, "liveRegion", void 0);
 SelectPanelElement = __decorate([
     controller
 ], SelectPanelElement);

package/app/components/primer/beta/popover.css

@@ -1 +1 @@
-.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24)}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
+.Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}:is(.Popover-message--top-right,.Popover-message--bottom-right):after{margin-right:1px;right:var(--base-size-20)}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24);margin-left:1px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px;margin-bottom:1px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after{bottom:var(--base-size-16);margin-bottom:1px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}

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

@@ -7,7 +7,6 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
-import './aria_live';
 import './shared_events';
 import './alpha/modal_dialog';
 import './beta/nav_list';

package/app/components/primer/primer.js

@@ -7,7 +7,6 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
-import './aria_live';
 import './shared_events';
 import './alpha/modal_dialog';
 import './beta/nav_list';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.35.1",
+  "version": "0.35.2-rc.4f8347c9",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -53,6 +53,7 @@
     "@github/relative-time-element": "^4.0.0",
     "@github/remote-input-element": "^0.4.0",
     "@github/tab-container-element": "^3.1.2",
+    "@primer/live-region-element": "^0.7.1",
     "@oddbird/popover-polyfill": "^0.4.0",
     "@primer/behaviors": "^1.3.4"
   },

package/app/assets/javascripts/components/primer/aria_live.d.ts

@@ -1,8 +0,0 @@
-export declare function announceFromElement(el: HTMLElement, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;
-export declare function announce(message: string, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;

package/app/components/primer/aria_live.d.ts

@@ -1,8 +0,0 @@
-export declare function announceFromElement(el: HTMLElement, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;
-export declare function announce(message: string, options?: {
-    assertive?: boolean;
-    element?: HTMLElement;
-}): void;

package/app/components/primer/aria_live.js

@@ -1,38 +0,0 @@
-const safeDocument = typeof document === 'undefined' ? undefined : document;
-// Announce an element's text to the screen reader.
-export function announceFromElement(el, options) {
-    announce(getTextContent(el), options);
-}
-// Announce message update to screen reader.
-// Note: Use caution when using this function while a dialog is active.
-// If the message is updated while the dialog is open, the screen reader may not announce the live region.
-export function announce(message, options) {
-    const { assertive, element } = options ?? {};
-    setContainerContent(message, assertive, element);
-}
-// Set aria-live container to message.
-function setContainerContent(message, assertive, element) {
-    const getQuerySelector = () => {
-        return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
-    };
-    const container = element ?? safeDocument?.querySelector(getQuerySelector());
-    if (!container)
-        return;
-    if (container.textContent === message) {
-        /* This is a hack due to the way the aria live API works.
-        A screen reader will not read a live region again
-        if the text is the same. Adding a space character tells
-        the browser that the live region has updated,
-        which will cause it to read again, but with no audible difference. */
-        container.textContent = `${message}\u00A0`;
-    }
-    else {
-        container.textContent = message;
-    }
-}
-// Gets the trimmed text content of an element.
-function getTextContent(el) {
-    // innerText does not contain hidden text
-    /* eslint-disable-next-line github/no-innerText */
-    return (el.getAttribute('aria-label') || el.innerText || '').trim();
-}