@brightspace-ui/core 1.225.1 → 1.228.0

package/components/dialog/README.md

@@ -83,6 +83,12 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 - `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
 <!-- docs: end hidden content -->
 
+### Accessibility Properties
+
+| Attribute | Description |
+|--|--|
+| `describe-content` | When set, screen readers will announce the contents when opened. |
+
 ### Methods
 
 - `resize`: resizes the dialog based on specified `width` and measured content height

package/components/dialog/dialog.js

@@ -8,6 +8,7 @@ import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { heading3Styles } from '../typography/styles.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
@@ -27,6 +28,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			 */
 			async: { type: Boolean },
 
+			/**
+			 * Whether to read the contents of the dialog on open
+			 */
+			describeContent: { type: Boolean, attribute: 'describe-content' },
+
 			/**
 			 * The preferred width (unit-less) for the dialog
 			 */
@@ -100,6 +106,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 	constructor() {
 		super();
 		this.async = false;
+		this.describeContent = false;
 		this.width = 600;
 		this._handleResize = this._handleResize.bind(this);
 		this._handleResize();
@@ -151,9 +158,10 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			'd2l-footer-no-content': !this._hasFooterContent
 		};
 
+		if (!this._textId && this.describeContent) this._textId = getUniqueId();
 		const content = html`
 			${loading}
-			<div style=${styleMap(slotStyles)}><slot></slot></div>
+			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
 		if (!this._titleId) this._titleId = getUniqueId();
@@ -171,9 +179,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 				</div>
 			</div>
 		`;
+
+		const descId = (this.describeContent) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, role: 'dialog' },
+			{ labelId: this._titleId, descId: descId, role: 'dialog' },
 			topOverride
 		);
 	}

package/components/list/README.md

@@ -311,7 +311,7 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
 
 | Property | Type | Description |
 |---|---|---|
-| `slim` | Boolean | Whether to render a header with reduced whitespace |
+| `padding-type` | String | Header whitespace (`normal` (default), `slim`)|
 <!-- docs: end hidden content -->
 
 ## List Item [d2l-list-item]
@@ -354,16 +354,17 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
 | `disabled` | Boolean | Disables the input |
 | `draggable` |  Boolean | Whether the item is draggable |
 | `drag-handle-text` | String | The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode. |
+| `drag-target-handle-only` | Boolean | Make the drag target the drag handle only. |
 | `drop-nested` | Boolean | Whether nested items can be dropped on this item |
 | `drop-text` | String | Text to drag and drop |
 | `href` | String | Address of item link if navigable |
 | `key` | String | Value to identify item if selectable or draggable |
 | `label` | String | Explicitly defined label for the element |
 | `labelled-by` | String | The id of element that provides the label for this element |
+| `padding-type` | String | List item whitespace (`normal` (default), `slim`, `none`)|
 | `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
 | `selected` | Boolean | Whether the item is selected |
 | `skeleton` | Boolean | Renders the input as a skeleton loader |
-| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
 
 ### Events
 

package/components/list/list-header.js

@@ -14,10 +14,17 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	static get properties() {
 		return {
 			/**
+			 * @ignore
 			 * Whether to render a header with reduced whitespace
+			 * TODO: Remove
 			 * @type {boolean}
 			 */
-			slim: { reflect: true, type: Boolean }
+			slim: { reflect: true, type: Boolean },
+			/**
+			 * How much padding to render list items with
+			 * @type {'normal'|'slim'}
+			 */
+			paddingType: { type: String, attribute: 'padding-type' },
 		};
 	}
 
@@ -36,7 +43,10 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 				margin-top: 6px;
 				min-height: 58px;
 			}
-			:host([slim]) .d2l-list-header-container {
+			:host([slim]) .d2l-list-header-container { /* TODO: Remove */
+				min-height: 36px;
+			}
+			:host([padding-type="slim"]) .d2l-list-header-container {
 				min-height: 36px;
 			}
 			d2l-selection-select-all {
@@ -64,6 +74,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
 	constructor() {
 		super();
 		this.slim = false;
+		this.paddingType = 'normal';
 	}
 
 	render() {

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

@@ -54,7 +54,19 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			 */
 			breakpoints: { type: Array },
 			/**
+			 * Whether to allow the drag target to be the handle only rather than the entire cell
+			 * @type {boolean}
+			 */
+			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+			/**
+			 * How much padding to render list items with
+			 * @type {'normal'|'slim'|'none'}
+			 */
+			paddingType: { type: String, attribute: 'padding-type' },
+			/**
+			 * @ignore
 			 * Whether to render the list-item with reduced whitespace.
+			 * TODO: Remove in favor of padding-type="slim"
 			 * @type {boolean}
 			 */
 			slim: { type: Boolean },
@@ -106,6 +118,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				border-bottom: 1px solid var(--d2l-color-mica);
 				border-top: 1px solid var(--d2l-color-mica);
 			}
+			:host([padding-type="none"]) d2l-list-item-generic-layout {
+				border-bottom: 0;
+				border-top: 0;
+			}
 			d2l-list-item-generic-layout[data-separators="none"] {
 				border-bottom: 1px solid transparent;
 				border-top: 1px solid transparent;
@@ -143,10 +159,18 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 				justify-content: stretch;
 				padding: 0.55rem 0;
 			}
-			:host([slim]) [slot="content"] {
+			:host([slim]) [slot="content"] { /* TODO, remove */
 				padding-bottom: 0.35rem;
 				padding-top: 0.4rem;
 			}
+			:host([padding-type="slim"]) [slot="content"] {
+				padding-bottom: 0.35rem;
+				padding-top: 0.4rem;
+			}
+			:host([padding-type="none"]) [slot="content"] {
+				padding-bottom: 0;
+				padding-top: 0;
+			}
 			[slot="content"] ::slotted([slot="illustration"]),
 			[slot="content"] .d2l-list-item-illustration * {
 				border-radius: 6px;
@@ -219,7 +243,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 			.d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-left: 0.9rem;
 			}
-			:host([slim]) d2l-selection-input {
+			:host([slim]) d2l-selection-input { /* TODO, remove */
+				margin-bottom: 0.55rem;
+				margin-top: 0.55rem;
+			}
+			:host([padding-type="slim"]) d2l-selection-input {
 				margin-bottom: 0.55rem;
 				margin-top: 0.55rem;
 			}
@@ -276,6 +304,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		super();
 		this.breakpoints = defaultBreakpoints;
 		this.slim = false;
+		this.paddingType = 'normal';
 		this._breakpoint = 0;
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
@@ -449,7 +478,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 					?grid-active="${this.role === 'rowgroup'}">
 					${this._renderDropTarget()}
 					${this._renderDragHandle(this._renderOutsideControl)}
-					${this._renderDragTarget(this._renderOutsideControlAction)}
+					${this._renderDragTarget(this.dragTargetHandleOnly ? this._renderOutsideControlHandleOnly : this._renderOutsideControlAction)}
 					${this.selectable ? html`
 					<div slot="control">${this._renderCheckbox()}</div>
 					<div slot="control-action"
@@ -497,6 +526,10 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
 		return html`<div slot="outside-control-action" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragTarget}</div>`;
 	}
 
+	_renderOutsideControlHandleOnly(dragHandle) {
+		return html`<div slot="outside-control" @mouseenter="${this._onMouseEnter}" @mouseleave="${this._onMouseLeave}">${dragHandle}</div>`;
+	}
+
 	_renderTooltipContent() {
 		return html`
 			<div>${this.localize('components.list-item-tooltip.title')}</div>

package/custom-elements.json

@@ -1599,6 +1599,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "describe-content",
+          "description": "Whether to read the contents of the dialog on open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "description": "The preferred width (unit-less) for the dialog",
@@ -1625,6 +1631,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "describeContent",
+          "attribute": "describe-content",
+          "description": "Whether to read the contents of the dialog on open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "attribute": "width",
@@ -6458,6 +6471,11 @@
       "name": "d2l-demo-list-item-custom",
       "path": "./components/list/demo/list-item-custom.js",
       "attributes": [
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -6465,10 +6483,10 @@
           "default": "[842,636,580,0]"
         },
         {
-          "name": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
-          "type": "boolean",
-          "default": "false"
+          "name": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'|'none'",
+          "default": "\"normal\""
         },
         {
           "name": "drag-handle-text",
@@ -6533,6 +6551,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -6542,11 +6566,16 @@
         },
         {
           "name": "slim",
-          "attribute": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'|'none'",
+          "default": "\"normal\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -6645,19 +6674,24 @@
       "description": "A header for list components containing select-all, etc.",
       "attributes": [
         {
-          "name": "slim",
-          "description": "Whether to render a header with reduced whitespace",
-          "type": "boolean",
-          "default": "false"
+          "name": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'",
+          "default": "\"normal\""
         }
       ],
       "properties": [
         {
           "name": "slim",
-          "attribute": "slim",
-          "description": "Whether to render a header with reduced whitespace",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'",
+          "default": "\"normal\""
         }
       ],
       "slots": [
@@ -6672,6 +6706,11 @@
       "path": "./components/list/list-item-button.js",
       "description": "A component for a \"listitem\" child within a list. It provides semantics, basic layout, breakpoints for responsiveness, a link for navigation, and selection.",
       "attributes": [
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -6679,10 +6718,10 @@
           "default": "[842,636,580,0]"
         },
         {
-          "name": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
-          "type": "boolean",
-          "default": "false"
+          "name": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'|'none'",
+          "default": "\"normal\""
         },
         {
           "name": "drag-handle-text",
@@ -6747,6 +6786,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -6756,11 +6801,16 @@
         },
         {
           "name": "slim",
-          "attribute": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'|'none'",
+          "default": "\"normal\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -7042,6 +7092,11 @@
           "description": "Address of item link if navigable",
           "type": "string"
         },
+        {
+          "name": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "description": "Breakpoints for responsiveness in pixels. There are four different breakpoints and only the four largest breakpoints will be used.",
@@ -7049,10 +7104,10 @@
           "default": "[842,636,580,0]"
         },
         {
-          "name": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
-          "type": "boolean",
-          "default": "false"
+          "name": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'|'none'",
+          "default": "\"normal\""
         },
         {
           "name": "drag-handle-text",
@@ -7129,6 +7184,12 @@
           "description": "Address of item link if navigable",
           "type": "string"
         },
+        {
+          "name": "dragTargetHandleOnly",
+          "attribute": "drag-target-handle-only",
+          "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
+          "type": "boolean"
+        },
         {
           "name": "breakpoints",
           "attribute": "breakpoints",
@@ -7138,11 +7199,16 @@
         },
         {
           "name": "slim",
-          "attribute": "slim",
-          "description": "Whether to render the list-item with reduced whitespace.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "paddingType",
+          "attribute": "padding-type",
+          "description": "How much padding to render list items with",
+          "type": "'normal'|'slim'|'none'",
+          "default": "\"normal\""
+        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",

package/lang/ar.js

@@ -1,11 +1,12 @@
 /* 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": "مسح",
@@ -16,9 +17,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}",
@@ -48,37 +49,37 @@ export default {
 	"components.input-date.errorMaxDateOnly": "يجب أن يكون التاريخ قبل {maxDate}",
 	"components.input-date.errorMinDateOnly": "يجب أن يكون التاريخ بعد {minDate}",
 	"components.input-date.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
-	"components.input-date.now": "الآن",
 	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
+	"components.input-date.now": "الآن",
 	"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.list-item-tooltip.title": "التنقل عبر لوحة المفاتيح للقوائم:",
+	"components.list-item-tooltip.enter-key": "إدخال",
+	"components.list-item-tooltip.enter-desc": "تنشيط خيار التركيز.",
+	"components.list-item-tooltip.up-down-key": "أعلى/أسفل",
+	"components.list-item-tooltip.up-down-desc": "نقل التركيز بين مواد القائمة.",
+	"components.list-item-tooltip.left-right-key": "يسار/يمين",
+	"components.list-item-tooltip.left-right-desc": "نقل التركيز ضمن المادة الحالية.",
+	"components.list-item-tooltip.page-up-down-key": "صفحة إلى الأعلى/الأسفل",
+	"components.list-item-tooltip.page-up-down-desc": "نقل التركيز لـ 5 مواد في كل مرة.",
+	"components.list-item-drag-handle-tooltip.title": "عناصر التحكم بلوحة المفاتيح لإعادة الترتيب:",
+	"components.list-item-drag-handle-tooltip.enter-key": "إدخال",
+	"components.list-item-drag-handle-tooltip.enter-desc": "تبديل وضع إعادة ترتيب لوحة المفاتيح.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "أعلى/أسفل",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "نقل المادة إلى الأعلى أو الأسفل في القائمة.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "يسار/يمين",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "غيِّر مستوى التداخل.",
 	"components.menu-item-return.return": "العودة إلى القائمة السابقة.",
 	"components.menu-item-return.returnCurrentlyShowing": "العودة إلى القائمة السابقة. يتم عرض {menuTitle}.",
 	"components.meter-mixin.commaSeperatedAria": "{term1}، ‏{term2}",

package/lang/cy.js

@@ -1,11 +1,12 @@
 /* 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",
@@ -16,9 +17,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}",
@@ -48,37 +49,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.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.now": "Nawr",
 	"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.list-item-tooltip.title": "Llywio Bysellfwrdd ar gyfer Rhestrau:",
+	"components.list-item-tooltip.enter-key": "Nodi",
+	"components.list-item-tooltip.enter-desc": "Gweithredu'r opsiwn ffocysu.",
+	"components.list-item-tooltip.up-down-key": "I Fyny/I Lawr",
+	"components.list-item-tooltip.up-down-desc": "Symud y ffocws rhwng eitemau rhestr.",
+	"components.list-item-tooltip.left-right-key": "Chwith/De",
+	"components.list-item-tooltip.left-right-desc": "Symud y ffocws o fewn yr eitem bresennol.",
+	"components.list-item-tooltip.page-up-down-key": "Tudalen I Fyny/I Lawr",
+	"components.list-item-tooltip.page-up-down-desc": "Symud y ffocws 5 eitem ar y tro.",
+	"components.list-item-drag-handle-tooltip.title": "Rheolaethau bysellfwrdd ar gyfer aildrefnu:",
+	"components.list-item-drag-handle-tooltip.enter-key": "Nodi",
+	"components.list-item-drag-handle-tooltip.enter-desc": "Toglo'r modd aildrefnu bysellfwrdd.",
+	"components.list-item-drag-handle-tooltip.up-down-key": "I Fyny/I Lawr",
+	"components.list-item-drag-handle-tooltip.up-down-desc": "Symud yr eitem i fyny neu i lawr yn y rhestr.",
+	"components.list-item-drag-handle-tooltip.left-right-key": "Chwith/De",
+	"components.list-item-drag-handle-tooltip.left-right-desc": "Newid y lefel nythu.",
 	"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}",