feat: add cell-focus event to grid (#176)

Author: Nii Yeboah

packages/vaadin-grid/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -504,6 +504,9 @@ export const KeyboardNavigationMixin = (superClass) =>
         }
         // 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.
+        cell.dispatchEvent(new CustomEvent('cell-focus', { bubbles: true, composed: true }));
       }
 
       this._detectFocusedItemIndex(e);

packages/vaadin-grid/test/keyboard-navigation.test.js

@@ -1827,6 +1827,36 @@ describe('keyboard navigation', () => {
 
       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;
+    });
   });
 });