From af0a724b3e0294d05608876f43caebbfefb2b5f5 Mon Sep 17 00:00:00 2001
From: Skye <81345074+Skye967@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:16:22 -0600
Subject: [PATCH] fix: use `:focus` pseudo class instead of `blocklyFocused`
 (#8360)

* bug: removed blocklyFocused from menu.ts and dropdown.ts, changed css style to :focus

* removed blocklyFocused from menu.ts

* resubmit

* core css removed blocklyFocused

* fix core css

* menu file import cleanup, linting error
---
 core/css.ts         | 5 ++---
 core/dropdowndiv.ts | 6 ------
 core/menu.ts        | 3 ---
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/core/css.ts b/core/css.ts
index 20c573093..7a0053604 100644
--- a/core/css.ts
+++ b/core/css.ts
@@ -5,7 +5,6 @@
  */
 
 // Former goog.module ID: Blockly.Css
-
 /** Has CSS already been injected? */
 let injected = false;
 
@@ -119,7 +118,7 @@ let content = `
   box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
 }
 
-.blocklyDropDownDiv.blocklyFocused {
+.blocklyDropDownDiv:focus {
   box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
 }
 
@@ -445,7 +444,7 @@ input[type=number] {
   z-index: 20000;  /* Arbitrary, but some apps depend on it... */
 }
 
-.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
+.blocklyWidgetDiv .blocklyMenu:focus {
   box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
 }
 
diff --git a/core/dropdowndiv.ts b/core/dropdowndiv.ts
index c90661c4e..35eb6eaed 100644
--- a/core/dropdowndiv.ts
+++ b/core/dropdowndiv.ts
@@ -136,12 +136,6 @@ export function createDom() {
 
   // Handle focusin/out events to add a visual indicator when
   // a child is focused or blurred.
-  div.addEventListener('focusin', function () {
-    dom.addClass(div, 'blocklyFocused');
-  });
-  div.addEventListener('focusout', function () {
-    dom.removeClass(div, 'blocklyFocused');
-  });
 }
 
 /**
diff --git a/core/menu.ts b/core/menu.ts
index 29615925b..31eda5c3d 100644
--- a/core/menu.ts
+++ b/core/menu.ts
@@ -15,7 +15,6 @@ import * as browserEvents from './browser_events.js';
 import type {MenuItem} from './menuitem.js';
 import * as aria from './utils/aria.js';
 import {Coordinate} from './utils/coordinate.js';
-import * as dom from './utils/dom.js';
 import type {Size} from './utils/size.js';
 import * as style from './utils/style.js';
 
@@ -156,7 +155,6 @@ export class Menu {
     const el = this.getElement();
     if (el) {
       el.focus({preventScroll: true});
-      dom.addClass(el, 'blocklyFocused');
     }
   }
 
@@ -165,7 +163,6 @@ export class Menu {
     const el = this.getElement();
     if (el) {
       el.blur();
-      dom.removeClass(el, 'blocklyFocused');
     }
   }