openproject-primer_view_components 0.49.1 → 0.49.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: openproject-primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.49.
|
|
4
|
+
version: 0.49.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2024-11-
|
|
12
|
+
date: 2024-11-25 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|
|
@@ -96,7 +96,6 @@ files:
|
|
|
96
96
|
- app/assets/javascripts/components/primer/alpha/tool_tip.d.ts
|
|
97
97
|
- app/assets/javascripts/components/primer/alpha/x_banner.d.ts
|
|
98
98
|
- app/assets/javascripts/components/primer/anchored_position.d.ts
|
|
99
|
-
- app/assets/javascripts/components/primer/aria_live.d.ts
|
|
100
99
|
- app/assets/javascripts/components/primer/beta/auto_complete/auto_complete.d.ts
|
|
101
100
|
- app/assets/javascripts/components/primer/beta/clipboard_copy.d.ts
|
|
102
101
|
- app/assets/javascripts/components/primer/beta/nav_list.d.ts
|
|
@@ -320,9 +319,6 @@ files:
|
|
|
320
319
|
- app/components/primer/anchored_position.d.ts
|
|
321
320
|
- app/components/primer/anchored_position.js
|
|
322
321
|
- app/components/primer/anchored_position.ts
|
|
323
|
-
- app/components/primer/aria_live.d.ts
|
|
324
|
-
- app/components/primer/aria_live.js
|
|
325
|
-
- app/components/primer/aria_live.ts
|
|
326
322
|
- app/components/primer/base_component.rb
|
|
327
323
|
- app/components/primer/beta/auto_complete.rb
|
|
328
324
|
- 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
|
-
}
|