feat: Date Filter: Accessibility: Add tooltip with keyboard instructi…

…ons for custom dates [GAUD-6576] (#4808)
BrightspaceUI · Jul 8, 2024 · 5617827 · 5617827
1 parent b600e79
commit 5617827
Show file tree

Hide file tree

Showing 24 changed files with 108 additions and 2 deletions.
diff --git a/components/filter/filter.js b/components/filter/filter.js
@@ -19,6 +19,7 @@ import '../menu/menu-item.js';
 import '../paging/pager-load-more.js';
 import '../selection/selection-select-all.js';
 import '../selection/selection-summary.js';
+import '../tooltip/tooltip.js';
 
 import { bodyCompactStyles, bodySmallStyles, bodyStandardStyles, heading4Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
@@ -37,6 +38,26 @@ const ESCAPE_KEY_CODE = 27;
 const FILTER_CONTENT_CLASS = 'd2l-filter-dropdown-content';
 const SET_DIMENSION_ID_PREFIX = 'list-';
 
+let hasDisplayedKeyboardTooltip = false;
+
+export function resetHasDisplayedKeyboardTooltip() {
+	hasDisplayedKeyboardTooltip = false;
+}
+let spacePressed = false;
+let spaceListenerAdded = false;
+function addSpaceListener() {
+	if (spaceListenerAdded) return;
+	spaceListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 32) return;
+		spacePressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 32) return;
+		spacePressed = false;
+	});
+}
+
 /**
  * A filter component that contains one or more dimensions a user can filter by.
  * This component is in charge of all rendering.
@@ -68,6 +89,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			text: { type: String },
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
+			_displayKeyboardTooltip: { state: true },
 			_minWidth: { type: Number, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
 		};
@@ -211,6 +233,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this.opened = false;
 		this._changeEventsToDispatch = new Map();
 		this._dimensions = [];
+		this._displayKeyboardTooltip = false;
 		this._minWidth = 285;
 		this._openedDimensions = [];
 		this._totalAppliedCount = 0;
@@ -226,6 +249,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		return 'd2l-button-subtle';
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		addSpaceListener();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 		this.addEventListener('d2l-filter-dimension-data-change', this._handleDimensionDataChange);
@@ -590,8 +618,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 	}
 
 	_createSetDimensionItem(item) {
+		const itemId = `list-item-${item.key}`;
 		return html`
 			<d2l-list-item
+				id="${itemId}"
+				@d2l-list-item-selected="${ifDefined(item.additionalContent ? this._handleListItemSelelcted : undefined)}"
 				?selection-disabled="${item.disabled}"
 				?hidden="${item.hidden}"
 				key="${item.key}"
@@ -617,6 +648,9 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 					` : nothing}
 				</div>
 			</d2l-list-item>
+			${item.additionalContent && item.selected && this._displayKeyboardTooltip
+		? html`<d2l-tooltip align="start" announced for="${itemId}" for-type="descriptor" @d2l-tooltip-hide="${this._handleTooltipHide}">${this.localizeHTML('components.filter.additionalContentTooltip')}</d2l-tooltip>`
+		: nothing}
 		`;
 	}
 
@@ -856,6 +890,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		parentListItem.classList.remove('expanding-content');
 	}
 
+	_handleListItemSelelcted() {
+		if (hasDisplayedKeyboardTooltip || !spacePressed) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
 	_handleSearch(e) {
 		const dimension = this._getActiveDimension();
 		const searchValue = e.detail.value.trim();
@@ -903,6 +943,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		this._activeFiltersSubscribers.updateSubscribers();
 	}
 
+	_handleTooltipHide() {
+		this._displayKeyboardTooltip = false;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
 	_isDimensionEmpty(dimension) {
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':

diff --git a/components/filter/test/filter.vdiff.js b/components/filter/test/filter.vdiff.js
@@ -1,12 +1,12 @@
-import '../filter.js';
 import '../filter-dimension-set.js';
 import '../filter-dimension-set-empty-state.js';
 import '../filter-dimension-set-date-text-value.js';
 import '../filter-dimension-set-date-time-range-value.js';
 import '../filter-dimension-set-value.js';
-import { clickElem, expect, fixture, hoverAt, html, nextFrame, oneEvent, sendKeysElem, waitUntil } from '@brightspace-ui/testing';
+import { aTimeout, clickElem, expect, fixture, focusElem, hoverAt, html, nextFrame, oneEvent, sendKeysElem, waitUntil } from '@brightspace-ui/testing';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { nothing } from 'lit';
+import { resetHasDisplayedKeyboardTooltip } from '../filter.js';
 
 function createEmptySingleDim(opts) {
 	const { customEmptyState } = { customEmptyState: false, ...opts };
@@ -105,6 +105,16 @@ function createSingleDimDateCustom(opts) {
 		</d2l-filter>
 	`;
 }
+function createSingleDimDateCustomSimple(customSelected) {
+	return html`
+		<d2l-filter opened>
+			<d2l-filter-dimension-set key="dates" text="Dates">
+				<d2l-filter-dimension-set-date-time-range-value key="custom"></d2l-filter-dimension-set-date-time-range-value>
+				<d2l-filter-dimension-set-date-time-range-value key="custom2" ?selected="${customSelected}"></d2l-filter-dimension-set-date-time-range-value>
+			</d2l-filter-dimension-set>
+		</d2l-filter>
+	`;
+}
 
 function createEmptyMultipleDims(opts) {
 	const { long, text } = { long: false, ...opts };
@@ -196,6 +206,38 @@ describe('filter', () => {
 			await expect(elem).to.be.golden();
 		});
 
+		it('dates-custom-tooltip', async() => {
+			resetHasDisplayedKeyboardTooltip();
+			const elem = await fixture(createSingleDimDateCustomSimple());
+			focusElem(elem.shadowRoot.querySelector('d2l-list-item'));
+			sendKeysElem(elem, 'press', 'Tab+Space');
+			await oneEvent(elem, 'd2l-tooltip-show');
+			await nextFrame();
+			await expect(document).to.be.golden();
+		});
+
+		it('dates-custom-tooltip-selected-default', async() => {
+			resetHasDisplayedKeyboardTooltip();
+			const elem = await fixture(createSingleDimDateCustomSimple(true));
+			const listItem = elem.shadowRoot.querySelector('d2l-list-item');
+			focusElem(listItem);
+			sendKeysElem(listItem, 'press', 'ArrowDown');
+			await aTimeout(200); // make sure tooltip does not appear
+			await expect(document).to.be.golden();
+		});
+
+		it('dates-custom-tooltip-selected-default-deselected-selected', async() => {
+			resetHasDisplayedKeyboardTooltip();
+			const elem = await fixture(createSingleDimDateCustomSimple(true));
+			const listItem = elem.shadowRoot.querySelector('d2l-list-item');
+			focusElem(listItem);
+			sendKeysElem(listItem, 'press', 'ArrowDown');
+			sendKeysElem(listItem, 'press', 'ArrowUp+Space');
+			await oneEvent(elem, 'd2l-tooltip-show');
+			await nextFrame();
+			await expect(document).to.be.golden();
+		});
+
 		describe('searched', () => {
 			[
 				{ name: 'single-selection', search: 'empty', template: createSingleDimSingleSelection() },

diff --git a/...romium/single-set-dates-custom-tooltip-selected-default-deselected-selected.png b/...romium/single-set-dates-custom-tooltip-selected-default-deselected-selected.png
diff --git a/...est/golden/filter/chromium/single-set-dates-custom-tooltip-selected-default.png b/...est/golden/filter/chromium/single-set-dates-custom-tooltip-selected-default.png
diff --git a/components/filter/test/golden/filter/chromium/single-set-dates-custom-tooltip.png b/components/filter/test/golden/filter/chromium/single-set-dates-custom-tooltip.png
diff --git a/lang/ar.js b/lang/ar.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "مهم!",
 	"components.dropdown.close": "إغلاق",
 	"components.filter.activeFilters": "عوامل تصفية نشطة:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "مسح",
 	"components.filter.clearAll": "مسح الكل",
 	"components.filter.clearAllAnnounce": "جارٍ مسح كل عوامل التصفية",

diff --git a/lang/cy.js b/lang/cy.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critigol!",
 	"components.dropdown.close": "Cau",
 	"components.filter.activeFilters": "Dim Hidlwyr Gweithredol:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Clirio",
 	"components.filter.clearAll": "Clirio’r Cyfan",
 	"components.filter.clearAllAnnounce": "Wrthi’n clirio’r holl hidlwyr",

diff --git a/lang/da.js b/lang/da.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritisk!",
 	"components.dropdown.close": "Luk",
 	"components.filter.activeFilters": "Aktive filtre:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Ryd",
 	"components.filter.clearAll": "Ryd alle",
 	"components.filter.clearAllAnnounce": "Rydder alle filtre",

diff --git a/lang/de.js b/lang/de.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritisch!",
 	"components.dropdown.close": "Schließen",
 	"components.filter.activeFilters": "Aktive Filter:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Löschen",
 	"components.filter.clearAll": "Alle löschen",
 	"components.filter.clearAllAnnounce": "Alle Filter werden gelöscht",

diff --git a/lang/en-gb.js b/lang/en-gb.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Close",
 	"components.filter.activeFilters": "Active Filters:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Clear",
 	"components.filter.clearAll": "Clear All",
 	"components.filter.clearAllAnnounce": "Clearing all filters",

diff --git a/lang/en.js b/lang/en.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critical!",
 	"components.dropdown.close": "Close",
 	"components.filter.activeFilters": "Active Filters:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Clear",
 	"components.filter.clearAll": "Clear All",
 	"components.filter.clearAllAnnounce": "Clearing all filters",

diff --git a/lang/es-es.js b/lang/es-es.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "¡Crítico!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Borrar",
 	"components.filter.clearAll": "Borrar todo",
 	"components.filter.clearAllAnnounce": "Borrando todos los filtros",

diff --git a/lang/es.js b/lang/es.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "¡Crucial!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Borrar",
 	"components.filter.clearAll": "Borrar todo",
 	"components.filter.clearAllAnnounce": "Borrando todos los filtros",

diff --git a/lang/fr-fr.js b/lang/fr-fr.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Critique !",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Effacer",
 	"components.filter.clearAll": "Tout effacer",
 	"components.filter.clearAllAnnounce": "Suppression de tous les filtres",

diff --git a/lang/fr.js b/lang/fr.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Essentiel!",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Effacer",
 	"components.filter.clearAll": "Effacer tout",
 	"components.filter.clearAllAnnounce": "Effacement de tous les filtres en cours",

diff --git a/lang/hi.js b/lang/hi.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "महत्वपूर्ण!",
 	"components.dropdown.close": "बंद करें",
 	"components.filter.activeFilters": "सक्रिय फ़िल्टर्स:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "साफ़ करें",
 	"components.filter.clearAll": "सभी साफ़ करें",
 	"components.filter.clearAllAnnounce": "सभी फिल्टर साफ़ किए जा रहे हैं",

diff --git a/lang/ja.js b/lang/ja.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "重大です！",
 	"components.dropdown.close": "閉じる",
 	"components.filter.activeFilters": "アクティブフィルタ:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "クリア",
 	"components.filter.clearAll": "すべてをクリア",
 	"components.filter.clearAllAnnounce": "すべてのフィルタのクリア",

diff --git a/lang/ko.js b/lang/ko.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "중요!",
 	"components.dropdown.close": "닫기",
 	"components.filter.activeFilters": "활성 필터:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "지우기",
 	"components.filter.clearAll": "모두 지우기",
 	"components.filter.clearAllAnnounce": "모든 필터 지우기",

diff --git a/lang/nl.js b/lang/nl.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritiek!",
 	"components.dropdown.close": "Sluiten",
 	"components.filter.activeFilters": "Actieve filters:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Wissen",
 	"components.filter.clearAll": "Alles wissen",
 	"components.filter.clearAllAnnounce": "Alle filters wissen",

diff --git a/lang/pt.js b/lang/pt.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Crítico!",
 	"components.dropdown.close": "Fechar",
 	"components.filter.activeFilters": "Filtros ativos:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Limpar",
 	"components.filter.clearAll": "Limpar tudo",
 	"components.filter.clearAllAnnounce": "Limpando todos os filtros",

diff --git a/lang/sv.js b/lang/sv.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Viktigt!",
 	"components.dropdown.close": "Stäng",
 	"components.filter.activeFilters": "Aktiva filter:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Rensa",
 	"components.filter.clearAll": "Rensa alla",
 	"components.filter.clearAllAnnounce": "Rensar alla filter",

diff --git a/lang/tr.js b/lang/tr.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "Kritik!",
 	"components.dropdown.close": "Kapat",
 	"components.filter.activeFilters": "Etkin Filtreler:",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "Temizle",
 	"components.filter.clearAll": "Tümünü Temizle",
 	"components.filter.clearAllAnnounce": "Tüm filtreler temizleniyor",

diff --git a/lang/zh-cn.js b/lang/zh-cn.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "严重问题！",
 	"components.dropdown.close": "关闭",
 	"components.filter.activeFilters": "活动筛选器：",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "清除",
 	"components.filter.clearAll": "全部清除",
 	"components.filter.clearAllAnnounce": "清除所有筛选器",

diff --git a/lang/zh-tw.js b/lang/zh-tw.js
@@ -10,6 +10,7 @@ export default {
 	"components.dialog.critical": "重大！",
 	"components.dropdown.close": "關閉",
 	"components.filter.activeFilters": "啟用中的篩選器：",
+	"components.filter.additionalContentTooltip": "Use <b>left/right arrow keys</b> to move focus inside this list item",
 	"components.filter.clear": "清除",
 	"components.filter.clearAll": "全部清除",
 	"components.filter.clearAllAnnounce": "正在清除所有篩選器",