Fix the two template-lint errors (ModeSwitch tabindex, Smart::Feedback keyboard access)

addon/components/o-s-s/mode-switch.hbs

@@ -11,7 +11,7 @@
     />
     <label
       for={{concat this.guid "-" option.key}}
-      tabindex={{this.optionLabelTabIndex}}
+      tabindex={{if @disabled "-1" "0"}}
       {{on "keydown" (fn this.onKeyDown option.key)}}
       data-control-name={{concat option.key "-label"}}
     >

addon/components/o-s-s/mode-switch.ts

@@ -25,8 +25,6 @@ interface ModeSwitchComponentArgs {
 }
 
 const DEFAULT_SKIN = 'primary';
-const FOCUSABLE_INDEX = '0';
-const NON_FOCUSABLE_INDEX = '-1';
 
 export default class ModeSwitchComponent extends Component<ModeSwitchComponentArgs> {
   containerDiv: HTMLElement = document.createElement('div');
@@ -45,10 +43,6 @@ export default class ModeSwitchComponent extends Component<ModeSwitchComponentAr
     return this.args.selected ?? this.args.options[0]!.key;
   }
 
-  get optionLabelTabIndex(): string {
-    return this.args.disabled ? NON_FOCUSABLE_INDEX : FOCUSABLE_INDEX;
-  }
-
   @action
   registerContainerDiv(container: HTMLElement): void {
     this.containerDiv = container;

addon/components/o-s-s/smart/feedback.hbs

@@ -1,7 +1,9 @@
 <div
   class="oss-smart__feedback {{this.currentStateClass}}"
   role={{if this.showChevron "button"}}
+  tabindex={{if this.showChevron "0"}}
   {{on "click" this.toggle}}
+  {{on "keydown" this.onKeyDown}}
   ...attributes
 >
   <OSS::Smart::Blob @loading={{@loading}} />

addon/components/o-s-s/smart/feedback.ts

@@ -65,6 +65,15 @@ export default class OSSSmartFeedback extends Component<OSSSmartFeedbackArgs> {
     }
   }
 
+  @action
+  onKeyDown(event: KeyboardEvent): void {
+    if (!this.showChevron || event.target !== event.currentTarget) return;
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+
+    event.preventDefault();
+    this.toggle();
+  }
+
   @action
   setupTruncation(element: HTMLElement): void {
     this.contentElement = element;

tests/integration/components/o-s-s/smart/feedback-test.ts

@@ -1,4 +1,4 @@
-import { click, render, settled, waitFor } from '@ember/test-helpers';
+import { click, render, settled, triggerKeyEvent, waitFor } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { setupIntl } from 'ember-intl/test-support';
 import { setupRenderingTest } from 'ember-qunit';
@@ -153,6 +153,7 @@ module('Integration | Component | o-s-s/smart/feedback', function (hooks) {
       await render(hbs`<OSS::Smart::Feedback @loading={{false}} @content={{this.content}} />`);
 
       assert.dom('.oss-smart__feedback').doesNotHaveAttribute('role');
+      assert.dom('.oss-smart__feedback').doesNotHaveAttribute('tabindex');
     });
 
     test('clicking short feedback does not expand it', async function (assert) {
@@ -187,6 +188,7 @@ module('Integration | Component | o-s-s/smart/feedback', function (hooks) {
       await render(hbs`<OSS::Smart::Feedback @loading={{false}} @content={{this.content}} />`);
 
       assert.dom('.oss-smart__feedback').hasAttribute('role', 'button');
+      assert.dom('.oss-smart__feedback').hasAttribute('tabindex', '0');
     });
 
     test('clicking a truncated feedback expands it and flips the chevron up', async function (assert) {
@@ -199,6 +201,19 @@ module('Integration | Component | o-s-s/smart/feedback', function (hooks) {
       assert.dom('[data-control-name="oss-smart-feedback-chevron"]').hasClass('fa-chevron-up');
     });
 
+    test('Enter and Space toggle a truncated feedback', async function (assert) {
+      this.content = [{ text: LONG_TEXT }];
+
+      await render(hbs`<OSS::Smart::Feedback @loading={{false}} @content={{this.content}} />`);
+      await triggerKeyEvent('.oss-smart__feedback', 'keydown', 'Enter');
+
+      assert.dom('.oss-smart__feedback').doesNotHaveClass('oss-smart__feedback--collapsed');
+
+      await triggerKeyEvent('.oss-smart__feedback', 'keydown', ' ');
+
+      assert.dom('.oss-smart__feedback').hasClass('oss-smart__feedback--collapsed');
+    });
+
     test('clicking twice collapses it again', async function (assert) {
       this.content = [{ text: LONG_TEXT }];