@brightspace-ui/core 1.218.0 → 1.219.0

package/components/list/list-item-button-mixin.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemButtonMixin = superclass => class extends ListItemMixin(superclass) {
@@ -34,13 +35,18 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
 		return styles;
 	}
 
+	constructor() {
+		super();
+		this._primaryActionId = getUniqueId();
+	}
+
 	_onButtonClick() {
 		/** Dispatched when the item's primary button action is clicked */
 		this.dispatchEvent(new CustomEvent('d2l-list-item-button-click', { bubbles: true }));
 	}
 
 	_renderPrimaryAction(labelledBy) {
-		return html`<button aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
+		return html`<button id="${this._primaryActionId}" aria-labelledby="${labelledBy}" @click="${this._onButtonClick}"></button>`;
 	}
 
 };

package/components/list/list-item-drag-handle.js

@@ -1,9 +1,11 @@
 import '../button/button-icon.js';
 import '../icons/icon.js';
+import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { buttonStyles } from '../button/button-styles.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getFirstFocusableDescendant } from '../../helpers/focus.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -36,6 +38,8 @@ export const dragActions = Object.freeze({
 	up: 'up'
 });
 
+let hasDisplayedKeyboardTooltip = false;
+
 /**
  * @fires d2l-list-item-drag-handle-action - Dispatched when an action performed on the drag handle
  */
@@ -58,6 +62,7 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			_displayKeyboardTooltip: { type: Boolean },
 			_keyboardActive: { type: Boolean }
 		};
 	}
@@ -109,6 +114,15 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 				cursor: default;
 				opacity: 0.5;
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-drag-handle-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 	}
 
@@ -117,6 +131,8 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 
 		this.disabled = false;
 
+		this._buttonId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 		this._keyboardActive = false;
 		this._movingElement = false;
 	}
@@ -219,7 +235,14 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 		this._movingElement = false;
 	}
 
-	_onFocusOut(e) {
+	_onFocusInKeyboardButton() {
+		if (hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
+	_onFocusOutKeyboardButton(e) {
+		this._displayKeyboardTooltip = false;
 		if (this._movingElement) {
 			this._movingElement = false;
 			e.stopPropagation();
@@ -266,17 +289,32 @@ class ListItemDragHandle extends LocalizeCoreElement(RtlMixin(LitElement)) {
 	_renderKeyboardDragging() {
 		return html`
 			<button
+				aria-label="${this._defaultLabel}"
+				aria-live="assertive"
 				class="d2l-list-item-drag-handle-keyboard-button"
-				@focusout="${this._onFocusOut}"
-				@keyup="${this._onActiveKeyboard}"
+				@focusin="${this._onFocusInKeyboardButton}"
+				@focusout="${this._onFocusOutKeyboardButton}"
+				id="${this._buttonId}"
 				@keydown="${this._onPreventDefault}"
-				aria-live="assertive"
-				aria-label="${this._defaultLabel}">
+				@keyup="${this._onActiveKeyboard}">
 				<d2l-icon icon="tier1:arrow-toggle-up" @click="${this._dispatchActionUp}" class="d2l-button-icon"></d2l-icon>
 				<d2l-icon icon="tier1:arrow-toggle-down" @click="${this._dispatchActionDown}" class="d2l-button-icon"></d2l-icon>
 			</button>
+			${this._displayKeyboardTooltip ? html`<d2l-tooltip align="start" for="${this._buttonId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 	}
+
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-drag-handle-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.enter-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-drag-handle-tooltip-key">${this.localize('components.list-item-drag-handle-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-drag-handle-tooltip.left-right-desc')}</li>
+			</ul>
+		`;
+	}
+
 }
 
 customElements.define('d2l-list-item-drag-handle', ListItemDragHandle);

package/components/list/list-item-link-mixin.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
 import { css, html } from 'lit-element/lit-element.js';
+import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ListItemMixin } from './list-item-mixin.js';
 
 export const ListItemLinkMixin = superclass => class extends ListItemMixin(superclass) {
@@ -42,6 +43,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 	constructor() {
 		super();
 		this.actionHref = null;
+		this._primaryActionId = getUniqueId();
 	}
 
 	_handleLinkClick() {
@@ -51,7 +53,7 @@ export const ListItemLinkMixin = superclass => class extends ListItemMixin(super
 
 	_renderPrimaryAction(labelledBy) {
 		if (!this.actionHref) return;
-		return html`<a aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
+		return html`<a id="${this._primaryActionId}" aria-labelledby="${labelledBy}" href="${this.actionHref}" @click="${this._handleLinkClick}"></a>`;
 	}
 
 };

package/components/list/list-item-mixin.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import './list-item-generic-layout.js';
 import './list-item-placement-marker.js';
+import '../tooltip/tooltip.js';
 import { css, html } from 'lit-element/lit-element.js';
 import { findComposedAncestor, getComposedParent } from '../../helpers/dom.js';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -10,10 +11,28 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { ListItemCheckboxMixin } from './list-item-checkbox-mixin.js';
 import { ListItemDragDropMixin } from './list-item-drag-drop-mixin.js';
 import { ListItemRoleMixin } from './list-item-role-mixin.js';
+import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { nothing } from 'lit-html';
 import ResizeObserver from 'resize-observer-polyfill';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
+let tabPressed = false;
+let tabListenerAdded = false;
+function addTabListener() {
+	if (tabListenerAdded) return;
+	tabListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = false;
+	});
+}
+
+let hasDisplayedKeyboardTooltip = false;
+
 const ro = new ResizeObserver(entries => {
 	entries.forEach(entry => {
 		if (!entry || !entry.target || !entry.target.resizedCallback) {
@@ -25,7 +44,7 @@ const ro = new ResizeObserver(entries => {
 
 const defaultBreakpoints = [842, 636, 580, 0];
 
-export const ListItemMixin = superclass => class extends ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass)))) {
+export const ListItemMixin = superclass => class extends LocalizeCoreElement(ListItemDragDropMixin(ListItemCheckboxMixin(ListItemRoleMixin(RtlMixin(superclass))))) {
 
 	static get properties() {
 		return {
@@ -40,6 +59,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			 */
 			slim: { type: Boolean },
 			_breakpoint: { type: Number },
+			_displayKeyboardTooltip: { type: Boolean },
 			_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
 			_hoveringPrimaryAction: { type: Boolean },
 			_focusing: { type: Boolean },
@@ -237,6 +257,15 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 			:host([draggable][selected]:not([disabled])) d2l-list-item-generic-layout.d2l-focusing + .d2l-list-item-active-border {
 				transform: rotate(1deg);
 			}
+			d2l-tooltip > div {
+				font-weight: 700;
+			}
+			d2l-tooltip > ul {
+				padding-inline-start: 1rem;
+			}
+			.d2l-list-item-tooltip-key {
+				font-weight: 700;
+			}
 		`];
 
 		super.styles && styles.unshift(super.styles);
@@ -249,6 +278,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		this.slim = false;
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
+		this._displayKeyboardTooltip = false;
 	}
 
 	get breakpoints() {
@@ -265,6 +295,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 	connectedCallback() {
 		super.connectedCallback();
 		ro.observe(this);
+		if (this.role === 'rowgroup') {
+			addTabListener();
+		}
 	}
 
 	disconnectedCallback() {
@@ -351,6 +384,9 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusIn() {
 		this._focusing = true;
+		if (this.role !== 'rowgroup' || !tabPressed || hasDisplayedKeyboardTooltip) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
 	}
 
 	_onFocusInPrimaryAction() {
@@ -359,6 +395,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 
 	_onFocusOut() {
 		this._focusing = false;
+		this._displayKeyboardTooltip = false;
 	}
 
 	_onFocusOutPrimaryAction() {
@@ -398,6 +435,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		};
 
 		const primaryAction = this._renderPrimaryAction ? this._renderPrimaryAction(this._contentId) : null;
+		const tooltipForId = (primaryAction ? this._primaryActionId : (this.selectable ? this._checkboxId : null));
 
 		return html`
 			${this._renderTopPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
@@ -413,11 +451,11 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 					${this._renderDragHandle(this._renderOutsideControl)}
 					${this._renderDragTarget(this._renderOutsideControlAction)}
 					${this.selectable ? html`
-					<div slot="control">${ this._renderCheckbox() }</div>
+					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
 						@mouseenter="${this._onMouseEnter}"
 						@mouseleave="${this._onMouseLeave}">
-							${ this._renderCheckboxAction('') }
+							${this._renderCheckboxAction('')}
 					</div>` : nothing }
 					${primaryAction ? html`
 					<div slot="content-action"
@@ -446,6 +484,7 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 				<div class="d2l-list-item-active-border"></div>
 			</div>
 			${this._renderBottomPlacementMarker(html`<d2l-list-item-placement-marker></d2l-list-item-placement-marker>`)}
+			${this._displayKeyboardTooltip && tooltipForId ? html`<d2l-tooltip align="start" announced for="${tooltipForId}" for-type="descriptor">${this._renderTooltipContent()}</d2l-tooltip>` : ''}
 		`;
 
 	}
@@ -458,4 +497,16 @@ export const ListItemMixin = superclass => class extends ListItemDragDropMixin(L
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderTooltipContent() {
+		return html`
+			<div>${this.localize('components.list-item-tooltip.title')}</div>
+			<ul>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.enter-key')}</span> - ${this.localize('components.list-item-tooltip.enter-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.up-down-key')}</span> - ${this.localize('components.list-item-tooltip.up-down-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.left-right-key')}</span> - ${this.localize('components.list-item-tooltip.left-right-desc')}</li>
+				<li><span class="d2l-list-item-tooltip-key">${this.localize('components.list-item-tooltip.page-up-down-key')}</span> - ${this.localize('components.list-item-tooltip.page-up-down-desc')}</li>
+			</ul>
+		`;
+	}
+
 };

package/components/list/list-item-role-mixin.js

@@ -19,8 +19,9 @@ export const ListItemRoleMixin = superclass => class extends superclass {
 
 		const separators = parent.getAttribute('separators');
 
-		this.role = parent.grid ? 'rowgroup' : 'listitem';
+		this.role = parent.hasAttribute('grid') ? 'rowgroup' : 'listitem';
 		this._separators = separators || undefined;
 		this._extendSeparators = parent.hasAttribute('extend-separators');
 	}
+
 };

package/lang/ar.js

@@ -1,12 +1,11 @@
 /* eslint quotes: 0 */
-
 export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.calendar.notSelected": "لم يتم التحديد.",
 	"components.calendar.selected": "تم التحديد.",
 	"components.calendar.show": "إظهار {month}",
-	"components.count-badge.plus" : "{number}+",
+	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "إغلاق مربع الحوار هذا",
 	"components.dropdown.close": "إغلاق",
 	"components.filter.clear": "مسح",
@@ -17,9 +16,9 @@ export default {
 	"components.filter.clearAnnounceSingle": "جارٍ مسح عوامل التصفية",
 	"components.filter.clearDescription": "مسح عوامل التصفية لـ: {filterName}",
 	"components.filter.clearDescriptionSingle": "مسح عوامل التصفية",
-	"components.filter.loading": "يتم تحميل عوامل التصفية",
 	"components.filter.filterCountDescription": "{number, plural, zero {لم يتم تطبيق عوامل تصفية.} one {تم تطبيق عامل تصفية واحد.} other {{number} من عوامل التصفية التي تم تطبيقها.}}",
 	"components.filter.filters": "عوامل التصفية",
+	"components.filter.loading": "يتم تحميل عوامل التصفية",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
 	"components.filter.searchResults": "{number, plural, zero {ما من نتائج بحث} one {نتيجة بحث واحدة} other {{number} من نتائج البحث}}",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
@@ -49,21 +48,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "يجب أن يكون التاريخ قبل {maxDate}",
 	"components.input-date.errorMinDateOnly": "يجب أن يكون التاريخ بعد {minDate}",
 	"components.input-date.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
-	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
 	"components.input-date.now": "الآن",
+	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
 	"components.input-date.today": "اليوم",
-	"components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
 	"components.input-number.hintDecimalDuplicate": "يوجد عدد عشري في هذا الرقم",
 	"components.input-number.hintDecimalIncorrectComma": "لإضافة عدد عشري، استخدم حرف الفاصلة \",\"",
 	"components.input-number.hintDecimalIncorrectPeriod": "لإضافة عدد عشري، استخدم حرف النقطة \".\"",
+	"components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
 	"components.input-search.clear": "مسح البحث",
 	"components.input-search.defaultPlaceholder": "البحث...",
 	"components.input-search.search": "بحث",
 	"components.input-time-range.endTime": "وقت النهاية",
 	"components.input-time-range.errorBadInput": "يجب أن يكون تاريخ {startLabel} قبل {endLabel}",
 	"components.input-time-range.startTime": "وقت البدء",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toggle keyboard reorder mode.",
+	"components.list-item-drag-handle-tooltip.enter-key": "Enter",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Change the nesting level.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Left/Right",
+	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Move item up or down in the list.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "Up/Down",
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "إعادة ترتيب المواد، الموضع الحالي {currentPosition} من أصل {size}. لنقل هذه المادة، اضغط على السهم المتجه إلى أعلى أو السهم المتجه إلى أسفل.",
+	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
+	"components.list-item-tooltip.enter-key": "Enter",
+	"components.list-item-tooltip.left-right-desc": "Move focus within current item.",
+	"components.list-item-tooltip.left-right-key": "Left/Right",
+	"components.list-item-tooltip.page-up-down-desc": "Move focus 5 items at a time.",
+	"components.list-item-tooltip.page-up-down-key": "Page Up/Down",
+	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
+	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
+	"components.list-item-tooltip.up-down-key": "Up/Down",
 	"components.menu-item-return.return": "العودة إلى القائمة السابقة.",
 	"components.menu-item-return.returnCurrentlyShowing": "العودة إلى القائمة السابقة. يتم عرض {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}، ‏{term2}",

package/lang/cy.js

@@ -1,12 +1,11 @@
 /* eslint quotes: 0 */
-
 export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.calendar.notSelected": "Heb ei Ddewis.",
 	"components.calendar.selected": "Wedi'i Ddewis.",
 	"components.calendar.show": "Dangos {month}",
-	"components.count-badge.plus" : "{number}+",
+	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cau'r dialog hwn",
 	"components.dropdown.close": "Cau",
 	"components.filter.clear": "Clirio",
@@ -17,9 +16,9 @@ export default {
 	"components.filter.clearAnnounceSingle": "Wrthi'n clirio hidlwyr",
 	"components.filter.clearDescription": "Wrthi’n clirio hidlwyd ar gyfer: {filterName}",
 	"components.filter.clearDescriptionSingle": "Clirio Hidlwyr",
-	"components.filter.loading": "Wrthi’n llwytho hidlyddion",
 	"components.filter.filterCountDescription": "{number, plural, zero {Ni chymhwyswyd hidlwyr.} one {1 hidlydd wedi'i gymhwyso.} other {{number} hidlydd wedi'u cymhwyso.}}",
 	"components.filter.filters": "Hidlyddion",
+	"components.filter.loading": "Wrthi’n llwytho hidlyddion",
 	"components.filter.noFilters": "Dim hidlyddion ar gael",
 	"components.filter.searchResults": "{number, plural, zero {Dim canlyniadau chwilio} one {1 canlyniad chwilio} other {{number} o ganlyniadau chwilio}}",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",
@@ -49,21 +48,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Rhaid i'r dyddiad fod cyn {maxDate}",
 	"components.input-date.errorMinDateOnly": "Rhaid i'r dyddiad fod ar ôl {minDate}",
 	"components.input-date.errorOutsideRange": "Rhaid i'r dyddiad fod rhwng {minDate} a {maxDate}",
-	"components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
 	"components.input-date.now": "Nawr",
+	"components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
 	"components.input-date.today": "Heddiw",
-	"components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
 	"components.input-number.hintDecimalDuplicate": "Mae degol eisoes yn y nifer hwn",
 	"components.input-number.hintDecimalIncorrectComma": "I ychwanegu degol defnyddiwch y nod coma \",”",
 	"components.input-number.hintDecimalIncorrectPeriod": "I ychwanegu degol defnyddiwch y nod atalnod llawn \".\"",
+	"components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
 	"components.input-search.clear": "Clirio'r Chwilio",
 	"components.input-search.defaultPlaceholder": "Chwilio...",
 	"components.input-search.search": "Chwilio",
 	"components.input-time-range.endTime": "Amser Gorffen",
 	"components.input-time-range.errorBadInput": "Rhaid i {startLabel} fod cyn {endLabel}",
 	"components.input-time-range.startTime": "Amser Dechrau",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toggle keyboard reorder mode.",
+	"components.list-item-drag-handle-tooltip.enter-key": "Enter",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Change the nesting level.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Left/Right",
+	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Move item up or down in the list.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "Up/Down",
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu'r saeth i lawr.",
+	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
+	"components.list-item-tooltip.enter-key": "Enter",
+	"components.list-item-tooltip.left-right-desc": "Move focus within current item.",
+	"components.list-item-tooltip.left-right-key": "Left/Right",
+	"components.list-item-tooltip.page-up-down-desc": "Move focus 5 items at a time.",
+	"components.list-item-tooltip.page-up-down-key": "Page Up/Down",
+	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
+	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
+	"components.list-item-tooltip.up-down-key": "Up/Down",
 	"components.menu-item-return.return": "Dychwelyd i'r ddewislen flaenorol.",
 	"components.menu-item-return.returnCurrentlyShowing": "Dychwelyd i'r ddewislen flaenorol. Rydych chi'n edrych ar {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",

package/lang/da.js

@@ -1,12 +1,11 @@
 /* eslint quotes: 0 */
-
 export default {
 	"components.alert.close": "Luk besked",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.calendar.notSelected": "Ikke valgt.",
 	"components.calendar.selected": "Valgt.",
 	"components.calendar.show": "Vis {month}",
-	"components.count-badge.plus" : "{number}+",
+	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Luk denne dialogboks",
 	"components.dropdown.close": "Luk",
 	"components.filter.clear": "Ryd",
@@ -17,9 +16,9 @@ export default {
 	"components.filter.clearAnnounceSingle": "Rydder filtre",
 	"components.filter.clearDescription": "Ryd filtre for: {filterName}",
 	"components.filter.clearDescriptionSingle": "Ryd filtre",
-	"components.filter.loading": "Indlæser filtre",
 	"components.filter.filterCountDescription": "{number, plural, zero {Ingen filtre anvendt.} one {1 filter anvendt.} other {{number} filtre anvendt.}}",
 	"components.filter.filters": "Filtre",
+	"components.filter.loading": "Indlæser filtre",
 	"components.filter.noFilters": "Ingen tilgængelige filtre",
 	"components.filter.searchResults": "{number, plural, zero {No search results} one {1 search result} other {{number} search results}}",
 	"components.filter.singleDimensionDescription": "Filtrer efter: {filterName}",
@@ -49,21 +48,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Datoen skal være før {maxDate}",
 	"components.input-date.errorMinDateOnly": "Datoen skal være efter {minDate}",
 	"components.input-date.errorOutsideRange": "Datoen skal være mellem {minDate} og {maxDate}",
-	"components.input-date.openInstructions": "Brug datoformatet {format}. Tryk på Pil ned eller Enter for at få adgang til minikalender.",
 	"components.input-date.now": "Nu",
+	"components.input-date.openInstructions": "Brug datoformatet {format}. Tryk på Pil ned eller Enter for at få adgang til minikalender.",
 	"components.input-date.today": "I dag",
-	"components.input-number.hintInteger": "Dette felt accepterer kun heltalsværdier (ingen decimaler)",
 	"components.input-number.hintDecimalDuplicate": "Der er allerede en decimal i dette tal",
 	"components.input-number.hintDecimalIncorrectComma": "Hvis du vil tilføje en decimal, skal du bruge komma-tegnet \",\"",
 	"components.input-number.hintDecimalIncorrectPeriod": "Hvis du vil tilføje en decimal, skal du bruge tegnet \".\"",
+	"components.input-number.hintInteger": "Dette felt accepterer kun heltalsværdier (ingen decimaler)",
 	"components.input-search.clear": "Ryd søgning",
 	"components.input-search.defaultPlaceholder": "Søg ...",
 	"components.input-search.search": "Søg",
 	"components.input-time-range.endTime": "Sluttidspunkt",
 	"components.input-time-range.errorBadInput": "{startLabel} skal være før {endLabel}",
 	"components.input-time-range.startTime": "Starttidspunkt",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toggle keyboard reorder mode.",
+	"components.list-item-drag-handle-tooltip.enter-key": "Enter",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Change the nesting level.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Left/Right",
+	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Move item up or down in the list.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "Up/Down",
 	"components.list-item-drag-handle.default": "Omarranger elementhandling for {name}",
 	"components.list-item-drag-handle.keyboard": "Omarranger element, aktuel position {currentPosition} ud af {size}. For at flytte dette element skal du trykke på pil op eller pil ned.",
+	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
+	"components.list-item-tooltip.enter-key": "Enter",
+	"components.list-item-tooltip.left-right-desc": "Move focus within current item.",
+	"components.list-item-tooltip.left-right-key": "Left/Right",
+	"components.list-item-tooltip.page-up-down-desc": "Move focus 5 items at a time.",
+	"components.list-item-tooltip.page-up-down-key": "Page Up/Down",
+	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
+	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
+	"components.list-item-tooltip.up-down-key": "Up/Down",
 	"components.menu-item-return.return": "Gå tilbage til forrige menu.",
 	"components.menu-item-return.returnCurrentlyShowing": "Gå tilbage til forrige menu. Du ser på {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",

package/lang/de.js

@@ -1,12 +1,11 @@
 /* eslint quotes: 0 */
-
 export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.calendar.notSelected": "Nicht ausgewählt.",
 	"components.calendar.selected": "Ausgewählt.",
 	"components.calendar.show": "{month} anzeigen",
-	"components.count-badge.plus" : "{number}+",
+	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Dieses Dialogfeld schließen",
 	"components.dropdown.close": "Schließen",
 	"components.filter.clear": "Löschen",
@@ -17,9 +16,9 @@ export default {
 	"components.filter.clearAnnounceSingle": "Filter werden gelöscht",
 	"components.filter.clearDescription": "Filter für {filterName} löschen",
 	"components.filter.clearDescriptionSingle": "Filter löschen",
-	"components.filter.loading": "Filter werden geladen",
 	"components.filter.filterCountDescription": "{number, plural, zero {Keine Filter angewendet.} one {1 Filter angewendet.} other {{number} Filter angewendet.}}",
 	"components.filter.filters": "Filter",
+	"components.filter.loading": "Filter werden geladen",
 	"components.filter.noFilters": "Keine verfügbaren Filter",
 	"components.filter.searchResults": "{number, plural, zero {Keine Suchergebnisse} one {1 Suchergebnis} other {{number} Suchergebnisse}}",
 	"components.filter.singleDimensionDescription": "Filtern nach: {filterName}",
@@ -49,21 +48,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Datum muss vor {maxDate} liegen",
 	"components.input-date.errorMinDateOnly": "Datum muss nach {minDate} liegen",
 	"components.input-date.errorOutsideRange": "Datum muss zwischen {minDate} und {maxDate} liegen",
-	"components.input-date.openInstructions": "Das Datumsformat {format} verwenden. Minikalender durch Abwärtspfeil oder durch Drücken der Eingabetaste aufrufen.",
 	"components.input-date.now": "Jetzt",
+	"components.input-date.openInstructions": "Das Datumsformat {format} verwenden. Minikalender durch Abwärtspfeil oder durch Drücken der Eingabetaste aufrufen.",
 	"components.input-date.today": "Heute",
-	"components.input-number.hintInteger": "Dieses Feld akzeptiert nur Ganzzahlen (keine Dezimalstellen)",
 	"components.input-number.hintDecimalDuplicate": "Diese Zahl enthält bereits eine Dezimale",
 	"components.input-number.hintDecimalIncorrectComma": "Verwenden Sie zum Hinzufügen einer Dezimalstelle das Komma \",“",
 	"components.input-number.hintDecimalIncorrectPeriod": "Verwenden Sie zum Hinzufügen einer Dezimalstelle das Zeichen \".“",
+	"components.input-number.hintInteger": "Dieses Feld akzeptiert nur Ganzzahlen (keine Dezimalstellen)",
 	"components.input-search.clear": "Suche löschen",
 	"components.input-search.defaultPlaceholder": "Suchen...",
 	"components.input-search.search": "Suchen",
 	"components.input-time-range.endTime": "Endzeit",
 	"components.input-time-range.errorBadInput": "{startLabel} muss vor {endLabel} liegen",
 	"components.input-time-range.startTime": "Startzeit",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toggle keyboard reorder mode.",
+	"components.list-item-drag-handle-tooltip.enter-key": "Enter",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Change the nesting level.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Left/Right",
+	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Move item up or down in the list.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "Up/Down",
 	"components.list-item-drag-handle.default": "Elementaktion für {name} neu anordnen",
 	"components.list-item-drag-handle.keyboard": "Elemente neu anordnen; aktuelle Position: {currentPosition} von {size}. Drücken Sie zum Bewegen dieses Elements auf den Pfeil nach oben oder den Pfeil nach unten.",
+	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
+	"components.list-item-tooltip.enter-key": "Enter",
+	"components.list-item-tooltip.left-right-desc": "Move focus within current item.",
+	"components.list-item-tooltip.left-right-key": "Left/Right",
+	"components.list-item-tooltip.page-up-down-desc": "Move focus 5 items at a time.",
+	"components.list-item-tooltip.page-up-down-key": "Page Up/Down",
+	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
+	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
+	"components.list-item-tooltip.up-down-key": "Up/Down",
 	"components.menu-item-return.return": "Zum vorherigen Menü zurückkehren.",
 	"components.menu-item-return.returnCurrentlyShowing": "Zum vorherigen Menü zurückkehren. Sie betrachten gerade {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",

package/lang/en.js

@@ -64,6 +64,22 @@ export default {
 	"components.input-time-range.startTime": "Start Time",
 	"components.list-item-drag-handle.default": "Reorder item action for {name}",
 	"components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
+	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
+	"components.list-item-tooltip.enter-key": "Enter",
+	"components.list-item-tooltip.enter-desc": "Activate the focused option.",
+	"components.list-item-tooltip.up-down-key": "Up/Down",
+	"components.list-item-tooltip.up-down-desc": "Move focus between list items.",
+	"components.list-item-tooltip.left-right-key": "Left/Right",
+	"components.list-item-tooltip.left-right-desc": "Move focus within current item.",
+	"components.list-item-tooltip.page-up-down-key": "Page Up/Down",
+	"components.list-item-tooltip.page-up-down-desc": "Move focus 5 items at a time.",
+	"components.list-item-drag-handle-tooltip.title": "Keyboard Controls for Reordering:",
+	"components.list-item-drag-handle-tooltip.enter-key": "Enter",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toggle keyboard reorder mode.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "Up/Down",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Move item up or down in the list.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Left/Right",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Change the nesting level.",
 	"components.menu-item-return.return": "Return to previous menu.",
 	"components.menu-item-return.returnCurrentlyShowing": "Return to previous menu. You are viewing {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}, {term2}",