Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix focus visibility for input components in site setup #6544

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Fix focus visibility for input components in site setup #6544

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83f76a2
Fix focus visibility for input components in site setup
Abhishek-17h Dec 17, 2024
9e1d706
Update snapshots to match new UI behavior
Abhishek-17h Dec 17, 2024
011693a
Update packages/volto/news/6348.bugfix
Abhishek-17h Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/volto/news/6348.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
25 changes: 14 additions & 11 deletions packages/volto/src/components/manage/Widgets/SelectStyling.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Abhishek-17h out of curiosity, where did you get the colors in this PR? I know we're picky about being consistent with colors, especially to ensure sufficient contrast for accessibility. I don't know where we capture them all in a single place, like a style guide.

Hopefully someone from the @plone/volto-accessibility team can inform me. If this thing does not exist, it might be a good thing to add to our accessibility PLIP #6504.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @stevepiercy. I think we at least need documentation with use cases, such as focus and minimal contrast for the main font color, links, and buttons. It could indeed be a nice touch for the PLIP. I'll add a comment to the PLIP.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stevepiercy I understand that the Volto team is particular about color choices, which is why I used an existing color from the SelectStyling and applied a lighter version of it. This approach ensures that users can easily differentiate between selected and hovered inputs.
I didn’t use any specific tools to choose the color but made the adjustment to align with accessibility considerations and consistency within the existing design.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stevepiercy Thank you for your kind words! I'm glad to contribute to improving Volto. 😊

},
svg: {
flex: '0 0 auto',
Expand Down
6 changes: 3 additions & 3 deletions packages/volto/src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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]}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/volto/src/components/manage/Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion packages/volto/src/components/manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
>
Expand Down
Loading