diff --git a/packages/volto/news/6348.bugfix b/packages/volto/news/6348.bugfix new file mode 100644 index 0000000000..c094d685c9 --- /dev/null +++ b/packages/volto/news/6348.bugfix @@ -0,0 +1 @@ +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 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', 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`] = `
@@ -188,7 +188,7 @@ exports[`renders an array widget component 1`] = ` className="css-1f43avz-a11yText-A11yText" />
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" />
@@ -204,7 +204,7 @@ exports[`renders a select widget component 1`] = ` class="css-1f43avz-a11yText-A11yText" />