Cherrypick cell focus event (#2196)

Co-authored-by: Sascha Ißbrücker <[email protected]>

src/vaadin-grid-keyboard-navigation-mixin.html

@@ -537,6 +537,12 @@
         }
         // Inform cell content of the focus (used in <vaadin-grid-sorter>)
         cell._content.dispatchEvent(new CustomEvent('cell-focusin', {bubbles: false}));
+
+        // Fire a public event for cell focus.
+        const context = this.getEventContext(e);
+        cell.dispatchEvent(
+          new CustomEvent('cell-focus', {bubbles: true, composed: true, detail: {context: context}})
+        );
       }
 
       this._detectFocusedItemIndex(e);
@@ -743,5 +749,13 @@
       }
       return null;
     }
+
+    /**
+     * Fired when a cell is focused with click or keyboard navigation.
+     *
+     * Use context property of @see {@link GridCellFocusEvent} to get detail information about the event.
+     *
+     * @event cell-focus
+     */
   };
 </script>

test/keyboard-navigation.html

@@ -1912,6 +1912,35 @@
 
           expect(spy.callCount).to.equal(1);
         });
+
+        it('should dispatch cell-focus on keyboard navigation', (done) => {
+          const expectedContext = {
+            column: grid.querySelector('vaadin-grid-column'),
+            detailsOpened: false,
+            expanded: false,
+            index: 0,
+            item: 'foo',
+            level: 0,
+            section: 'body',
+            selected: false
+          };
+
+          tabToBody();
+          right();
+
+          const spy = sinon.spy();
+
+          grid.addEventListener('cell-focus', (e) => {
+            spy();
+            const context = e.target.getEventContext(e);
+            expect(context).to.deep.equal(expectedContext);
+            done();
+          });
+
+          left();
+
+          expect(spy.calledOnce).to.be.true;
+        });
       });
     });