From 83f76a2e02a342cc6a5f25ae883f5c8a9323df4b 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 9e1d70673c04d0ff59abd128004073a390142894 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 011693a9d6804b5d16e8a748615ecfbfffc8d7a6 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