fix(tab-bar): notify value change event on pressing an arrow key

packages/elements/src/tab-bar/__snapshots__/Template.md → packages/elements/src/tab-bar/__snapshots__/TabBar.md

@@ -1,4 +1,4 @@
-# `tab-bar/Template`
+# `tab-bar/TabBar`
 
 #### `DOM structure is correct`
 

packages/elements/src/tab-bar/__test__/tab-bar.template.test.js

@@ -11,7 +11,7 @@ const scrollUpdated = async () => {
   await aTimeout(300);
 };
 
-describe('tab-bar/Template', () => {
+describe('tab-bar/TabBar', () => {
   it('DOM structure is correct', async () => {
     const el = await fixture('<ef-tab-bar></ef-tab-bar>');
     expect(el).shadowDom.to.equalSnapshot({ ignoreAttributes: ['style'] });

packages/elements/src/tab-bar/__test__/tab-bar.value.test.js

@@ -1,8 +1,10 @@
-import { fixture, expect, elementUpdated } from '@refinitiv-ui/test-helpers';
+import { fixture, expect, elementUpdated, keyboardEvent, isIE, oneEvent } from '@refinitiv-ui/test-helpers';
 
 import '@refinitiv-ui/elements/tab-bar';
 import '@refinitiv-ui/elemental-theme/light/ef-tab-bar';
 
+const keyArrowRight = keyboardEvent('keydown', { key: isIE() ? 'Right' : 'ArrowRight' });
+
 describe('tab-bar/value', () => {
   let el;
   describe('default value/active tab', () => {
@@ -119,24 +121,53 @@ describe('tab-bar/value', () => {
     });
   });
   describe('Event', () => {
-    it('Should fired value-changed event on tapping', async () => {
-      const el = await fixture(`
+    let tabList;
+
+    beforeEach(async () => {
+      el = await fixture(`
         <ef-tab-bar value="1">
           <ef-tab label="1"></ef-tab>
           <ef-tab>2</ef-tab>
           <ef-tab disabled>3</ef-tab>
           <ef-tab value="1">1</ef-tab>
         </ef-tab-bar>
       `);
+      tabList = el.querySelectorAll('ef-tab');
+    });
+
+    it('Should not fired value-changed event when value programmatically set', async () => {
       let isFired = false;
       el.addEventListener('value-changed', () => {
         isFired = true;
       });
-      const tabList = el.querySelectorAll('ef-tab');
+      el.value = '2';
+      expect(isFired).to.equal(false);
+    });
+    it('Should fired value-changed event on tapping', async () => {
+      let isFired = false;
+      el.addEventListener('value-changed', () => {
+        isFired = true;
+      });
+
       tabList[3].click();
       expect(isFired).to.equal(false);
       tabList[1].click();
       expect(isFired).to.equal(true);
     });
+    it('Should fired value-changed event when pressing an arrow key', async () => {
+      let event;
+      tabList[0].focus();
+
+      setTimeout(() => {
+        el.dispatchEvent(keyArrowRight);
+      });
+      event = await oneEvent(el, 'value-changed');
+      expect(event.detail.value).to.equal('2');
+      setTimeout(() => {
+        el.dispatchEvent(keyArrowRight);
+      });
+      event = await oneEvent(el, 'value-changed');
+      expect(event.detail.value).to.equal('1');
+    })
   });
 });

packages/elements/src/tab-bar/index.ts

@@ -4,8 +4,8 @@ import {
   TemplateResult,
   CSSResultGroup,
   PropertyValues,
-  BasicElement,
-  ResizeEvent
+  ResizeEvent,
+  BasicElement
 } from '@refinitiv-ui/core';
 import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
 import { property } from '@refinitiv-ui/core/decorators/property.js';
@@ -164,11 +164,23 @@ export class TabBar extends BasicElement {
    * @param value Value to check
    * @returns true if incoming value matches one of the existing tabs
    */
-  private isValidValue (value: string): boolean {
+  protected isValidValue (value: string): boolean {
     const tabList = this.getFocusableTabs();
     return tabList.some(tab => this.getTabValue(tab) === value);
   }
 
+  /**
+   * On *user-interaction* set the value and notify.
+   * @param value New value
+   * @returns {void}
+   */
+  protected setValueAndNotify (value: string): void {
+    if (this.value !== value) {
+      this.value = value;
+      this.notifyPropertyChange('value', value);
+    }
+  }
+
   /**
    * When the slot changes, set the level, toggle the scroll button, and set the value
    * @returns {void}
@@ -224,10 +236,7 @@ export class TabBar extends BasicElement {
     const element = event.target;
     if (element instanceof Tab) {
       const tabValue = this.getTabValue(element);
-      if (tabValue !== this.value) {
-        this.value = this.getTabValue(element);
-        this.notifyPropertyChange('value', tabValue);
-      }
+      this.setValueAndNotify(tabValue);
     }
   }
 
@@ -343,7 +352,8 @@ export class TabBar extends BasicElement {
   private focusAndSetActiveTab (tab: Tab): void {
     tab.focus();
     tab.scrollIntoView({ block: 'nearest' });
-    this.value = this.getTabValue(tab);
+    const tabValue = this.getTabValue(tab);
+    this.setValueAndNotify(tabValue);
   }
 
   /**