diff --git a/packages/volto-slate/news/6803.bugfix b/packages/volto-slate/news/6803.bugfix new file mode 100644 index 0000000000..e3a82c0e20 --- /dev/null +++ b/packages/volto-slate/news/6803.bugfix @@ -0,0 +1 @@ +To ensure accessibility, an `aria-labelledby` attribute was added to the editable part of the `Slate` component. @Wagner3UB \ No newline at end of file diff --git a/packages/volto-slate/src/editor/SlateEditor.jsx b/packages/volto-slate/src/editor/SlateEditor.jsx index 6327abb883..d790b41247 100644 --- a/packages/volto-slate/src/editor/SlateEditor.jsx +++ b/packages/volto-slate/src/editor/SlateEditor.jsx @@ -213,6 +213,7 @@ class SlateEditor extends Component { render() { const { + id, selected, placeholder, onKeyDown, @@ -340,6 +341,7 @@ class SlateEditor extends Component { onKeyDown && onKeyDown({ editor, event }); }} {...editableProps} + aria-labelledby={`field-${id}`} /> {selected && slateSettings.persistentHelpers.map((Helper, i) => { diff --git a/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx b/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx index 226d17e4e6..f4e98666d8 100644 --- a/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx +++ b/packages/volto-slate/src/widgets/HtmlSlateWidget.jsx @@ -40,6 +40,7 @@ const HtmlSlateWidget = (props) => { onChange, value, focus, + fieldSet, className, block, placeholder, @@ -128,6 +129,7 @@ const HtmlSlateWidget = (props) => { id={id} name={id} value={valueFromHtml} + fieldSet={fieldSet} onChange={handleChange} block={block} selected={selected}