Labels accessibility for ArrayWidget, SelectWidget, TokenWidget (plon…

…e#6332) Co-authored-by: Piero Nicolli <[email protected]>
victorchrollo14 · Sep 27, 2024 · d81a0d3 · d81a0d3
1 parent a2d997b
commit d81a0d3
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 0 deletions.
diff --git a/packages/volto/news/6332.bugfix b/packages/volto/news/6332.bugfix
@@ -0,0 +1 @@
+Labels accessibility for ArrayWidget, SelectWidget, TokenWidget. @folix-01
diff --git a/packages/volto/src/components/manage/Widgets/ArrayWidget.jsx b/packages/volto/src/components/manage/Widgets/ArrayWidget.jsx
@@ -314,6 +314,7 @@ class ArrayWidget extends Component {
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           isDisabled={this.props.disabled || this.props.isDisabled}
           className="react-select-container"

diff --git a/packages/volto/src/components/manage/Widgets/SelectWidget.jsx b/packages/volto/src/components/manage/Widgets/SelectWidget.jsx
@@ -224,6 +224,7 @@ class SelectWidget extends Component {
           id={`field-${id}`}
           key={choices}
           name={id}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}

diff --git a/packages/volto/src/components/manage/Widgets/TokenWidget.jsx b/packages/volto/src/components/manage/Widgets/TokenWidget.jsx
@@ -173,6 +173,7 @@ class TokenWidget extends Component {
       <FormFieldWrapper {...this.props}>
         <CreatableSelect
           id={`field-${this.props.id}`}
+          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
           key={this.props.id}
           menuShouldScrollIntoView={false}
           isDisabled={this.props.isDisabled}

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
@@ -67,6 +67,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
                   >
                     <input
                       aria-autocomplete="list"
+                      aria-labelledby="fieldset-default-field-label-my-field"
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"
@@ -212,6 +213,7 @@ exports[`renders an array widget component 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-labelledby="fieldset-default-field-label-my-field"
                     autoCapitalize="none"
                     autoComplete="off"
                     autoCorrect="off"

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
@@ -67,6 +67,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
                   >
                     <input
                       aria-autocomplete="list"
+                      aria-labelledby="fieldset-default-field-label-my-field"
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"
@@ -222,6 +223,7 @@ exports[`renders a select widget component 1`] = `
                   >
                     <input
                       aria-autocomplete="list"
+                      aria-labelledby="fieldset-default-field-label-my-field"
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"

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
@@ -64,6 +64,7 @@ exports[`renders a token widget component 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
+                    aria-labelledby="fieldset-default-field-label-my-field"
                     autoCapitalize="none"
                     autoComplete="off"
                     autoCorrect="off"