Skip to content
Open
Show file tree
Hide file tree
Changes from 2 commits
Commits
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/7981.bugfix
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Aria-required and aria-invalid are added only if the field is required or contains errors, respectively - @Wagner3UB
12 changes: 10 additions & 2 deletions packages/volto/src/components/manage/Widgets/FormFieldWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) => (
<Label key={message} basic color="red" className="form-error-label">
Expand Down
Loading