diff --git a/packages/volto/news/7981.bugfix b/packages/volto/news/7981.bugfix new file mode 100644 index 0000000000..a87e3e2248 --- /dev/null +++ b/packages/volto/news/7981.bugfix @@ -0,0 +1 @@ +Add `aria-required` or `aria-invalid` classes only if the field is required or contains errors, respectively. @Wagner3UB \ No newline at end of file diff --git a/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx b/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx index 3e64bcae95..c21c33e459 100644 --- a/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx +++ b/packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx @@ -2,7 +2,7 @@ * FormFieldWrapper component. * @module components/manage/Widgets/FormFieldWrapper */ -import React from 'react'; +import React, { Children, isValidElement, cloneElement } from 'react'; import PropTypes from 'prop-types'; import { Form, Grid, Icon as IconOld, Label } from 'semantic-ui-react'; import map from 'lodash/map'; @@ -59,7 +59,15 @@ const FormFieldWrapper = ({ const wdg = ( <> - {children} + {Children.map(children, (child) => { + if (isValidElement(child) && required && child.type.name === 'Input') { + return cloneElement(child, { + 'aria-required': true, + 'aria-invalid': !!(error && error.length > 0), + }); + } + return child; + })} {map(error, (message) => (