From c82e088028f1367151787235262927be2227862b Mon Sep 17 00:00:00 2001
From: Rob Dodson <robdodson@google.com>
Date: Sat, 22 Sep 2018 08:43:49 -0700
Subject: [PATCH 1/2] Meta keys should not match.

---
 src/focus-visible.js    | 10 ++++++++--
 test/specs/meta-keys.js | 44 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 test/specs/meta-keys.js

diff --git a/src/focus-visible.js b/src/focus-visible.js
index efd6809..70870d9 100644
--- a/src/focus-visible.js
+++ b/src/focus-visible.js
@@ -98,12 +98,18 @@ function applyFocusVisiblePolyfill(scope) {
   }
 
   /**
-   * Treat `keydown` as a signal that the user is in keyboard modality.
+   * If the most recent user interaction was via the keyboard;
+   * and the key press did not include a meta, alt/option, or control key;
+   * then the modality is keyboard. Otherwise, the modality is not keyboard.
    * Apply `focus-visible` to any current active element and keep track
    * of our keyboard modality state with `hadKeyboardEvent`.
-   * @param {Event} e
+   * @param {KeyboardEvent} e
    */
   function onKeyDown(e) {
+    if (e.metaKey || e.altKey || e.ctrlKey) {
+      return;
+    }
+
     if (isValidFocusTarget(scope.activeElement)) {
       addFocusVisibleClass(scope.activeElement);
     }
diff --git a/test/specs/meta-keys.js b/test/specs/meta-keys.js
new file mode 100644
index 0000000..180aa18
--- /dev/null
+++ b/test/specs/meta-keys.js
@@ -0,0 +1,44 @@
+const { fixture, FOCUS_RING_STYLE } = require('./helpers');
+const { Key, By } = require('selenium-webdriver');
+const expect = require('expect');
+const driver = global.__driver;
+
+describe('meta keys', function() {
+  beforeEach(function() {
+    return fixture('button.html');
+  });
+
+  let el;
+  beforeEach(async function() {
+    el = await driver.findElement(By.css('#el'));
+  });
+
+  it('should NOT apply .focus-visible if the ctrl key is pressed', async function() {
+    await el.click();
+    // Simulates "ctrl - b".
+    // Key.NULL tells selenium to clear the pressed state for the modifier key.
+    await el.sendKeys(Key.CONTROL, 'b', Key.NULL);
+    let actual = await driver.executeScript(`
+      return window.getComputedStyle(document.querySelector('#el')).outlineColor
+    `);
+    expect(actual).toNotEqual(FOCUS_RING_STYLE);
+  });
+
+  it('should NOT apply .focus-visible if the meta key is pressed', async function() {
+    await el.click();
+    await el.sendKeys(Key.META, 'b', Key.NULL);
+    let actual = await driver.executeScript(`
+      return window.getComputedStyle(document.querySelector('#el')).outlineColor
+    `);
+    expect(actual).toNotEqual(FOCUS_RING_STYLE);
+  });
+
+  it('should NOT apply .focus-visible if the option/alt key is pressed', async function() {
+    await el.click();
+    await el.sendKeys(Key.ALT, 'b', Key.NULL);
+    let actual = await driver.executeScript(`
+      return window.getComputedStyle(document.querySelector('#el')).outlineColor
+    `);
+    expect(actual).toNotEqual(FOCUS_RING_STYLE);
+  });
+});

From 8990d0650ac3d73e58c1003d0681a8cf98dfec9d Mon Sep 17 00:00:00 2001
From: Rob Dodson <robdodson@google.com>
Date: Fri, 7 Jun 2019 11:23:06 -0700
Subject: [PATCH 2/2] Skip meta tests on windows.

---
 test/specs/meta-keys.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/test/specs/meta-keys.js b/test/specs/meta-keys.js
index 180aa18..f67bb38 100644
--- a/test/specs/meta-keys.js
+++ b/test/specs/meta-keys.js
@@ -4,6 +4,18 @@ const expect = require('expect');
 const driver = global.__driver;
 
 describe('meta keys', function() {
+  before(function() {
+    // Skip these tests in Edge and IE because it's unclear how to get focus
+    // back to the page when pressing the Windows meta key without clicking
+    // on the page which would sort of negate the test.
+    if (
+      process.env.TEST_BROWSER.includes('Edge') ||
+      process.env.TEST_BROWSER.includes('Internet Explorer')
+    ) {
+      this.skip();
+    }
+  });
+
   beforeEach(function() {
     return fixture('button.html');
   });