fix(a11y): keyboard-operable launcher

src/GleapFeedbackButtonManager.js

@@ -84,7 +84,7 @@ export default class GleapFeedbackButtonManager {
     }
   }
 
-  feedbackButtonPressed() {
+  feedbackButtonPressed(fromKeyboard = false) {
     var frameManager = GleapFrameManager.getInstance();
     if (frameManager.isOpened()) {
       frameManager.hideWidget();
@@ -93,7 +93,24 @@ export default class GleapFeedbackButtonManager {
       frameManager.setAppMode('widget');
       frameManager.showWidget();
       this.updateRedDot(false);
+      // Opened from the keyboard: the keyboard moves into the messenger with it.
+      if (fromKeyboard) {
+        frameManager.focusFrame();
+      }
+    }
+  }
+
+  /**
+   * The messenger closed while the keyboard was in it (Escape, its close button): the keyboard
+   * comes back to the launcher instead of the top of the page.
+   */
+  restoreFocus() {
+    if (!this.feedbackButton || !this.feedbackButton.isConnected) {
+      return;
     }
+    try {
+      this.feedbackButton.focus({ preventScroll: true });
+    } catch (e) {}
   }
 
   /**
@@ -105,10 +122,20 @@ export default class GleapFeedbackButtonManager {
     }
     this.injectedFeedbackButton = true;
 
+    // A div (a <button> would take the host page's button styles), made a real button for the
+    // keyboard and screen readers: Tab reaches it, Enter and Space open it.
     var elem = document.createElement('div');
+    elem.setAttribute('role', 'button');
+    elem.setAttribute('tabindex', '0');
     elem.addEventListener('click', () => {
       this.feedbackButtonPressed();
     });
+    elem.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        this.feedbackButtonPressed(true);
+      }
+    });
     this.attachPressAnimation(elem);
     document.body.appendChild(elem);
     this.feedbackButton = elem;
@@ -244,6 +271,12 @@ export default class GleapFeedbackButtonManager {
     this.feedbackButton.className = 'bb-feedback-button gleap-font rr-block';
     pressAnimationClasses.forEach((className) => this.feedbackButton.classList.add(className));
     this.feedbackButton.setAttribute('dir', GleapTranslationManager.getInstance().isRTLLayout ? 'rtl' : 'ltr');
+    const isWidgetOpen = GleapFrameManager.getInstance().isOpened();
+    this.feedbackButton.setAttribute('aria-expanded', isWidgetOpen ? 'true' : 'false');
+    this.feedbackButton.setAttribute(
+      'aria-label',
+      (flowConfig.widgetButtonText && `${flowConfig.widgetButtonText}`.trim()) || 'Open support chat'
+    );
 
     if (
       flowConfig.feedbackButtonPosition === GleapFeedbackButtonManager.FEEDBACK_BUTTON_CLASSIC ||

src/GleapFrameManager.js

@@ -963,12 +963,28 @@ export default class GleapFrameManager {
     }
   }
 
+  /** Moves the keyboard into the messenger (the launcher opened it from the keyboard). */
+  focusFrame() {
+    setTimeout(() => {
+      try {
+        const frame = this.gleapFrameContainer && this.gleapFrameContainer.querySelector('.gleap-frame');
+        if (frame) frame.focus({ preventScroll: true });
+      } catch (e) {}
+    }, 0);
+  }
+
   hideWidget(resetRoutes = false) {
     // The standalone survey page (legacy) and inline survey pages can't be closed.
     if (this.appMode === 'survey_web' || this.appMode === 'survey_page') {
       return;
     }
 
+    // The keyboard was in the messenger: it goes back to the launcher once it closes.
+    let hadFocus = false;
+    try {
+      hadFocus = !!this.gleapFrameContainer && this.gleapFrameContainer.contains(document.activeElement);
+    } catch (e) {}
+
     // A survey the messenger closes before it was shown (nothing to ask): it must not open after
     // all, and there is nothing to animate and no close event without an open.
     const wasOpened = this.widgetOpened;
@@ -1027,6 +1043,9 @@ export default class GleapFrameManager {
     if (typeof window !== 'undefined' && typeof window.focus !== 'undefined') {
       window.focus();
     }
+    if (hadFocus) {
+      GleapFeedbackButtonManager.getInstance().restoreFocus();
+    }
   }
 
   sendMessage(data, queue = false) {

src/UI.js

@@ -1659,6 +1659,16 @@ export const injectStyledCSS = (
       left: auto;
     }
 
+    .bb-feedback-button:focus {
+      outline: none;
+    }
+
+    .bb-feedback-button:focus-visible .bb-feedback-button-icon,
+    .bb-feedback-button:focus-visible .bb-feedback-button-classic {
+      outline: 2px solid ${buttonColor};
+      outline-offset: 3px;
+    }
+
     .bb-feedback-button--disabled {
       display: none !important;
     }