fix(a11y): improve screen reader support for select and array widgets

packages/volto/news/8313.bugfix

@@ -0,0 +1 @@
+Improved screen reader support in SelectWidget and ArrayWidget: added dynamic aria-label with field name and current value, keyboard navigation for selected chips, and hidden the clear button on required fields. @Wagner3UB

packages/volto/src/components/manage/Widgets/ArrayWidget.jsx

@@ -327,8 +327,18 @@ class ArrayWidget extends Component {
           >
             <SelectComponent
               menuShouldScrollIntoView={false}
-              id={`field-${this.props.id}`}
-              aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${this.props.id}`}
+              id={`select-container-${this.props.id}`}
+              inputId={`field-${this.props.id}`}
+              fieldTitle={this.props.title}
+              aria-label={
+                this.props.title
+                  ? `${this.props.title}: ${
+                      selectedOption?.length > 0
+                        ? selectedOption.map((v) => v.label).join(', ')
+                        : this.props.intl.formatMessage(messages.no_value)
+                    }`
+                  : undefined
+              }
               key={this.props.id}
               isDisabled={this.props.disabled || this.props.isDisabled}
               className="react-select-container"
@@ -400,7 +410,7 @@ class ArrayWidget extends Component {
                   )
                 )
               }
-              isClearable
+              isClearable={!this.props.required}
               isMulti
             />
           </SortableContext>

packages/volto/src/components/manage/Widgets/SelectStyling.jsx

@@ -46,6 +46,14 @@ export const SortableMultiValue = injectLazyLibs([
       }}
       {...attributes}
       {...listeners}
+      tabIndex={-1}
+      aria-label={`${props.selectProps.fieldTitle || ''}: ${props.data.label}`}
+      onKeyDown={(e) => {
+        if (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Enter') {
+          e.preventDefault();
+          props.removeProps?.onClick?.(e);
+        }
+      }}
     >
       <MultiValue
         {...props}
@@ -68,7 +76,7 @@ export const MultiValueContainer = injectLazyLibs('reactSelect')((props) => {
     <Popup
       content={props.data.label}
       trigger={
-        <div {...props.innerProps}>
+        <div ref={props.innerProps?.ref}>
           <MultiValueContainer {...props} />
         </div>
       }
@@ -83,6 +91,8 @@ export const MultiValueRemove = injectLazyLibs(['reactSelect'])((props) => {
       {...props}
       innerProps={{
         ...props.innerProps,
+        role: 'button',
+        tabIndex: -1,
         onPointerDown: (e) => e.stopPropagation(),
       }}
     />

packages/volto/src/components/manage/Widgets/SelectWidget.jsx

@@ -262,10 +262,22 @@ class SelectWidget extends Component {
     return (
       <FormFieldWrapper {...this.props}>
         <Select
-          id={`field-${id}`}
+          id={`select-container-${id}`}
+          inputId={`field-${id}`}
+          fieldTitle={this.props.title}
           key={choices}
           name={id}
-          aria-labelledby={`fieldset-${this.props.fieldSet}-field-label-${id}`}
+          aria-label={
+            this.props.title
+              ? `${this.props.title}: ${
+                  normalizedValue
+                    ? Array.isArray(normalizedValue)
+                      ? normalizedValue.map((v) => v.label).join(', ')
+                      : normalizedValue.label
+                    : intl.formatMessage(messages.no_value)
+                }`
+              : undefined
+          }
           menuShouldScrollIntoView={false}
           isDisabled={disabled}
           isSearchable={true}
@@ -304,7 +316,7 @@ class SelectWidget extends Component {
                 : undefined,
             );
           }}
-          isClearable={this.props.isClearable}
+          isClearable={!this.props.required && this.props.isClearable}
         />
       </FormFieldWrapper>
     );

packages/volto/src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap

@@ -30,7 +30,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
         >
           <div
             class="react-select-container css-2b097c-container"
-            id="field-my-field"
+            id="select-container-my-field"
           >
             <span
               aria-atomic="false"
@@ -67,11 +67,11 @@ exports[`No 'No value' option when default value is 0 1`] = `
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-labelledby="fieldset-default-field-label-my-field"
+                      aria-label="My field: No value"
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"
-                      id="react-select-3-input"
+                      id="field-my-field"
                       spellcheck="false"
                       style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;"
                       tabindex="0"
@@ -228,7 +228,7 @@ exports[`renders an array widget component 1`] = `
       >
         <div
           className="react-select-container css-2b097c-container"
-          id="field-my-field"
+          id="select-container-my-field"
           onKeyDown={[Function]}
         >
           <span
@@ -263,12 +263,12 @@ exports[`renders an array widget component 1`] = `
                 >
                   <input
                     aria-autocomplete="list"
-                    aria-labelledby="fieldset-default-field-label-my-field"
+                    aria-label="My field: No value"
                     autoCapitalize="none"
                     autoComplete="off"
                     autoCorrect="off"
                     disabled={false}
-                    id="react-select-2-input"
+                    id="field-my-field"
                     onBlur={[Function]}
                     onChange={[Function]}
                     onFocus={[Function]}

packages/volto/src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap

@@ -30,7 +30,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
         >
           <div
             class="react-select-container css-2b097c-container"
-            id="field-my-field"
+            id="select-container-my-field"
           >
             <span
               aria-atomic="false"
@@ -67,11 +67,11 @@ exports[`No 'No value' option when default value is 0 1`] = `
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-labelledby="fieldset-default-field-label-my-field"
+                      aria-label="My field: None"
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"
-                      id="react-select-3-input"
+                      id="field-my-field"
                       spellcheck="false"
                       style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;"
                       tabindex="0"
@@ -233,7 +233,7 @@ exports[`renders a select widget component 1`] = `
         >
           <div
             class="react-select-container css-2b097c-container"
-            id="field-my-field"
+            id="select-container-my-field"
           >
             <span
               aria-atomic="false"
@@ -261,11 +261,11 @@ exports[`renders a select widget component 1`] = `
                   >
                     <input
                       aria-autocomplete="list"
-                      aria-labelledby="fieldset-default-field-label-my-field"
+                      aria-label="My field: No value"
                       autocapitalize="none"
                       autocomplete="off"
                       autocorrect="off"
-                      id="react-select-2-input"
+                      id="field-my-field"
                       spellcheck="false"
                       style="box-sizing: content-box; width: 2px; background: 0px center; border: 0px; font-size: inherit; opacity: 1; outline: 0px; padding: 0px; color: inherit;"
                       tabindex="0"