Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HtmlSlateWidget to proper identify the field to screen readers #6772

Open
wants to merge 10 commits into
base: 17.x.x
Choose a base branch
from
Open

HtmlSlateWidget to proper identify the field to screen readers #6772

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a382351
fix: aria-labelledby added to slate formFieldWrapper to proper identi…
Wagner3UB Feb 21, 2025
b9f5922
chore: 6772.bugfix
Wagner3UB Feb 21, 2025
23b0c03
fix: revert non neccessary changes
Wagner3UB Feb 21, 2025
1bf84a6
fix: removed test
Wagner3UB Feb 26, 2025
a8c7ada
chore: snapshots updated
Wagner3UB Feb 26, 2025
1b99343
chore: 6772.bugfix comment
Wagner3UB Feb 26, 2025
ba30e98
Merge branch '17.x.x' into htmlslatewidget-label-a11y
davisagli Mar 5, 2025
3f5d17a
fix: field-id
Wagner3UB Mar 5, 2025
a438417
Merge branch '17.x.x' into htmlslatewidget-label-a11y
Wagner3UB Mar 5, 2025
29bd5dd
Update news/6772.bugfix
davisagli Mar 6, 2025
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 news/6772.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
nsure proper screen reader identification of text fields created through the HtmlSlateWidget. @Wagner3UB
2 changes: 2 additions & 0 deletions packages/volto-slate/src/editor/SlateEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,7 @@ class SlateEditor extends Component {

render() {
const {
id,
selected,
placeholder,
onKeyDown,
Expand Down Expand Up @@ -335,6 +336,7 @@ class SlateEditor extends Component {
onKeyDown && onKeyDown({ editor, event });
}}
{...editableProps}
aria-labelledby={`field-${id}`}
/>
{selected &&
slateSettings.persistentHelpers.map((Helper, i) => {
Expand Down
2 changes: 2 additions & 0 deletions packages/volto-slate/src/widgets/HtmlSlateWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const HtmlSlateWidget = (props) => {
onChange,
value,
focus,
fieldSet,
className,
block,
placeholder,
Expand Down Expand Up @@ -128,6 +129,7 @@ const HtmlSlateWidget = (props) => {
id={id}
name={id}
value={valueFromHtml}
fieldSet={fieldSet}
onChange={handleChange}
block={block}
selected={selected}
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Blocks/LeadImage/__snapshots__/LeadImageSidebar.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`renders a Lead Image block Sidebar component 1`] = `
className="wrapper"
>
<label
htmlFor="field-alt"
htmlFor="fieldset-undefined-field-label-alt"
id="fieldset-undefined-field-label-alt"
>
Alt text
Expand Down Expand Up @@ -299,7 +299,7 @@ exports[`renders a Lead Image block Sidebar component 1`] = `
className="wrapper"
>
<label
htmlFor="field-link"
htmlFor="fieldset-undefined-field-label-link"
id="fieldset-undefined-field-label-link"
>
Link to
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Display/__snapshots__/Display.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`Display renders a Display component with more than one option 1`] = `
class="wrapper"
>
<label
for="field-display-select"
for="fieldset-undefined-field-label-display-select"
id="fieldset-undefined-field-label-display-select"
>
View
Expand Down
6 changes: 5 additions & 1 deletion src/components/manage/Widgets/FormFieldWrapper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,11 @@ class FormFieldWrapper extends Component {
<div className="wrapper">
<label
id={`fieldset-${fieldSet}-field-label-${id}`}
htmlFor={noForInFieldLabel ? null : `field-${id}`}
htmlFor={
noForInFieldLabel
? null
: `fieldset-${fieldSet}-field-label-${id}`
}
>
{draggable && onEdit && (
<i
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Widgets/__snapshots__/AlignWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`renders an align widget component basic 1`] = `
class="wrapper"
>
<label
for="field-align"
for="fieldset-default-field-label-align"
id="fieldset-default-field-label-align"
>
Alignment
Expand Down Expand Up @@ -137,7 +137,7 @@ exports[`renders an align widget component extended with actions and actionsInfo
class="wrapper"
>
<label
for="field-align"
for="fieldset-default-field-label-align"
id="fieldset-default-field-label-align"
>
Alignment
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Widgets/__snapshots__/ArrayWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -165,7 +165,7 @@ exports[`renders an array widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Widgets/__snapshots__/ButtonsWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`renders an align widget component basic 1`] = `
class="wrapper"
>
<label
for="field-align"
for="fieldset-default-field-label-align"
id="fieldset-default-field-label-align"
>
Alignment
Expand Down Expand Up @@ -137,7 +137,7 @@ exports[`renders an align widget component extended with actions and actionsInfo
class="wrapper"
>
<label
for="field-align"
for="fieldset-default-field-label-align"
id="fieldset-default-field-label-align"
>
Alignment
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Widgets/__snapshots__/DatetimeWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`datetime widget converts UTC date and adapt to local datetime 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-undefined-field-label-my-field"
id="fieldset-undefined-field-label-my-field"
>
My field
Expand Down Expand Up @@ -121,7 +121,7 @@ exports[`renders a datetime widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/EmailWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders an email widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-test-email"
htmlFor="fieldset-default-field-label-test-email"
id="fieldset-default-field-label-test-email"
>
My Email
Expand Down
6 changes: 3 additions & 3 deletions src/components/manage/Widgets/__snapshots__/FileWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`FileWidget renders a file widget component with value 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -93,7 +93,7 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -168,7 +168,7 @@ exports[`FileWidget renders an empty file widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
10 changes: 5 additions & 5 deletions src/components/manage/Widgets/__snapshots__/IdWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`IdWidget renders an empty id widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -63,7 +63,7 @@ exports[`IdWidget renders an id widget with a valid dot character 1`] = `
class="wrapper"
>
<label
for="field-my-field.jpg"
for="fieldset-default-field-label-my-field.jpg"
id="fieldset-default-field-label-my-field.jpg"
>
My field
Expand Down Expand Up @@ -108,7 +108,7 @@ exports[`IdWidget renders an id widget with a valid value 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -153,7 +153,7 @@ exports[`IdWidget renders an id widget with an reserved name 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -203,7 +203,7 @@ exports[`IdWidget renders an id widget with invalid characters 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/ImageSizeWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders an image sizes widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-image_size"
htmlFor="fieldset-default-field-label-image_size"
id="fieldset-default-field-label-image_size"
>
Image Size
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/NumberWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ Array [
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/ObjectBrowserWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders a objectBrowser widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/PasswordWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders a password widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/ReferenceWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders an array widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Widgets/__snapshots__/RegistryImageWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`RegistryImageWidget renders a file widget component with value 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -92,7 +92,7 @@ exports[`RegistryImageWidget renders an empty file widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/SelectAutoComplete.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`renders a select widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Widgets/__snapshots__/SelectWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`No 'No value' option when default value is 0 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down Expand Up @@ -182,7 +182,7 @@ exports[`renders a select widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
for="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/TextWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders a text widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/TextareaWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders a textarea widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/TokenWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders a token widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-my-field"
htmlFor="fieldset-default-field-label-my-field"
id="fieldset-default-field-label-my-field"
>
My field
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/UrlWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders an url widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-test-url"
htmlFor="fieldset-default-field-label-test-url"
id="fieldset-default-field-label-test-url"
>
My Url
Expand Down
2 changes: 1 addition & 1 deletion src/components/manage/Widgets/__snapshots__/VocabularyTermsWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ exports[`renders a dictionary widget component 1`] = `
className="wrapper"
>
<label
htmlFor="field-test-dict"
htmlFor="fieldset-default-field-label-test-dict"
id="fieldset-default-field-label-test-dict"
>
My Vocabulary
Expand Down
4 changes: 2 additions & 2 deletions src/components/manage/Workflow/__snapshots__/Workflow.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ exports[`Workflow renders a workflow component 1`] = `
class="wrapper"
>
<label
for="field-state-select"
for="fieldset-undefined-field-label-state-select"
id="fieldset-undefined-field-label-state-select"
>
State
Expand Down Expand Up @@ -110,7 +110,7 @@ exports[`Workflow renders an empty workflow component 1`] = `
class="wrapper"
>
<label
for="field-state-select"
for="fieldset-undefined-field-label-state-select"
id="fieldset-undefined-field-label-state-select"
>
State
Expand Down
Loading