diff --git a/app.js b/app.js
index b276a1cb2..f24e209ef 100644
--- a/app.js
+++ b/app.js
@@ -6,6 +6,8 @@ import 'jQuery-Impromptu';
 
 import 'olm';
 
+import 'focus-visible';
+
 // We need to setup the jitsi-local-storage as early as possible so that we can start using it.
 // NOTE: If jitsi-local-storage is used before the initial setup is performed this will break the use case when we use
 // the  local storage from the parent page when the localStorage is disabled. Also the setup is relying that
diff --git a/css/_base.scss b/css/_base.scss
index 50d9169f2..87146f5f0 100644
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -33,6 +33,14 @@ body {
     }
 }
 
+/**
+ * This will hide the focus indicator if an element receives focus via the mouse,
+ * but it will still show up on keyboard focus, thus preserving accessibility.
+ */
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
 /**
  * AtlasKit sets a default margin on the rendered modals, so
  * when the shift-right class is set when the chat opens, we
diff --git a/package-lock.json b/package-lock.json
index 0faf59311..7342c2911 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8772,6 +8772,11 @@
       "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.3.tgz",
       "integrity": "sha512-EU6ePgEauhWrzJEN5RtG1d1ayrWXhEnfzTjnieHj+jG9tNHDEhKTAnCn1TN3gs9h6XWCDH6cpeX1VXY/lzLwZg=="
     },
+    "focus-visible": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.1.0.tgz",
+      "integrity": "sha512-nPer0rjtzdZ7csVIu233P2cUm/ks/4aVSI+5KUkYrYpgA7ujgC3p6J7FtFU+AIMWwnwYQOB/yeiOITxFeYIXiw=="
+    },
     "follow-redirects": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
diff --git a/package.json b/package.json
index 2a492e186..84d628272 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
     "base64-js": "1.3.1",
     "bc-css-flags": "3.0.0",
     "dropbox": "4.0.9",
+    "focus-visible": "5.1.0",
     "i18n-iso-countries": "3.7.8",
     "i18next": "17.0.6",
     "i18next-browser-languagedetector": "3.0.1",
diff --git a/webpack.config.js b/webpack.config.js
index 48d1c6626..ac9cf70dc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -171,6 +171,7 @@ const config = {
     ].filter(Boolean),
     resolve: {
         alias: {
+            'focus-visible': 'focus-visible/dist/focus-visible.min.js',
             jquery: `jquery/dist/jquery${minimize ? '.min' : ''}.js`
         },
         aliasFields: [