fix: keep draggable grid cells announced by screen readers (#12135) (#12143)

Co-authored-by: Diego Cardoso <diego@vaadin.com>

Author: vaadin-bot

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -601,6 +601,13 @@ export const gridStyles = css`
     outline-offset: calc(var(--vaadin-grid-border-width, 1px) * -1);
   }
 
+  /* Styles applied to draggable cell content; see _filterDragAndDrop in vaadin-grid-drag-and-drop-mixin.js. */
+  ::slotted(vaadin-grid-cell-content[draggable-source]) {
+    -webkit-user-drag: element;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   .row[dragover] {
     z-index: 100 !important;
   }

packages/grid/src/vaadin-grid-drag-and-drop-mixin.js

@@ -481,11 +481,23 @@ export const DragAndDropMixin = (superClass) =>
       const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
       const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
+      // Chromium computes an empty accessible name for cells whose content
+      // element has the `draggable` attribute when the accessibility tree is
+      // built (https://issues.chromium.org/issues/534049472,
+      // https://github.com/vaadin/web-components/issues/11726). Blink maps
+      // `draggable="true"` to the `-webkit-user-drag: element` and
+      // `user-select: none` styles, and the accessible-name bug is keyed to the
+      // attribute, not the styles. So on Chromium, mark the draggable cell
+      // content with the `draggable-source` attribute, which applies the
+      // equivalent styles from the grid styles, instead of the `draggable`
+      // attribute. This can be removed once the Chromium issue is fixed.
+      const draggableAttribute = isChrome ? 'draggable-source' : 'draggable';
+
       iterateRowCells(row, (cell) => {
         if (dragDisabled) {
-          cell._content.removeAttribute('draggable');
+          cell._content.removeAttribute(draggableAttribute);
         } else {
-          cell._content.setAttribute('draggable', true);
+          cell._content.setAttribute(draggableAttribute, true);
         }
       });
 

packages/grid/test/column-rendering.test.js

@@ -3,7 +3,15 @@ import { aTimeout, fixtureSync, keyDownOn, nextFrame, nextResize, oneEvent } fro
 import Sinon from 'sinon';
 import './grid-test-styles.js';
 import '../all-imports.js';
-import { dragAndDropOver, dragStart, fire, flushGrid, getCellContent, getHeaderCellContent } from './helpers.js';
+import {
+  cellDraggableAttribute,
+  dragAndDropOver,
+  dragStart,
+  fire,
+  flushGrid,
+  getCellContent,
+  getHeaderCellContent,
+} from './helpers.js';
 
 ['ltr', 'rtl'].forEach((dir) => {
   describe(`lazy column rendering - ${dir}`, () => {
@@ -411,12 +419,12 @@ import { dragAndDropOver, dragStart, fire, flushGrid, getCellContent, getHeaderC
         grid.rowsDraggable = true;
         await nextFrame();
 
-        expect(getBodyCellContent(getLastVisibleColumnIndex()).getAttribute('draggable')).to.equal('true');
+        expect(getBodyCellContent(getLastVisibleColumnIndex()).getAttribute(cellDraggableAttribute)).to.equal('true');
 
         // Scroll back to the beginning
         await scrollHorizontally(-grid.$.table.scrollWidth);
         // Expect the cell that was previously not visible to have the draggable attribute
-        expect(getBodyCellContent(0).getAttribute('draggable')).to.equal('true');
+        expect(getBodyCellContent(0).getAttribute(cellDraggableAttribute)).to.equal('true');
       });
 
       it('should not create excess cells for a row', async () => {

packages/grid/test/drag-and-drop.test.js

@@ -4,7 +4,9 @@ import { aTimeout, fixtureSync, listenOnce, nextFrame, nextResize } from '@vaadi
 import sinon from 'sinon';
 import './grid-test-styles.js';
 import '../src/vaadin-grid.js';
+import { isChrome } from '@vaadin/component-base/src/browser-utils.js';
 import {
+  cellDraggableAttribute,
   dragAndDropOver,
   flushGrid,
   getBodyCellContent,
@@ -25,7 +27,7 @@ describe('drag and drop', () => {
   const getDraggable = (grid, rowIndex = 0) => {
     const row = Array.from(grid.$.items.children).find((row) => row.index === rowIndex);
     const cellContent = row.querySelector('slot').assignedNodes()[0];
-    return [row, cellContent].find((node) => node.getAttribute('draggable') === 'true');
+    return [row, cellContent].find((node) => node.getAttribute(cellDraggableAttribute) === 'true');
   };
 
   const fireDragStart = (draggable = getDraggable(grid)) => {
@@ -154,6 +156,39 @@ describe('drag and drop', () => {
       expect(getDraggable(grid)).not.to.be.ok;
     });
 
+    // See https://github.com/vaadin/web-components/issues/11726
+    describe('accessible name workaround', () => {
+      const getContent = (row = 0) => getBodyCellContent(grid, row, 0);
+
+      (isChrome ? it : it.skip)('should not set the draggable attribute on Chromium', () => {
+        expect(getContent().hasAttribute('draggable')).to.be.false;
+      });
+
+      (isChrome ? it : it.skip)('should mark draggable content with draggable-source styles on Chromium', () => {
+        expect(getContent().getAttribute('draggable-source')).to.equal('true');
+        const style = getComputedStyle(getContent());
+        expect(style.webkitUserDrag).to.equal('element');
+        expect(style.userSelect).to.equal('none');
+      });
+
+      (isChrome ? it.skip : it)('should set the draggable attribute on other browsers', () => {
+        expect(getContent().getAttribute('draggable')).to.equal('true');
+      });
+
+      it('should unset the drag marker when rowsDraggable is disabled', () => {
+        grid.rowsDraggable = false;
+        flushGrid(grid);
+        expect(getContent().hasAttribute(cellDraggableAttribute)).to.be.false;
+      });
+
+      it('should not set the drag marker on rows excluded by dragFilter', () => {
+        grid.dragFilter = (model) => model.index !== 0;
+        flushGrid(grid);
+        expect(getContent(0).hasAttribute(cellDraggableAttribute)).to.be.false;
+        expect(getContent(1).getAttribute(cellDraggableAttribute)).to.equal('true');
+      });
+    });
+
     describe('dragstart', () => {
       let dragStartSpy;
       let dropSpy;

packages/grid/test/helpers.js

@@ -1,4 +1,8 @@
 import sinon from 'sinon';
+import { isChrome } from '@vaadin/component-base/src/browser-utils.js';
+
+// Draggable cell content uses a browser-specific attribute; see _filterDragAndDrop.
+export const cellDraggableAttribute = isChrome ? 'draggable-source' : 'draggable';
 
 export const flushGrid = (grid) => {
   grid.performUpdate?.();

packages/vaadin-lumo-styles/src/components/grid.css

@@ -420,6 +420,14 @@
   }
 
   /* Drag and Drop styles */
+
+  /* Draggable cell content; see _filterDragAndDrop in vaadin-grid-drag-and-drop-mixin.js. */
+  ::slotted(vaadin-grid-cell-content[draggable-source]) {
+    -webkit-user-drag: element;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   :host([dragover])::after {
     content: '';
     position: absolute;