Hide tooltips and popovers with escape key

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/63922

app/assets/javascripts/behaviors/shortcuts/keybindings.js

@@ -105,6 +105,12 @@ export const TOGGLE_PERFORMANCE_BAR = {
   defaultKeys: ['p b'], // eslint-disable-line @gitlab/require-i18n-strings
 };
 
+export const HIDE_APPEARING_CONTENT = {
+  id: 'globalShortcuts.hideAppearingContent',
+  description: __('Hide tooltips or popovers'),
+  defaultKeys: ['esc'],
+};
+
 export const TOGGLE_CANARY = {
   id: 'globalShortcuts.toggleCanary',
   description: __('Toggle GitLab Next'),
@@ -492,6 +498,7 @@ export const GLOBAL_SHORTCUTS_GROUP = {
     GO_TO_YOUR_MERGE_REQUESTS,
     GO_TO_YOUR_TODO_LIST,
     TOGGLE_PERFORMANCE_BAR,
+    HIDE_APPEARING_CONTENT,
   ],
 };
 

app/assets/javascripts/behaviors/shortcuts/shortcuts.js

@@ -12,6 +12,7 @@ import {
   START_SEARCH,
   FOCUS_FILTER_BAR,
   TOGGLE_PERFORMANCE_BAR,
+  HIDE_APPEARING_CONTENT,
   TOGGLE_CANARY,
   TOGGLE_MARKDOWN_PREVIEW,
   GO_TO_YOUR_TODO_LIST,
@@ -78,6 +79,7 @@ export default class Shortcuts {
     Mousetrap.bind(keysFor(START_SEARCH), Shortcuts.focusSearch);
     Mousetrap.bind(keysFor(FOCUS_FILTER_BAR), this.focusFilter.bind(this));
     Mousetrap.bind(keysFor(TOGGLE_PERFORMANCE_BAR), Shortcuts.onTogglePerfBar);
+    Mousetrap.bind(keysFor(HIDE_APPEARING_CONTENT), Shortcuts.hideAppearingContent);
     Mousetrap.bind(keysFor(TOGGLE_CANARY), Shortcuts.onToggleCanary);
 
     const findFileURL = document.body.dataset.findFile;
@@ -202,6 +204,18 @@ export default class Shortcuts {
     }
   }
 
+  static hideAppearingContent(e) {
+    const elements = document.querySelectorAll('.tooltip, .popover');
+
+    elements.forEach((element) => {
+      element.style.display = 'none';
+    });
+
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+  }
+
   /**
    * Initializes markdown editor shortcuts on the provided `<textarea>` element
    *

locale/gitlab.pot

@@ -16269,6 +16269,9 @@ msgstr ""
 msgid "Hide shared projects"
 msgstr ""
 
+msgid "Hide tooltips or popovers"
+msgstr ""
+
 msgid "Hide value"
 msgid_plural "Hide values"
 msgstr[0] ""

spec/frontend/behaviors/shortcuts/keybindings_spec.js

@@ -5,6 +5,7 @@ import {
   getCustomizations,
   keybindingGroups,
   TOGGLE_PERFORMANCE_BAR,
+  HIDE_APPEARING_CONTENT,
   LOCAL_STORAGE_KEY,
   WEB_IDE_COMMIT,
 } from '~/behaviors/shortcuts/keybindings';
@@ -95,4 +96,14 @@ describe('~/behaviors/shortcuts/keybindings', () => {
       expect(keysFor(TOGGLE_PERFORMANCE_BAR)).toEqual(['p b']);
     });
   });
+
+  describe('when tooltips or popovers are visible', () => {
+    beforeEach(() => {
+      setupCustomizations();
+    });
+
+    it('returns the default keybinding for the command', () => {
+      expect(keysFor(HIDE_APPEARING_CONTENT)).toEqual(['esc']);
+    });
+  });
 });