From 2a0766daa4cb2e328dd617ab1b7a0ebd56ff6d33 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 24 Apr 2021 17:56:03 -0700
Subject: [PATCH 1/4] Make root element of Dropdown focusable

---
 packages/components/src/dropdown/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
index b5b0e3a421d378..758e5ca669bb65 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.js
@@ -85,6 +85,7 @@ export default function Dropdown( {
 		<div
 			className={ classnames( 'components-dropdown', className ) }
 			ref={ containerRef }
+			tabIndex="-1"
 		>
 			{ renderToggle( args ) }
 			{ isOpen && (

From 46f5cadd0223a3a8a7be30260e6dd4178a2f5a42 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sat, 24 Apr 2021 19:39:13 -0700
Subject: [PATCH 2/4] Update snapshots

---
 .../components/color-palette/test/__snapshots__/control.js.snap | 1 +
 .../src/color-palette/test/__snapshots__/index.js.snap          | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 3d30e7664ae887..46dde98299caf7 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -90,6 +90,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
         >
           <div
             className="components-dropdown components-circular-option-picker__dropdown-link-action"
+            tabIndex="-1"
           >
             <button
               aria-describedby={null}
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 7bf8892b02e943..1f3a28741b6408 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -111,6 +111,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
 >
   <div
     className="components-dropdown components-circular-option-picker__dropdown-link-action"
+    tabIndex="-1"
   >
     <ForwardRef(Button)
       aria-expanded={false}
@@ -545,6 +546,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
           >
             <div
               className="components-dropdown components-circular-option-picker__dropdown-link-action"
+              tabIndex="-1"
             >
               <ForwardRef(Button)
                 aria-expanded={false}

From c90386c35eff8cc2f44e027d10efac8ebd85f4b6 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 26 Apr 2021 08:44:31 -0700
Subject: [PATCH 3/4] Remove disabled toggle workaround in Template Part block

---
 packages/block-library/src/template-part/edit/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
index f8ce00e9429847..65a932f0983e4b 100644
--- a/packages/block-library/src/template-part/edit/index.js
+++ b/packages/block-library/src/template-part/edit/index.js
@@ -179,9 +179,6 @@ export default function TemplatePartEdit( {
 								<ToolbarButton
 									aria-expanded={ isOpen }
 									onClick={ onToggle }
-									// Disable when open to prevent odd FireFox bug causing reopening.
-									// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
-									disabled={ isOpen }
 								>
 									{ __( 'Replace' ) }
 								</ToolbarButton>

From 4ff1e0897b118fa733c5cb58838bd86e9541a4b5 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Mon, 13 Sep 2021 08:10:45 -0700
Subject: [PATCH 4/4] Comment

---
 packages/components/src/dropdown/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/src/dropdown/index.js b/packages/components/src/dropdown/index.js
index 758e5ca669bb65..ebee9c2b5abd3c 100644
--- a/packages/components/src/dropdown/index.js
+++ b/packages/components/src/dropdown/index.js
@@ -85,6 +85,9 @@ export default function Dropdown( {
 		<div
 			className={ classnames( 'components-dropdown', className ) }
 			ref={ containerRef }
+			// Some UAs focus the closest focusable parent when the toggle is
+			// clicked. Making this div focusable ensures such UAs will focus
+			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
 			tabIndex="-1"
 		>
 			{ renderToggle( args ) }