From afa5b33688bde9a994acd8a38c0d91ced99b597e Mon Sep 17 00:00:00 2001
From: Abhishek-17H <abhishekhegaje1702@gmail.com>
Date: Tue, 17 Dec 2024 15:25:41 +0530
Subject: [PATCH 1/3] Fix focus visibility for input components in site setup

---
 packages/volto/news/6348.bugfix               |  1 +
 .../manage/Widgets/SelectStyling.jsx          | 25 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)
 create mode 100644 packages/volto/news/6348.bugfix

diff --git a/packages/volto/news/6348.bugfix b/packages/volto/news/6348.bugfix
new file mode 100644
index 0000000000..7ec8b1d385
--- /dev/null
+++ b/packages/volto/news/6348.bugfix
@@ -0,0 +1 @@
+Fixed missing visible focus for multiple select inputs across components using the SelectStyling widget in Site Setup. The fix ensures proper focus indication for accessibility across all instances of the widget.@Abhishek-17h
diff --git a/packages/volto/src/components/manage/Widgets/SelectStyling.jsx b/packages/volto/src/components/manage/Widgets/SelectStyling.jsx
index c78a957b87..9dc7cc3eb4 100644
--- a/packages/volto/src/components/manage/Widgets/SelectStyling.jsx
+++ b/packages/volto/src/components/manage/Widgets/SelectStyling.jsx
@@ -112,10 +112,13 @@ export const customSelectStyles = {
   control: (styles, state) => ({
     ...styles,
     border: 'none',
-    borderBottom: '1px solid #c7d5d8',
-    boxShadow: 'none',
-    borderBottomStyle: state.menuIsOpen ? 'dotted' : 'solid',
+    borderBottom: `1px ${state.menuIsOpen ? 'dotted' : 'solid'} ${
+      state.isFocused ? '#339edc' : '#c7d5d8'
+    }`,
+    boxShadow: state.isFocused ? '0 2px 0 #339edc' : 'none',
     minHeight: '60px',
+    transition: 'all 0.2s ease-in-out',
+    outline: 'none',
   }),
   menu: (styles, state) => ({
     ...styles,
@@ -141,21 +144,21 @@ export const customSelectStyles = {
   }),
   option: (styles, state) => ({
     ...styles,
-    backgroundColor: null,
-    minHeight: '50px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '12px 12px',
+    backgroundColor: state.isFocused ? '#e5f4fb' : null,
     color: state.isSelected
       ? '#007bc1'
       : state.isDisabled
         ? '#b5b5b5'
         : state.isFocused
-          ? '#4a4a4a'
+          ? '#339edc'
           : 'inherit',
+    minHeight: '50px',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 12px',
     ':active': {
-      backgroundColor: null,
+      backgroundColor: state.isFocused ? '#e5f4fb' : null,
     },
     svg: {
       flex: '0 0 auto',

From 039bab35839e57697ff6721f3d962306375c9bfa Mon Sep 17 00:00:00 2001
From: Abhishek-17H <abhishekhegaje1702@gmail.com>
Date: Tue, 17 Dec 2024 16:28:42 +0530
Subject: [PATCH 2/3] Update snapshots to match new UI behavior

---
 .../manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap  | 6 +++---
 .../Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap  | 2 +-
 .../manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap | 6 +++---
 .../manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap  | 2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap
index e37658da42..a18f34b799 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap
@@ -48,7 +48,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
               </span>
             </span>
             <div
-              class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-1ptmoe7-control"
+              class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-1hjt58o-control"
             >
               <div
                 class="react-select__value-container react-select__value-container--is-multi css-1a9cv00-ValueContainer"
@@ -110,7 +110,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
                 class="react-select__menu-list react-select__menu-list--is-multi css-4ljt47-MenuList"
               >
                 <div
-                  class="react-select__option react-select__option--is-focused css-p2m0aa-option"
+                  class="react-select__option react-select__option--is-focused css-urhxxr-option"
                   id="react-select-3-option-0"
                   tabindex="-1"
                 >
@@ -188,7 +188,7 @@ exports[`renders an array widget component 1`] = `
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className="react-select__control css-1ard45z-control"
+            className="react-select__control css-j8u6so-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >
diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap
index ace11ea5a4..44f90d9142 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap
@@ -39,7 +39,7 @@ exports[`renders a select widget component 1`] = `
               class="css-1f43avz-a11yText-A11yText"
             />
             <div
-              class="react-select__control css-1ard45z-control"
+              class="react-select__control css-j8u6so-control"
             >
               <div
                 class="react-select__value-container react-select__value-container--is-multi css-1a9cv00-ValueContainer"
diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap
index 8433abffa3..92dc421162 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap
@@ -48,7 +48,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
               </span>
             </span>
             <div
-              class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-1ptmoe7-control"
+              class="react-select__control react-select__control--is-focused react-select__control--menu-is-open css-1hjt58o-control"
             >
               <div
                 class="react-select__value-container react-select__value-container--has-value css-1a9cv00-ValueContainer"
@@ -121,7 +121,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
                 class="react-select__menu-list css-4ljt47-MenuList"
               >
                 <div
-                  class="react-select__option react-select__option--is-focused react-select__option--is-selected css-zq2nh-option"
+                  class="react-select__option react-select__option--is-focused react-select__option--is-selected css-1bv2on4-option"
                   id="react-select-3-option-0"
                   tabindex="-1"
                 >
@@ -204,7 +204,7 @@ exports[`renders a select widget component 1`] = `
               class="css-1f43avz-a11yText-A11yText"
             />
             <div
-              class="react-select__control css-1ard45z-control"
+              class="react-select__control css-j8u6so-control"
             >
               <div
                 class="react-select__value-container css-1a9cv00-ValueContainer"
diff --git a/packages/volto/src/components/manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap b/packages/volto/src/components/manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap
index 2c9f365436..202fc97949 100644
--- a/packages/volto/src/components/manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap
+++ b/packages/volto/src/components/manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap
@@ -39,7 +39,7 @@ exports[`renders a token widget component 1`] = `
             className="css-1f43avz-a11yText-A11yText"
           />
           <div
-            className="react-select__control css-1ard45z-control"
+            className="react-select__control css-j8u6so-control"
             onMouseDown={[Function]}
             onTouchEnd={[Function]}
           >

From 3aec26790343b23850d1cb408cf2d706a302f3b7 Mon Sep 17 00:00:00 2001
From: Bhanudas Hegaje <abhishekhegaje1702@gmail.com>
Date: Wed, 18 Dec 2024 16:54:55 +0530
Subject: [PATCH 3/3] Update packages/volto/news/6348.bugfix

Co-authored-by: Steve Piercy <web@stevepiercy.com>
---
 packages/volto/news/6348.bugfix | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/volto/news/6348.bugfix b/packages/volto/news/6348.bugfix
index 7ec8b1d385..c094d685c9 100644
--- a/packages/volto/news/6348.bugfix
+++ b/packages/volto/news/6348.bugfix
@@ -1 +1 @@
-Fixed missing visible focus for multiple select inputs across components using the SelectStyling widget in Site Setup. The fix ensures proper focus indication for accessibility across all instances of the widget.@Abhishek-17h
+Added visible focus for multiple select inputs across components using the `SelectStyling` widget in Site Setup. The fix ensures proper focus indication for accessibility across all instances of the widget. @Abhishek-17h