primer_view_components 0.35.1 → 0.35.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/app/assets/javascripts/components/primer/alpha/select_panel_element.d.ts +3 -1
- data/app/assets/javascripts/components/primer/primer.d.ts +0 -1
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/item.rb +1 -1
- data/app/components/primer/alpha/select_panel.html.erb +1 -1
- data/app/components/primer/alpha/select_panel_element.d.ts +3 -1
- data/app/components/primer/alpha/select_panel_element.js +10 -12
- data/app/components/primer/alpha/select_panel_element.ts +9 -10
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +4 -0
- data/app/components/primer/primer.d.ts +0 -1
- data/app/components/primer/primer.js +0 -1
- data/app/components/primer/primer.ts +0 -1
- data/lib/primer/view_components/version.rb +1 -1
- metadata +2 -6
- data/app/assets/javascripts/components/primer/aria_live.d.ts +0 -8
- data/app/components/primer/aria_live.d.ts +0 -8
- data/app/components/primer/aria_live.js +0 -38
- data/app/components/primer/aria_live.ts +0 -41
|
@@ -302,7 +302,7 @@ module Primer
|
|
|
302
302
|
if @list.allows_selection?
|
|
303
303
|
@content_arguments[:aria] = merge_aria(
|
|
304
304
|
@content_arguments,
|
|
305
|
-
{ aria: @list.aria_selection_variant == :selected ? {selected: active?} : { checked: active? } }
|
|
305
|
+
{ aria: @list.aria_selection_variant == :selected ? { selected: active? } : { checked: active? } }
|
|
306
306
|
)
|
|
307
307
|
end
|
|
308
308
|
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
<% end %>
|
|
48
48
|
<%= render Primer::Alpha::Dialog::Body.new(mt: show_filter? ? 0 : 2, p: 0) do %>
|
|
49
49
|
<focus-group direction="vertical" mnemonics retain>
|
|
50
|
-
<
|
|
50
|
+
<live-region data-target="select-panel.liveRegion"></live-region>
|
|
51
51
|
<%= render(Primer::BaseComponent.new(
|
|
52
52
|
tag: :div,
|
|
53
53
|
data: {
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { IncludeFragmentElement } from '@github/include-fragment-element';
|
|
2
2
|
import type { AnchorAlignment, AnchorSide } from '@primer/behaviors';
|
|
3
|
+
import type { LiveRegionElement } from '@primer/live-region-element';
|
|
4
|
+
import '@primer/live-region-element';
|
|
3
5
|
import '@oddbird/popover-polyfill';
|
|
4
6
|
type SelectVariant = 'none' | 'single' | 'multiple' | null;
|
|
5
7
|
type SelectedItem = {
|
|
@@ -16,11 +18,11 @@ export declare class SelectPanelElement extends HTMLElement {
|
|
|
16
18
|
filterInputTextField: HTMLInputElement;
|
|
17
19
|
remoteInput: HTMLElement;
|
|
18
20
|
list: HTMLElement;
|
|
19
|
-
ariaLiveContainer: HTMLElement;
|
|
20
21
|
noResults: HTMLElement;
|
|
21
22
|
fragmentErrorElement: HTMLElement;
|
|
22
23
|
bannerErrorElement: HTMLElement;
|
|
23
24
|
bodySpinner: HTMLElement;
|
|
25
|
+
liveRegion: LiveRegionElement;
|
|
24
26
|
filterFn?: FilterFn;
|
|
25
27
|
get open(): boolean;
|
|
26
28
|
get selectVariant(): SelectVariant;
|
|
@@ -18,8 +18,8 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
|
|
|
18
18
|
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;
|
|
19
19
|
import { getAnchoredPosition } from '@primer/behaviors';
|
|
20
20
|
import { controller, target } from '@github/catalyst';
|
|
21
|
-
import { announceFromElement, announce } from '../aria_live';
|
|
22
21
|
import { IncludeFragmentElement } from '@github/include-fragment-element';
|
|
22
|
+
import '@primer/live-region-element';
|
|
23
23
|
import '@oddbird/popover-polyfill';
|
|
24
24
|
const validSelectors = ['[role="option"]'];
|
|
25
25
|
const menuItemSelectors = validSelectors.join(',');
|
|
@@ -525,7 +525,7 @@ _SelectPanelElement_setTextFieldLoadingSpinnerTimer = function _SelectPanelEleme
|
|
|
525
525
|
if (__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"))
|
|
526
526
|
clearTimeout(__classPrivateFieldGet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, "f"));
|
|
527
527
|
__classPrivateFieldSet(this, _SelectPanelElement_loadingAnnouncementTimeoutId, setTimeout(() => {
|
|
528
|
-
announce('Loading'
|
|
528
|
+
this.liveRegion.announce('Loading');
|
|
529
529
|
}, 2000), "f");
|
|
530
530
|
__classPrivateFieldSet(this, _SelectPanelElement_loadingDelayTimeoutId, setTimeout(() => {
|
|
531
531
|
__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_filterInputTextFieldElement_get)?.showLeadingSpinner();
|
|
@@ -551,7 +551,7 @@ _SelectPanelElement_handleIncludeFragmentEvent = function _SelectPanelElement_ha
|
|
|
551
551
|
const errorElement = this.fragmentErrorElement;
|
|
552
552
|
// check if the errorElement is visible in the dom
|
|
553
553
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
554
|
-
announceFromElement(errorElement, {
|
|
554
|
+
this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
|
|
555
555
|
return;
|
|
556
556
|
}
|
|
557
557
|
break;
|
|
@@ -738,7 +738,7 @@ _SelectPanelElement_setErrorState = function _SelectPanelElement_setErrorState(t
|
|
|
738
738
|
}
|
|
739
739
|
// check if the errorElement is visible in the dom
|
|
740
740
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
741
|
-
announceFromElement(errorElement, {
|
|
741
|
+
this.liveRegion.announceFromElement(errorElement, { politeness: 'assertive' });
|
|
742
742
|
return;
|
|
743
743
|
}
|
|
744
744
|
};
|
|
@@ -748,17 +748,15 @@ _SelectPanelElement_clearErrorState = function _SelectPanelElement_clearErrorSta
|
|
|
748
748
|
};
|
|
749
749
|
_SelectPanelElement_maybeAnnounce = function _SelectPanelElement_maybeAnnounce() {
|
|
750
750
|
if (this.open && this.list) {
|
|
751
|
-
const items = this.
|
|
751
|
+
const items = this.visibleItems;
|
|
752
752
|
if (items.length > 0) {
|
|
753
753
|
const instructions = 'tab for results';
|
|
754
|
-
announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}
|
|
755
|
-
element: this.ariaLiveContainer,
|
|
756
|
-
});
|
|
754
|
+
this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`);
|
|
757
755
|
}
|
|
758
756
|
else {
|
|
759
757
|
const noResultsEl = this.noResults;
|
|
760
758
|
if (noResultsEl) {
|
|
761
|
-
announceFromElement(noResultsEl
|
|
759
|
+
this.liveRegion.announceFromElement(noResultsEl);
|
|
762
760
|
}
|
|
763
761
|
}
|
|
764
762
|
}
|
|
@@ -976,9 +974,6 @@ __decorate([
|
|
|
976
974
|
__decorate([
|
|
977
975
|
target
|
|
978
976
|
], SelectPanelElement.prototype, "list", void 0);
|
|
979
|
-
__decorate([
|
|
980
|
-
target
|
|
981
|
-
], SelectPanelElement.prototype, "ariaLiveContainer", void 0);
|
|
982
977
|
__decorate([
|
|
983
978
|
target
|
|
984
979
|
], SelectPanelElement.prototype, "noResults", void 0);
|
|
@@ -991,6 +986,9 @@ __decorate([
|
|
|
991
986
|
__decorate([
|
|
992
987
|
target
|
|
993
988
|
], SelectPanelElement.prototype, "bodySpinner", void 0);
|
|
989
|
+
__decorate([
|
|
990
|
+
target
|
|
991
|
+
], SelectPanelElement.prototype, "liveRegion", void 0);
|
|
994
992
|
SelectPanelElement = __decorate([
|
|
995
993
|
controller
|
|
996
994
|
], SelectPanelElement);
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import {getAnchoredPosition} from '@primer/behaviors'
|
|
2
2
|
import {controller, target} from '@github/catalyst'
|
|
3
|
-
import {announceFromElement, announce} from '../aria_live'
|
|
4
3
|
import {IncludeFragmentElement} from '@github/include-fragment-element'
|
|
5
4
|
import type {PrimerTextFieldElement} from 'app/lib/primer/forms/primer_text_field'
|
|
6
5
|
import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
|
|
6
|
+
import type {LiveRegionElement} from '@primer/live-region-element'
|
|
7
|
+
import '@primer/live-region-element'
|
|
7
8
|
import '@oddbird/popover-polyfill'
|
|
8
9
|
|
|
9
10
|
type SelectVariant = 'none' | 'single' | 'multiple' | null
|
|
@@ -69,11 +70,11 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
69
70
|
@target filterInputTextField: HTMLInputElement
|
|
70
71
|
@target remoteInput: HTMLElement
|
|
71
72
|
@target list: HTMLElement
|
|
72
|
-
@target ariaLiveContainer: HTMLElement
|
|
73
73
|
@target noResults: HTMLElement
|
|
74
74
|
@target fragmentErrorElement: HTMLElement
|
|
75
75
|
@target bannerErrorElement: HTMLElement
|
|
76
76
|
@target bodySpinner: HTMLElement
|
|
77
|
+
@target liveRegion: LiveRegionElement
|
|
77
78
|
|
|
78
79
|
filterFn?: FilterFn
|
|
79
80
|
|
|
@@ -412,7 +413,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
412
413
|
if (this.#loadingAnnouncementTimeoutId) clearTimeout(this.#loadingAnnouncementTimeoutId)
|
|
413
414
|
|
|
414
415
|
this.#loadingAnnouncementTimeoutId = setTimeout(() => {
|
|
415
|
-
announce('Loading'
|
|
416
|
+
this.liveRegion.announce('Loading')
|
|
416
417
|
}, 2000) as unknown as number
|
|
417
418
|
|
|
418
419
|
this.#loadingDelayTimeoutId = setTimeout(() => {
|
|
@@ -564,7 +565,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
564
565
|
const errorElement = this.fragmentErrorElement
|
|
565
566
|
// check if the errorElement is visible in the dom
|
|
566
567
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
567
|
-
announceFromElement(errorElement, {
|
|
568
|
+
this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'})
|
|
568
569
|
return
|
|
569
570
|
}
|
|
570
571
|
|
|
@@ -766,7 +767,7 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
766
767
|
|
|
767
768
|
// check if the errorElement is visible in the dom
|
|
768
769
|
if (errorElement && !errorElement.hasAttribute('hidden')) {
|
|
769
|
-
announceFromElement(errorElement, {
|
|
770
|
+
this.liveRegion.announceFromElement(errorElement, {politeness: 'assertive'})
|
|
770
771
|
return
|
|
771
772
|
}
|
|
772
773
|
}
|
|
@@ -778,17 +779,15 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
778
779
|
|
|
779
780
|
#maybeAnnounce() {
|
|
780
781
|
if (this.open && this.list) {
|
|
781
|
-
const items = this.
|
|
782
|
+
const items = this.visibleItems
|
|
782
783
|
|
|
783
784
|
if (items.length > 0) {
|
|
784
785
|
const instructions = 'tab for results'
|
|
785
|
-
announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}
|
|
786
|
-
element: this.ariaLiveContainer,
|
|
787
|
-
})
|
|
786
|
+
this.liveRegion.announce(`${items.length} result${items.length === 1 ? '' : 's'} ${instructions}`)
|
|
788
787
|
} else {
|
|
789
788
|
const noResultsEl = this.noResults
|
|
790
789
|
if (noResultsEl) {
|
|
791
|
-
announceFromElement(noResultsEl
|
|
790
|
+
this.liveRegion.announceFromElement(noResultsEl)
|
|
792
791
|
}
|
|
793
792
|
}
|
|
794
793
|
}
|
|
@@ -1 +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):
|
|
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):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}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAmCF,CAxBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAKE,sBAA+C,CAA/C,kDAA+C,CAH/C,gBAAiB,CADjB,SAKF,CAEA,uBAME,sBAA2C,CAA3C,8CAA2C,CAJ3C,gBAAiB,CADjB,SAMF,CAKA,mEAEE,YACF,CAOA,mMAGE,yBAAgC,CADhC,QAEF,CAEA,kGAEE,2CAA4C,CAD5C,YAEF,CAEA,iGAGE,uCAAwC,CAFxC,YAGF,CAIF,2DAGE,cAAe,CADf,
|
|
1
|
+
{"version":3,"sources":["popover.pcss"],"names":[],"mappings":"AAIA,SACE,iBAAkB,CAClB,WACF,CAEA,iBAKE,uCAAwC,CACxC,+DAAgE,CAChE,wCAAyC,CAGzC,4EAA+E,CAN/E,gBAAiB,CADjB,iBAAkB,CAFlB,iBAAkB,CAClB,WAmCF,CAxBE,+CAKE,UAAW,CADX,oBAAqB,CADrB,QAAS,CADT,iBAIF,CAEA,wBAKE,sBAA+C,CAA/C,kDAA+C,CAH/C,gBAAiB,CADjB,SAKF,CAEA,uBAME,sBAA2C,CAA3C,8CAA2C,CAJ3C,gBAAiB,CADjB,SAMF,CAKA,mEAEE,YACF,CAOA,mMAGE,yBAAgC,CADhC,QAEF,CAEA,kGAEE,2CAA4C,CAD5C,YAEF,CAEA,iGAGE,uCAAwC,CAFxC,YAGF,CAIF,2DAGE,cAAe,CADf,UAiBF,CAdE,6IAEE,SAAU,CACV,aACF,CAEA,uEACE,yBACF,CAEA,sEAEE,gBAAiB,CADjB,yBAEF,CAIF,yDAEE,SAAU,CACV,aAYF,CAVE,yIAEE,wBAAyB,CACzB,aACF,CAEA,oEACE,wBAAyB,CACzB,eACF,CAUA,6VAKE,yBAAgC,CAFhC,SAAU,CACV,aAAc,CAFd,OAIF,CAEA,+KACE,eACF,CAEA,8KACE,eACF,CAOA,+FAEE,4CAA6C,CAD7C,WAEF,CAEA,8FAGE,wCAAyC,CAFzC,WAGF,CAOA,4FAEE,6CAA8C,CAD9C,UAEF,CAEA,2FAIE,yCAA0C,CAH1C,UAAW,CACX,iBAGF,CAMA,qIAEE,uBACF,CAMA,iJAEE,QACF,CAEA,yEACE,0BACF,CAEA,wEACE,0BAA2B,CAC3B,iBACF,CAGF,yBACE,wBACE,eACF,CACF,CAKA,4BACE,SAIE,kBAAoB,CACpB,gBAAkB,CAJlB,cAAe,CAEf,iBAAmB,CADnB,kBAIF,CAEA,iBAGE,WAAY,CACZ,SAAU,CAEV,iCAAkC,CAJlC,UAAW,CADX,QAAS,CAIT,oBAEF,CAGA,8BACE,4DACF,CAGA,+CAEE,YACF,CACF","file":"popover.css","sourcesContent":["/* stylelint-disable primer/spacing */\n\n/* Popover */\n\n.Popover {\n position: absolute;\n z-index: 100;\n}\n\n.Popover-message {\n position: relative;\n width: 232px;\n margin-right: auto;\n margin-left: auto;\n background-color: var(--overlay-bgColor);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n\n /* adding !important to override utility classes used in dotcom */\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large)) !important;\n\n /* Carets */\n &::before,\n &::after {\n position: absolute;\n left: 50%;\n display: inline-block;\n content: '';\n }\n\n &::before {\n top: -16px;\n margin-left: -9px;\n /* stylelint-disable-next-line primer/borders */\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n &::after {\n top: -14px;\n margin-left: -8px;\n /* stylelint-disable-next-line primer/borders */\n border: 7px solid transparent;\n /* stylelint-disable-next-line primer/colors */\n border-bottom-color: var(--overlay-bgColor);\n }\n}\n\n/* No caret */\n.Popover-message--no-caret {\n &::before,\n &::after {\n display: none;\n }\n}\n\n/* Bottom-oriented carets */\n.Popover-message--bottom,\n.Popover-message--bottom-right,\n.Popover-message--bottom-left {\n &::before,\n &::after {\n top: auto;\n border-bottom-color: transparent;\n }\n\n &::before {\n bottom: -16px;\n border-top-color: var(--borderColor-default);\n }\n\n &::after {\n bottom: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-top-color: var(--overlay-bgColor);\n }\n}\n\n/* Top and Bottom: Right-oriented carets */\n.Popover-message--top-right,\n.Popover-message--bottom-right {\n right: -9px;\n margin-right: 0;\n\n &::before,\n &::after {\n left: auto;\n margin-left: 0;\n }\n\n &::before {\n right: var(--base-size-20);\n }\n\n &::after {\n right: var(--base-size-20);\n margin-right: 1px;\n }\n}\n\n/* Top and Bottom: Left-oriented carets */\n.Popover-message--top-left,\n.Popover-message--bottom-left {\n left: -9px;\n margin-left: 0;\n\n &::before,\n &::after {\n left: var(--base-size-24);\n margin-left: 0;\n }\n\n &::after {\n left: var(--base-size-24);\n margin-left: 1px;\n }\n}\n\n/* Right- and Left-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom,\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: 50%;\n left: auto;\n margin-left: 0;\n border-bottom-color: transparent;\n }\n\n &::before {\n margin-top: -9px;\n }\n\n &::after {\n margin-top: -8px;\n }\n}\n\n/* Right-oriented carets */\n.Popover-message--right,\n.Popover-message--right-top,\n.Popover-message--right-bottom {\n &::before {\n right: -16px;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n right: -14px;\n /* stylelint-disable-next-line primer/colors */\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n/* Left-oriented carets */\n.Popover-message--left,\n.Popover-message--left-top,\n.Popover-message--left-bottom {\n &::before {\n left: -16px;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n left: -14px;\n margin-bottom: 1px;\n /* stylelint-disable-next-line primer/colors */\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n/* Right and Left: Top-oriented carets */\n.Popover-message--right-top,\n.Popover-message--left-top {\n &::before,\n &::after {\n top: var(--base-size-24);\n }\n}\n\n/* Right and Left: Bottom-oriented carets */\n.Popover-message--right-bottom,\n.Popover-message--left-bottom {\n &::before,\n &::after {\n top: auto;\n }\n\n &::before {\n bottom: var(--base-size-16);\n }\n\n &::after {\n bottom: var(--base-size-16);\n margin-bottom: 1px;\n }\n}\n\n@media (min-width: 544px) {\n .Popover-message--large {\n min-width: 320px;\n }\n}\n\n/* Responsive Popover\n** For < md it will show full-width anchored to the bottom */\n\n@media (max-width: 767.98px) {\n .Popover {\n position: fixed;\n top: auto !important;\n right: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n }\n\n .Popover-message {\n top: auto;\n right: auto;\n bottom: auto;\n left: auto;\n width: auto !important;\n margin: var(--stack-gap-condensed);\n }\n\n /* Increase tap area for touch input */\n .Popover-message > .btn-octicon {\n padding: var(--control-medium-paddingInline-normal) !important;\n }\n\n /* Remove caret */\n .Popover-message::after,\n .Popover-message::before {\n display: none;\n }\n}\n"]}
|
|
@@ -94,6 +94,7 @@
|
|
|
94
94
|
|
|
95
95
|
&::after {
|
|
96
96
|
right: var(--base-size-20);
|
|
97
|
+
margin-right: 1px;
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
100
|
|
|
@@ -111,6 +112,7 @@
|
|
|
111
112
|
|
|
112
113
|
&::after {
|
|
113
114
|
left: var(--base-size-24);
|
|
115
|
+
margin-left: 1px;
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
|
|
@@ -165,6 +167,7 @@
|
|
|
165
167
|
|
|
166
168
|
&::after {
|
|
167
169
|
left: -14px;
|
|
170
|
+
margin-bottom: 1px;
|
|
168
171
|
/* stylelint-disable-next-line primer/colors */
|
|
169
172
|
border-right-color: var(--overlay-bgColor);
|
|
170
173
|
}
|
|
@@ -193,6 +196,7 @@
|
|
|
193
196
|
|
|
194
197
|
&::after {
|
|
195
198
|
bottom: var(--base-size-16);
|
|
199
|
+
margin-bottom: 1px;
|
|
196
200
|
}
|
|
197
201
|
}
|
|
198
202
|
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.35.
|
|
4
|
+
version: 0.35.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-11-
|
|
11
|
+
date: 2024-11-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: actionview
|
|
@@ -95,7 +95,6 @@ files:
|
|
|
95
95
|
- app/assets/javascripts/components/primer/alpha/tool_tip.d.ts
|
|
96
96
|
- app/assets/javascripts/components/primer/alpha/x_banner.d.ts
|
|
97
97
|
- app/assets/javascripts/components/primer/anchored_position.d.ts
|
|
98
|
-
- app/assets/javascripts/components/primer/aria_live.d.ts
|
|
99
98
|
- app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts
|
|
100
99
|
- app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts
|
|
101
100
|
- app/assets/javascripts/components/primer/beta/nav_list.d.ts
|
|
@@ -316,9 +315,6 @@ files:
|
|
|
316
315
|
- app/components/primer/anchored_position.d.ts
|
|
317
316
|
- app/components/primer/anchored_position.js
|
|
318
317
|
- app/components/primer/anchored_position.ts
|
|
319
|
-
- app/components/primer/aria_live.d.ts
|
|
320
|
-
- app/components/primer/aria_live.js
|
|
321
|
-
- app/components/primer/aria_live.ts
|
|
322
318
|
- app/components/primer/base_component.rb
|
|
323
319
|
- app/components/primer/beta/auto_complete.rb
|
|
324
320
|
- app/components/primer/beta/auto_complete/auto_complete.d.ts
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
const safeDocument = typeof document === 'undefined' ? undefined : document;
|
|
2
|
-
// Announce an element's text to the screen reader.
|
|
3
|
-
export function announceFromElement(el, options) {
|
|
4
|
-
announce(getTextContent(el), options);
|
|
5
|
-
}
|
|
6
|
-
// Announce message update to screen reader.
|
|
7
|
-
// Note: Use caution when using this function while a dialog is active.
|
|
8
|
-
// If the message is updated while the dialog is open, the screen reader may not announce the live region.
|
|
9
|
-
export function announce(message, options) {
|
|
10
|
-
const { assertive, element } = options ?? {};
|
|
11
|
-
setContainerContent(message, assertive, element);
|
|
12
|
-
}
|
|
13
|
-
// Set aria-live container to message.
|
|
14
|
-
function setContainerContent(message, assertive, element) {
|
|
15
|
-
const getQuerySelector = () => {
|
|
16
|
-
return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
|
|
17
|
-
};
|
|
18
|
-
const container = element ?? safeDocument?.querySelector(getQuerySelector());
|
|
19
|
-
if (!container)
|
|
20
|
-
return;
|
|
21
|
-
if (container.textContent === message) {
|
|
22
|
-
/* This is a hack due to the way the aria live API works.
|
|
23
|
-
A screen reader will not read a live region again
|
|
24
|
-
if the text is the same. Adding a space character tells
|
|
25
|
-
the browser that the live region has updated,
|
|
26
|
-
which will cause it to read again, but with no audible difference. */
|
|
27
|
-
container.textContent = `${message}\u00A0`;
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
container.textContent = message;
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
// Gets the trimmed text content of an element.
|
|
34
|
-
function getTextContent(el) {
|
|
35
|
-
// innerText does not contain hidden text
|
|
36
|
-
/* eslint-disable-next-line github/no-innerText */
|
|
37
|
-
return (el.getAttribute('aria-label') || el.innerText || '').trim();
|
|
38
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
const safeDocument = typeof document === 'undefined' ? undefined : document
|
|
2
|
-
|
|
3
|
-
// Announce an element's text to the screen reader.
|
|
4
|
-
export function announceFromElement(el: HTMLElement, options?: {assertive?: boolean; element?: HTMLElement}) {
|
|
5
|
-
announce(getTextContent(el), options)
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
// Announce message update to screen reader.
|
|
9
|
-
// Note: Use caution when using this function while a dialog is active.
|
|
10
|
-
// If the message is updated while the dialog is open, the screen reader may not announce the live region.
|
|
11
|
-
export function announce(message: string, options?: {assertive?: boolean; element?: HTMLElement}) {
|
|
12
|
-
const {assertive, element} = options ?? {}
|
|
13
|
-
|
|
14
|
-
setContainerContent(message, assertive, element)
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
// Set aria-live container to message.
|
|
18
|
-
function setContainerContent(message: string, assertive?: boolean, element?: HTMLElement) {
|
|
19
|
-
const getQuerySelector = () => {
|
|
20
|
-
return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice'
|
|
21
|
-
}
|
|
22
|
-
const container = element ?? safeDocument?.querySelector(getQuerySelector())
|
|
23
|
-
if (!container) return
|
|
24
|
-
if (container.textContent === message) {
|
|
25
|
-
/* This is a hack due to the way the aria live API works.
|
|
26
|
-
A screen reader will not read a live region again
|
|
27
|
-
if the text is the same. Adding a space character tells
|
|
28
|
-
the browser that the live region has updated,
|
|
29
|
-
which will cause it to read again, but with no audible difference. */
|
|
30
|
-
container.textContent = `${message}\u00A0`
|
|
31
|
-
} else {
|
|
32
|
-
container.textContent = message
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
// Gets the trimmed text content of an element.
|
|
37
|
-
function getTextContent(el: HTMLElement): string {
|
|
38
|
-
// innerText does not contain hidden text
|
|
39
|
-
/* eslint-disable-next-line github/no-innerText */
|
|
40
|
-
return (el.getAttribute('aria-label') || el.innerText || '').trim()
|
|
41
|
-
}
|