fix(TabBar): propogate key press events and emit tabChanged signal

packages/@lightningjs/ui-components/src/components/TabBar/TabBar.js

@@ -62,7 +62,8 @@ export default class TabBar extends Base {
     this._isTabsFocused = true;
   }
 
-  _selectedTabChange() {
+  _selectedTabChange(selected, prevSelected) {
+    this.fireAncestors('$tabChanged', selected, prevSelected, this);
     if (
       typeof this._tabContent === 'object' &&
       typeof this._tabContent.then === 'function'
@@ -179,10 +180,12 @@ export default class TabBar extends Base {
       this._updateTabs();
       this._updateTabBarHeight();
     }
+    return false;
   }
 
   _handleUp() {
     this.selectTabs();
+    return false;
   }
 
   _setTabs(tabs) {

packages/@lightningjs/ui-components/src/components/TabBar/TabBar.mdx

@@ -107,6 +107,14 @@ class Example extends lng.Component {
 
 \* `TabBar` also accepts all properties supported by the [Row](/docs/components-row--basic) component. These properties will be applied to the Row which renders the Tabs
 
+### Signals
+
+- `$tabChanged`: each time the selected tab is changed, a signal named `$tabChanged` is emitted (via `fireAncestors`) with 3 arguments in the following order: the current selected tab, the previously selected tab, and an instance of the TabBar component
+
+```js
+fireAncestors('$tabChanged', selected, prevSelected, this);
+```
+
 ### Style Properties
 
 | name             | type   | description                                  |

packages/@lightningjs/ui-components/src/components/TabBar/TabBar.test.js

@@ -16,6 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import lng from '@lightningjs/core';
 import { makeCreateComponent } from '@lightningjs/ui-components-test-utils';
 import Row from '../Row';
 import Tile from '../Tile';
@@ -128,6 +129,57 @@ describe('TabBar', () => {
     expect(tabBar._Tabs.items[1].mode).toBe('unfocused');
   });
 
+  it('should emit a $tabChanged signal when the selected tab changes', () => {
+    const prevSelected = tabBar.tag('Tabs').selected;
+    jest.spyOn(tabBar, 'fireAncestors');
+    expect(tabBar.fireAncestors).not.toHaveBeenCalled();
+
+    tabBar.tag('Tabs').selectNext();
+    const selected = tabBar.tag('Tabs').selected;
+
+    expect(tabBar.fireAncestors).toHaveBeenCalledWith(
+      '$tabChanged',
+      selected,
+      prevSelected,
+      tabBar
+    );
+  });
+
+  it('should propogate key events', () => {
+    const onUp = jest.fn();
+    const onDown = jest.fn();
+    class Wrapper extends lng.Component {
+      static _template() {
+        return {
+          TabBar: {
+            type: TabBar,
+            tabs
+          }
+        };
+      }
+      _handleUp() {
+        onUp();
+      }
+      _handleDown() {
+        onDown();
+      }
+      _getFocused() {
+        return this.tag('TabBar');
+      }
+    }
+    const [, testRenderer] = makeCreateComponent(Wrapper)();
+
+    expect(onUp).not.toHaveBeenCalled();
+    expect(onDown).not.toHaveBeenCalled();
+
+    testRenderer.keyPress('Down');
+    expect(onUp).not.toHaveBeenCalled();
+    expect(onDown).toHaveBeenCalled();
+
+    testRenderer.keyPress('Up');
+    expect(onUp).toHaveBeenCalled();
+  });
+
   it('should update the TabBar height if the Tabs height changes', async () => {
     [tabBar, testRenderer] = createComponent(
       { tabs },