From bd91bb6ee083f6d64dde070efd872ca680c9f59e Mon Sep 17 00:00:00 2001 From: Pareesh Gupta Date: Mon, 14 Oct 2024 14:11:56 +0530 Subject: [PATCH] feat: Revert Drag and Drop support via keyboard and add new marketo icons (#361) Co-authored-by: Pareesh Gupta --- .../src/tests/test.Dialog.js | 4 +- .../src/resources/spectrum-icons.svg | 2 +- coral-component-table/examples/index.html | 24 +- coral-component-table/i18n/translations.js | 4 +- coral-component-table/src/scripts/Table.js | 317 +----------------- coral-component-table/src/scripts/TableRow.js | 25 +- coral-component-table/src/tests/test.Table.js | 10 - coral-dragaction/src/scripts/DragAction.js | 118 ------- coral-dragaction/src/tests/test.DragAction.js | 6 +- coral-gulp/configs/karma.conf.js | 5 +- coral-utils/src/scripts/Commons.js | 26 -- coral-utils/src/scripts/Events.js | 32 -- 12 files changed, 39 insertions(+), 534 deletions(-) diff --git a/coral-component-dialog/src/tests/test.Dialog.js b/coral-component-dialog/src/tests/test.Dialog.js index 8e1d67598a..2910f48355 100644 --- a/coral-component-dialog/src/tests/test.Dialog.js +++ b/coral-component-dialog/src/tests/test.Dialog.js @@ -29,9 +29,7 @@ describe('Dialog', function () { clientX: x, clientY: y, bubbles: true, - cancelable: true, - pointerType: 'mouse', - detail: 1 + cancelable: true }); }; diff --git a/coral-component-icon/src/resources/spectrum-icons.svg b/coral-component-icon/src/resources/spectrum-icons.svg index bdfc864ae8..a0cdc97e03 100644 --- a/coral-component-icon/src/resources/spectrum-icons.svg +++ b/coral-component-icon/src/resources/spectrum-icons.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/coral-component-table/examples/index.html b/coral-component-table/examples/index.html index f588cae7de..0145224ac3 100644 --- a/coral-component-table/examples/index.html +++ b/coral-component-table/examples/index.html @@ -186,7 +186,7 @@

Checkbox selection

- + Charlie February 15, 2012 @@ -197,7 +197,7 @@

Checkbox selection

- + Delta May 16, 2012 @@ -208,7 +208,7 @@

Checkbox selection

- + Alpha January 28, 2012 @@ -219,7 +219,7 @@

Checkbox selection

- + Beta December 1, 2011 @@ -230,7 +230,7 @@

Checkbox selection

- + Charlie February 15, 2012 @@ -240,7 +240,7 @@

Checkbox selection

- + Delta May 16, 2012 @@ -289,7 +289,7 @@

ListView selection

- + Charlie February 15, 2012 @@ -299,7 +299,7 @@

ListView selection

- + Delta May 16, 2012 @@ -309,7 +309,7 @@

ListView selection

- + Alpha January 28, 2012 @@ -319,7 +319,7 @@

ListView selection

- + Beta December 1, 2011 @@ -329,7 +329,7 @@

ListView selection

- + Charlie February 15, 2012 @@ -339,7 +339,7 @@

ListView selection

- + Delta May 16, 2012 diff --git a/coral-component-table/i18n/translations.js b/coral-component-table/i18n/translations.js index 3dad154787..bb6212962e 100644 --- a/coral-component-table/i18n/translations.js +++ b/coral-component-table/i18n/translations.js @@ -17,9 +17,7 @@ export default { "sorted by column {0}, in ascending order": "sorted by column {0} in ascending order", "sorted by column {0}, in descending order": "sorted by column {0} in descending order", ", checked": ", checked", - ", unchecked": ", unchecked", - "reordering": "reordering", - "reordered to row {0}": "reordered to row {0}", + ", unchecked": ", unchecked" }, "de-DE": { "Select": "Auswählen", diff --git a/coral-component-table/src/scripts/Table.js b/coral-component-table/src/scripts/Table.js index 21d2cb8812..b35ba55ec4 100644 --- a/coral-component-table/src/scripts/Table.js +++ b/coral-component-table/src/scripts/Table.js @@ -38,7 +38,7 @@ import { getIndexOf, divider } from './TableUtil'; -import {events, transform, validate, commons, i18n, Keys} from '../../../coral-utils'; +import {transform, validate, commons, i18n, Keys} from '../../../coral-utils'; const CLASSNAME = '_coral-Table-wrapper'; @@ -133,13 +133,6 @@ const Table = Decorator(class extends BaseComponent(HTMLTableElement) { 'coral-dragaction:drag tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDrag', 'coral-dragaction:dragover tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDragOver', 'coral-dragaction:dragend tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDragEnd', - // a11y dnd - 'key:space tbody[is="coral-table-body"] [coral-table-roworder]:not([disabled])': '_onKeyboardDrag', - 'click tbody[is="coral-table-body"] tr[is="coral-table-row"] [coral-table-roworder]:not([disabled])': '_onDragHandleClick', - 'coral-dragaction:dragonkeyspace tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDragOnKeySpace', - 'coral-dragaction:dragoveronkeyarrowdown tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDragOverOnKeyArrowDown', - 'coral-dragaction:dragoveronkeyarrowup tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDragOverOnKeyArrowUp', - 'coral-dragaction:dragendonkey tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowDragOverOnKeyEnter', // a11y 'mousedown tbody[is="coral-table-body"] [coral-table-rowselect]': '_onRowDown', 'key:enter tbody[is="coral-table-body"] tr[is="coral-table-row"]': '_onRowSelect', @@ -578,18 +571,10 @@ const Table = Decorator(class extends BaseComponent(HTMLTableElement) { /** @private */ _onRowOrder(event) { - if (events.isVirtualEvent(event)) { - return; - } - const table = this; const row = event.target.closest('tr[is="coral-table-row"]'); if (row && table.orderable) { - if (row.dragAction && row.dragAction.handle) { - this._unwrapDragHandle(row.dragAction.handle); - } - const head = table.head; const body = table.body; const sticky = head && head.sticky; @@ -1138,19 +1123,16 @@ const Table = Decorator(class extends BaseComponent(HTMLTableElement) { const table = this; const body = table.body; const dragElement = event.detail.dragElement; - const dragAction = event.detail.dragElement.dragAction; - const dragData = dragAction._dragData; - const before = dragData.placeholder ? dragData.placeholder.nextElementSibling : null; + const dragData = dragElement.dragAction._dragData; + const before = dragData.placeholder.nextElementSibling; // Clean up table.classList.remove(IS_FIRST_ITEM_DRAGGED); table.classList.remove(IS_LAST_ITEM_DRAGGED); - if (dragData.placeholder && dragData.placeholder.parentNode) { - dragData.placeholder.parentNode.removeChild(dragData.placeholder); - } - dragAction.destroy(); + body.removeChild(dragData.placeholder); + dragElement.dragAction.destroy(); // Restore specific styling dragElement.setAttribute('style', dragData.style.row || ''); @@ -1192,248 +1174,6 @@ const Table = Decorator(class extends BaseComponent(HTMLTableElement) { }); } - /** @private */ - _wrapDragHandle(handle, callback = () => {}) { - if(!handle.closest('span[role="application"]')) { - const span = document.createElement('span'); - span.setAttribute('role', 'application'); - span.setAttribute('aria-label', i18n.get('reordering')); - handle.parentNode.insertBefore(span, handle); - span.appendChild(handle); - handle.selected = true; - handle.setAttribute('aria-pressed', 'true'); - window.requestAnimationFrame(() => callback()); - } - } - - /** @private */ - _unwrapDragHandle(handle, callback = () => {}) { - const span = handle && handle.closest('span[role="application"]'); - - if (handle) { - handle.selected = false; - handle.removeAttribute('aria-pressed'); - handle.removeAttribute('aria-describedby'); - } - window.requestAnimationFrame(() => { - if (span) { - span.parentNode.insertBefore(handle, span); - span.remove(); - } - callback(); - }); - } - - /** @private */ - _onKeyboardDrag(event) { - const table = this; - const row = event.target.closest('tr[is="coral-table-row"]'); - - if (row && table.orderable) { - event.preventDefault(); - event.stopPropagation(); - - if (row.dragAction && row.dragAction.isKeyboardDragging) { - return; - } - - const style = row.getAttribute('style'); - const index = getIndexOf(row); - const oldBefore = row.nextElementSibling; - const dragAction = new DragAction(row); - - dragAction.axis = 'vertical'; - - // Handle the scroll in table - dragAction.scroll = false; - - // Specify selection handle directly on the row if none found - const handle = row.querySelector('[coral-table-roworder]'); - dragAction.handle = handle; - - // Wrap the drag handle button in a span with role="application", - // to force Windows screen readers into forms mode while dragging. - if (event.target === handle) { - this._wrapDragHandle(handle, () => handle.focus()); - } - - // The row placeholder indicating where the dragged element will be dropped - const placeholder = row.cloneNode(true); - placeholder.classList.add('_coral-Table-row--placeholder'); - - // Store the data to avoid re-reading the layout on drag events - const dragData = { - placeholder: placeholder, - index: index, - oldBefore: oldBefore, - // Backup styles to restore them later - style: { - row: style - } - }; - row.dragAction._dragData = dragData; - } - } - - _onDragHandleClick(event) { - const row = event.target.closest('tr[is="coral-table-row"]'); - if (!row.dragAction) { - this._onKeyboardDrag(event); - row.dragAction._isKeyboardDrag = true; - } else if (row.dragAction._isKeyboardDrag) { - row.dragAction._isKeyboardDrag = undefined; - } - } - - /** @private */ - _onRowDragOnKeySpace(event) { - event.preventDefault(); - - const dragElement = event.detail.dragElement; - const dragData = dragElement.dragAction._dragData; - - if (dragElement.dragAction._isKeyboardDrag) { - return; - } - - dragData.style.cells = []; - getCells(dragElement).forEach((cell) => { - // Backup styles to restore them later - dragData.style.cells.push(cell.getAttribute('style')); - // Cells will shrink otherwise - cell.style.width = window.getComputedStyle(cell).width; - }); - } - - /** @private */ - _onRowDragOverOnKeyArrowDown(event) { - const table = this; - const body = table.body; - const dragElement = event.detail.dragElement; - const items = getRows([body]); - const index = getIndexOf(dragElement); - const dragData = dragElement.dragAction._dragData; - const handle = dragElement.dragAction.handle; - const rowHeader = dragElement.rowHeader; - - event.preventDefault(); - - // We cannot rely on :focus since the row is being moved in the dom while dnd - dragElement.classList.add('is-focused'); - - if (dragElement === items[items.length - 1]) { - for (let position = 0; position < items.length - 1; position++) { - body.appendChild(items[position]); - } - body.insertBefore(items[0], items[items.length - 2].nextElementSibling); - } else { - body.insertBefore(items[index + 1], items[index]); - } - - // Restore specific styling - dragElement.setAttribute('style', dragData.style.row || ''); - getCells(dragElement).forEach((cell, i) => { - if (dragData.style.cells) { - cell.setAttribute('style', dragData.style.cells[i] || ''); - } - }); - - if (handle) { - handle.focus(); - this._announceLiveRegion((rowHeader ? rowHeader.textContent + ' ' : '') + i18n.get('reordered to row {0}', [getIndexOf(dragElement) + 1]), 'assertive'); - } - - dragElement.scrollIntoView({block: 'nearest'}); - } - - /** @private */ - _onRowDragOverOnKeyArrowUp(event) { - const table = this; - const body = table.body; - const dragElement = event.detail.dragElement; - const items = getRows([body]); - const index = getIndexOf(dragElement); - const dragData = dragElement.dragAction._dragData; - const handle = dragElement.dragAction.handle; - const rowHeader = dragElement.rowHeader; - - event.preventDefault(); - - // We cannot rely on :focus since the row is being moved in the dom while dnd - dragElement.classList.add('is-focused'); - - if (dragElement === items[0]) { - for (let position = 0; position < items.length - 2; position++) { - body.insertBefore(items[position + 1], items[0]); - } - body.insertBefore(items[items.length - 1], items[1]); - } else { - body.insertBefore(items[index - 1], items[index].nextElementSibling); - } - - // Restore specific styling - dragElement.setAttribute('style', dragData.style.row || ''); - getCells(dragElement).forEach((cell, i) => { - if (dragData.style.cells) { - cell.setAttribute('style', dragData.style.cells[i] || ''); - } - }); - - if (handle) { - handle.focus(); - this._announceLiveRegion((rowHeader ? rowHeader.textContent + ' ' : '') + i18n.get('reordered to row {0}', [getIndexOf(dragElement) + 1]), 'assertive'); - } - - dragElement.scrollIntoView({block: 'nearest'}); - } - - /** @private */ - _onRowDragOverOnKeyEnter(event) { - const table = this; - const dragElement = event.detail.dragElement; - const dragAction = dragElement.dragAction; - const dragData = dragAction._dragData; - const handle = dragAction.handle; - - if (dragAction._isKeyboardDrag) { - dragAction._isKeyboardDrag = undefined; - return; - } - - // Trigger the event on table - const beforeEvent = table.trigger('coral-table:beforeroworder', { - row: dragElement, - before: dragData.oldBefore - }); - - if (!beforeEvent.defaultPrevented && dragData.oldBefore !== dragElement.nextElementSibling) { - // Trigger the order event if the row position changed - table.trigger('coral-table:roworder', { - row: dragElement, - oldBefore: dragData.oldBefore, - before: dragElement.nextElementSibling - }); - } - - dragAction.destroy(); - - const isFocusWithinDragElement = dragElement.contains(document.activeElement) || dragElement === document.activeElement; - const isFocusOnHandle = handle && handle === document.activeElement; - - // Refocus the dragged element manually - const callback = () => { - dragElement.classList.remove('is-focused'); - if (isFocusWithinDragElement) { - table._focusItem(dragElement, true); - } - if (isFocusOnHandle) { - handle.focus(); - } - }; - - this._unwrapDragHandle(handle, callback); - } - /** @private */ _onRowMultipleChanged(event) { event.stopImmediatePropagation(); @@ -1882,48 +1622,25 @@ const Table = Decorator(class extends BaseComponent(HTMLTableElement) { headerCell.setAttribute('aria-sort', column.sortableDirection === sortableDirection.DEFAULT ? 'none' : column.sortableDirection); if (column.sortableDirection === sortableDirection.DEFAULT) { - this._announceLiveRegion(); + this._elements.liveRegion.innerText = ''; } else { const textContent = headerCell.content.textContent.trim(); if (textContent.length) { // Set live region to true so that sort description string will be announced. - this._announceLiveRegion(i18n.get(`sorted by column {0} in ${column.sortableDirection} order`, textContent)); + this._elements.liveRegion.setAttribute('aria-live', 'polite'); + this._elements.liveRegion.removeAttribute('aria-hidden'); + this._elements.liveRegion.innerText = i18n.get(`sorted by column {0} in ${column.sortableDirection} order`, textContent); + + // @a11y wait 2.5 seconds to give screen reader enough time to announce the live region before silencing the it. + window.setTimeout(() => { + this._elements.liveRegion.setAttribute('aria-live', 'off'); + this._elements.liveRegion.setAttribute('aria-hidden', 'true'); + }, 2500); } } } } - /** @private */ - _announceLiveRegion(text, politeness = 'polite') { - - if (this._liveRegionTimeout) { - window.clearTimeout(this._liveRegionTimeout); - } - - if (!text || !text.length) { - this._elements.liveRegion.innerText = ''; - return; - } - - // Set live region to true so that text string will be announced. - this._elements.liveRegion.setAttribute('aria-live', politeness); - this._elements.liveRegion.removeAttribute('aria-hidden'); - if (this._isSorted()) { - this._elements.liveRegion.innerText = text; - } else { - this._liveRegionTimeout = window.setTimeout(() => this._elements.liveRegion.innerText = text, 100); - } - - // @a11y wait 2.5 seconds to give screen reader enough time to announce the live region before silencing the it. - window.setTimeout(() => { - this._elements.liveRegion.setAttribute('aria-live', 'off'); - this._elements.liveRegion.setAttribute('aria-hidden', 'true'); - if (!this._isSorted()) { - this._elements.liveRegion.innerText = ''; - } - }, 2500); - } - _onColumnHiddenChanged(event) { event.stopImmediatePropagation(); @@ -2745,10 +2462,6 @@ const Table = Decorator(class extends BaseComponent(HTMLTableElement) { headerCell.setAttribute('role', 'rowheader'); } headerCell.setAttribute('scope', scope); - - if(headerCell.hasAttribute('sortable')){ - headerCell.content.setAttribute('role', 'button'); - } } /** @private */ diff --git a/coral-component-table/src/scripts/TableRow.js b/coral-component-table/src/scripts/TableRow.js index 10732302ab..b760c7cc34 100644 --- a/coral-component-table/src/scripts/TableRow.js +++ b/coral-component-table/src/scripts/TableRow.js @@ -181,18 +181,6 @@ const TableRow = Decorator(class extends BaseComponent(HTMLTableRowElement) { return this._items; } - /** - * The row header element for the row. - * @type {HTMLElement} - * @readonly - */ - get rowHeader () { - return this.items.getAll().filter(cell => { - return (cell.getAttribute('role') === 'rowheader' || - (cell.tagName === 'TH' && cell.getAttribute('scope') === 'row')); - })[0]; - } - _triggerChangeEvent() { const selectedItems = this.selectedItems; this.trigger('coral-table-row:_change', { @@ -441,14 +429,11 @@ const TableRow = Decorator(class extends BaseComponent(HTMLTableRowElement) { // @a11y provide a more explicit label for the checkbox than just "Select" if (this.hasAttribute('aria-labelledby')) { - // Wait for the next frame to ensure the selectHandle has initialized _elements object. - window.requestAnimationFrame(() => { - let ids = this.getAttribute('aria-labelledby') - .split(/\s+/g) - .filter(id => selectHandle._elements.id !== id && this._elements.accessibilityState.id !== id) - .join(' '); - selectHandle.labelledBy = selectHandle._elements.id + ' ' + ids; - }); + let ids = this.getAttribute('aria-labelledby') + .split(' ') + .filter(id => selectHandle._elements.input.id !== id && this._elements.accessibilityState.id !== id) + .join(' '); + selectHandle.labelledBy = selectHandle._elements.input.id + ' ' + ids; } } } diff --git a/coral-component-table/src/tests/test.Table.js b/coral-component-table/src/tests/test.Table.js index a036b666d7..3cffd26f2c 100644 --- a/coral-component-table/src/tests/test.Table.js +++ b/coral-component-table/src/tests/test.Table.js @@ -20,8 +20,6 @@ const dragHeaderCellTo = (headerCell, direction) => { var x = headerCell.getBoundingClientRect().width * 2 * direction; // Initiates the dragAction headerCell.dispatchEvent(new MouseEvent('mousedown', { - pointerType: 'mouse', - detail: 1, bubbles: true })); // Triggering twice is enough to perform the swap @@ -43,8 +41,6 @@ const dragRowTo = (row, direction) => { var y = row.getBoundingClientRect().height * 2 * direction; // Initiates the dragAction row.dispatchEvent(new MouseEvent('mousedown', { - pointerType: 'mouse', - detail: 1, bubbles: true })); // Triggering twice is enough to perform the swap @@ -341,8 +337,6 @@ describe('Table', function () { setTimeout(function () { // Initiates the dragAction item.dispatchEvent(new MouseEvent('mousedown', { - pointerType: 'mouse', - detail: 1, bubbles: true })); @@ -1506,8 +1500,6 @@ describe('Table', function () { row.setAttribute('disabled', ''); row.dispatchEvent(new MouseEvent('mousedown', { - pointerType: 'mouse', - detail: 1, bubbles: true })); @@ -2029,8 +2021,6 @@ describe('Table', function () { helpers.next(() => { table.body.rows[1].dispatchEvent(new MouseEvent('mousedown', { - pointerType: 'mouse', - detail: 1, bubbles: true, shiftKey: true })); diff --git a/coral-dragaction/src/scripts/DragAction.js b/coral-dragaction/src/scripts/DragAction.js index 2dc9777129..68d2e02866 100644 --- a/coral-dragaction/src/scripts/DragAction.js +++ b/coral-dragaction/src/scripts/DragAction.js @@ -244,7 +244,6 @@ class DragAction { this._drag = this._drag.bind(this); this._dragEnd = this._dragEnd.bind(this); - this._dragOnKeyEnd = this._dragOnKeyEnd.bind(this); events.on(`touchmove.DragAction${this._id}`, this._drag); events.on(`mousemove.DragAction${this._id}`, this._drag); @@ -308,17 +307,11 @@ class DragAction { handle._dragEvents = handle._dragEvents || new Vent(handle); handle._dragEvents.on('mousedown.DragAction', this._dragStart.bind(this)); handle._dragEvents.on('touchstart.DragAction', this._dragStart.bind(this)); - handle._dragEvents.on('keydown.DragAction', this._dragOnKeyDown.bind(this)); - handle._dragEvents.on('keyup.DragAction', this._dragOnKeyUp.bind(this)); - handle._dragEvents.on('focusout.DragAction', this._dragOnFocusOut.bind(this)); handle.classList.add(OPEN_HAND_CLASS); }); } else { this._dragEvents.on('touchstart.DragAction', this._dragStart.bind(this)); this._dragEvents.on('mousedown.DragAction', this._dragStart.bind(this)); - this._dragEvents.on('keydown.DragAction', this._dragOnKeyDown.bind(this)); - this._dragEvents.on('keyup.DragAction', this._dragOnKeyUp.bind(this)); - this._dragEvents.on('focusout.DragAction', this._dragOnFocusOut.bind(this)); this._dragElement.classList.add(OPEN_HAND_CLASS); } } else { @@ -326,9 +319,6 @@ class DragAction { this._handles = []; this._dragEvents.on('touchstart.DragAction', this._dragStart.bind(this)); this._dragEvents.on('mousedown.DragAction', this._dragStart.bind(this)); - this._dragEvents.on('keydown.DragAction', this._dragOnKeyDown.bind(this)); - this._dragEvents.on('keyup.DragAction', this._dragOnKeyUp.bind(this)); - this._dragEvents.on('focusout.DragAction', this._dragOnFocusOut.bind(this)); this._dragElement.classList.add(OPEN_HAND_CLASS); } } @@ -409,10 +399,6 @@ class DragAction { /** @private */ _dragStart(event) { - if (events.isVirtualEvent(event)) { - return; - } - // Container this._container = getViewContainer(this._dragElement) || document.body; @@ -696,75 +682,6 @@ class DragAction { } } - /** @private */ - _dragOnKeyDown(event) { - switch (event.code) { - case 'Space': - case 'ArrowDown': - case 'ArrowUp': - case 'Enter': - case 'Escape': - event.preventDefault(); - break; - } - } - - /** @private */ - _dragOnKeyUp(event) { - switch (event.code) { - case 'Space': - if (!this.isKeyboardDragging) { - this._dragEvents.dispatch('coral-dragaction:dragonkeyspace', { - detail: { - dragElement: this._dragElement - } - }); - this.isKeyboardDragging = true; - } else { - this._dragOnKeyEnd(); - } - break; - case 'ArrowDown': - this._dragEvents.dispatch('coral-dragaction:dragoveronkeyarrowdown', { - detail: { - dragElement: this._dragElement - } - }); - break; - case 'ArrowUp': - this._dragEvents.dispatch('coral-dragaction:dragoveronkeyarrowup', { - detail: { - dragElement: this._dragElement - } - }); - break; - case 'Enter': - case 'Escape': - this._dragOnKeyEnd(); - break; - } - } - - /** @private */ - _dragOnFocusOut(event) { - window.setTimeout(() => { - if (document.activeElement === event.target) { - return; - } - this._dragOnKeyEnd(); - }, 0); - } - - /** @private */ - _dragOnKeyEnd() { - this._dragEvents.dispatch('coral-dragaction:dragendonkey', { - detail: { - dragElement: this._dragElement - } - }); - this.isKeyboardDragging = false; - } - /** Remove draggable actions @@ -927,41 +844,6 @@ class DragAction { @property {Number} pageY The mouse position relative to the top edge of the document. */ - - /** - Triggered when the {@link DragAction#dragElement} is selected to be dragged. - @typedef {CustomEvent} coral-dragaction:dragonkeyspace - @property {HTMLElement} dragElement - The dragged element - */ - - /** - Triggered when the {@link DragAction#dragElement} is moved on arrow down pressed. - @typedef {CustomEvent} coral-dragaction:dragoveronkeyarrowdown - @property {HTMLElement} dragElement - The dragged element - */ - - /** - Triggered when the {@link DragAction#dragElement} is moved on arrow up pressed. - @typedef {CustomEvent} coral-dragaction:dragoveronkeyarrowup - @property {HTMLElement} dragElement - The dragged element - */ - - /** - Triggered when the {@link DragAction#dragElement} is losing focus. - @typedef {CustomEvent} coral-dragaction:dragonkeyfocusout - @property {HTMLElement} dragElement - The dragged element - */ - - /** - Triggered when the {@link DragAction#dragElement} is dropped on key. - @typedef {CustomEvent} coral-dragaction:dragendonkey - @property {HTMLElement} dragElement - The dragged element - */ } export default DragAction; diff --git a/coral-dragaction/src/tests/test.DragAction.js b/coral-dragaction/src/tests/test.DragAction.js index 6f76da3e35..8e6af307a4 100644 --- a/coral-dragaction/src/tests/test.DragAction.js +++ b/coral-dragaction/src/tests/test.DragAction.js @@ -52,8 +52,8 @@ describe('DragAction', function () { var windowEventCount = events._vent._allListeners.length; dragAction.destroy(); - // mousestart, touchstart, keydown, keyup, focusout - expect(dragElementEvents._allListeners.length).to.equal(dragElementEventCount - 5); + // mousestart, touchstart + expect(dragElementEvents._allListeners.length).to.equal(dragElementEventCount - 2); // touchmove, mousemove, touchend, mouseend // @todo don't use private _vent instance expect(events._vent._allListeners.length).to.equal(windowEventCount - 4); @@ -482,7 +482,7 @@ describe('DragAction', function () { dragAction.handle = []; dragElement.addEventListener('coral-dragaction:dragstart', eventSpy); - helpers.mouseEvent('mousedown', dragElement, {pointerType: 'mouse'}); + helpers.mouseEvent('mousedown', dragElement); expect(eventSpy.callCount).to.equal(1); }); diff --git a/coral-gulp/configs/karma.conf.js b/coral-gulp/configs/karma.conf.js index f8bf0c5d1f..3f4bcf8bbc 100644 --- a/coral-gulp/configs/karma.conf.js +++ b/coral-gulp/configs/karma.conf.js @@ -158,10 +158,7 @@ module.exports = function (config) { client: { // Set to true for debugging via e.g console.debug - captureConsole: false, - mocha: { - timeout: 2500 - } + captureConsole: false /* , // Override the timeout, should tests fail due to timeout errors. mocha: { diff --git a/coral-utils/src/scripts/Commons.js b/coral-utils/src/scripts/Commons.js index 89c45bd7a1..b5fa18ac45 100644 --- a/coral-utils/src/scripts/Commons.js +++ b/coral-utils/src/scripts/Commons.js @@ -102,28 +102,6 @@ function isFunction(object) { return typeof object === 'function'; } - -/** - Check if the provided regular expression matches the brand. - - @ignore - - @param {RegExp} re - A regular expression to evaluate against the user agent string. - - @returns {Boolean} Whether user agent matches the regular expression. - */ - function testUserAgent(re) { - if (typeof window === 'undefined' || window.navigator == null) { - return false; - } - return ( - window.navigator['userAgentData'] && - window.navigator['userAgentData'].brands.some(brand => re.test(brand.brand)) - ) || - re.test(window.navigator.userAgent); -} - /** Utility belt. */ @@ -703,10 +681,6 @@ class Commons { get TABBABLE_ELEMENT_SELECTOR() { return this._tabbableElementsSelector; } - - isAndroid() { - return testUserAgent(/Android/i); - } } /** diff --git a/coral-utils/src/scripts/Events.js b/coral-utils/src/scripts/Events.js index 1318a9301a..958b8800b3 100644 --- a/coral-utils/src/scripts/Events.js +++ b/coral-utils/src/scripts/Events.js @@ -10,7 +10,6 @@ * governing permissions and limitations under the License. */ -import commons from './Commons'; import Vent from '@adobe/vent'; /** @@ -86,37 +85,6 @@ class Events { destroy() { this._vent.destroy(); } - - /** - * @ignore - * @param {MouseEvent | TouchEvent} event - * @returns {boolean} - * Keyboards, Assistive Technologies, and element.click() all produce a "virtual" - * click event. This is a method of inferring such clicks. Every browser except - * IE 11 only sets a zero value of "detail" for click events that are "virtual". - * However, IE 11 uses a zero value for all click events. For IE 11 we rely on - * the quirk that it produces click events that are of type PointerEvent, and - * where only the "virtual" click lacks a pointerType field. - * - * Original licensing for the following method can be found in the - * NOTICE file in the root directory of this source tree. - * See https://github.com/facebook/react/blob/3c713d513195a53788b3f8bb4b70279d68b15bcc/packages/react-interactions/events/src/dom/shared/index.js#L74-L87 - */ - isVirtualEvent(event) { - // JAWS/NVDA with Firefox. - if (event.mozInputSource === 0 && event.isTrusted) { - return true; - } - - // Android TalkBack's detail value varies depending on the event listener providing the event so we have specific logic here instead - // If pointerType is defined, event is from a click listener. For events from mousedown listener, detail === 0 is a sufficient check - // to detect TalkBack virtual clicks. - if (commons.isAndroid() && event.pointerType) { - return event.type === 'click' && event.buttons === 1; - } - - return event.detail === 0 && !event.pointerType; - } } /**