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

Fix: Associate labels with input fields of File and Checkbox Widget #6592

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix: Associate labels with input fields of File and Checkbox Widget #6592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9becbeb
Fix: Associate labels with input fields of File and Checkbox Widget
Abhishek-17h Jan 15, 2025
0d684c2
Fix duplicate id issue in FileWidget and CheckboxWidget tests
Abhishek-17h Jan 15, 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 packages/volto/news/6341.bugfix
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
The input fields in `FileWidget` and `CheckboxWidget` are now programmatically associated with their labels, improving accessibility. Previously, the labels were not linked to their corresponding input fields. @Abhishek-17h
1 change: 1 addition & 0 deletions packages/volto/src/components/manage/Widgets/CheckboxWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ const CheckboxWidget = (props) => {
<FormFieldWrapper {...props} columns={1}>
<div className="wrapper">
<Checkbox
id={`field-${id}`}
name={`field-${id}`}
checked={value || false}
disabled={isDisabled}
Expand Down
10 changes: 7 additions & 3 deletions packages/volto/src/components/manage/Widgets/CheckboxWidget.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,11 @@ describe('CheckboxWidget', () => {

const { asFragment } = render(
<Provider store={store}>
<CheckboxWidget id="my-field" title="My field" onChange={() => {}} />
<CheckboxWidget
id="checkbox-widget"
title="Checkbox Widget"
onChange={() => {}}
/>
</Provider>,
);

Expand All @@ -37,8 +41,8 @@ describe('CheckboxWidget', () => {
<Provider store={store}>
<CheckboxWidget
value={true}
id="my-field"
title="My field"
id="checked-checkbox-widget"
title="Checked Checkbox Widget"
onChange={() => {}}
/>
</Provider>,
Expand Down
2 changes: 1 addition & 1 deletion packages/volto/src/components/manage/Widgets/FileWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ const FileWidget = (props) => {
</div>
)}

<label className="label-file-widget-input">
<label htmlFor={`field-${id}`} className="label-file-widget-input">
{value
? intl.formatMessage(messages.replaceFile)
: intl.formatMessage(messages.addNewFile)}
Expand Down
12 changes: 6 additions & 6 deletions packages/volto/src/components/manage/Widgets/FileWidget.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ describe('FileWidget', () => {
const { container } = render(
<Provider store={store}>
<FileWidget
id="my-field"
title="My field"
id="empty-file-widget"
title="Empty File Widget"
fieldSet="default"
onChange={() => {}}
/>
Expand All @@ -43,8 +43,8 @@ describe('FileWidget', () => {
const { container } = render(
<Provider store={store}>
<FileWidget
id="my-field"
title="My field"
id="file-widget-with-value"
title="File Widget With Value"
fieldSet="default"
onChange={() => {}}
value={{
Expand All @@ -71,8 +71,8 @@ describe('FileWidget', () => {
const { container } = render(
<Provider store={store}>
<FileWidget
id="my-field"
title="My field"
id="file-widget-raw-data"
title="File Widget With Raw Data"
fieldSet="default"
onChange={() => {}}
value={{
Expand Down
18 changes: 10 additions & 8 deletions packages/volto/src/components/manage/Widgets/__snapshots__/CheckboxWidget.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`CheckboxWidget renders a checkbox widget component 1`] = `
<DocumentFragment>
<div
class="inline field field-wrapper-my-field"
class="inline field field-wrapper-checkbox-widget"
>
<div
class="ui grid"
Expand All @@ -22,16 +22,17 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
>
<input
class="hidden"
name="field-my-field"
id="field-checkbox-widget"
name="field-checkbox-widget"
readonly=""
tabindex="0"
type="checkbox"
value=""
/>
<label
for="field-my-field"
for="field-checkbox-widget"
>
My field
Checkbox Widget
</label>
</div>
</div>
Expand All @@ -45,7 +46,7 @@ exports[`CheckboxWidget renders a checkbox widget component 1`] = `
exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
<DocumentFragment>
<div
class="inline field field-wrapper-my-field"
class="inline field field-wrapper-checked-checkbox-widget"
>
<div
class="ui grid"
Expand All @@ -65,16 +66,17 @@ exports[`CheckboxWidget renders a checkbox widget component checked 1`] = `
<input
checked=""
class="hidden"
name="field-my-field"
id="field-checked-checkbox-widget"
name="field-checked-checkbox-widget"
readonly=""
tabindex="0"
type="checkbox"
value=""
/>
<label
for="field-my-field"
for="field-checked-checkbox-widget"
>
My field
Checked Checkbox Widget
</label>
</div>
</div>
Expand Down
43 changes: 23 additions & 20 deletions packages/volto/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 @@ -3,7 +3,7 @@
exports[`FileWidget renders a file widget component with value 1`] = `
<div>
<div
class="inline field field-wrapper-my-field"
class="inline field field-wrapper-file-widget-with-value"
>
<div
class="ui grid"
Expand All @@ -18,10 +18,10 @@ exports[`FileWidget renders a file widget component with value 1`] = `
class="wrapper"
>
<label
for="field-my-field"
id="fieldset-default-field-label-my-field"
for="field-file-widget-with-value"
id="fieldset-default-field-label-file-widget-with-value"
>
My field
File Widget With Value
</label>
</div>
</div>
Expand All @@ -34,19 +34,20 @@ exports[`FileWidget renders a file widget component with value 1`] = `
>
<img
class="ui small image image-preview"
id="field-my-field-image"
id="field-file-widget-with-value-image"
src="http://myfile?id=0"
/>
<label
class="label-file-widget-input"
for="field-file-widget-with-value"
>
Replace existing file
</label>
<input
autocomplete="off"
id="field-my-field"
id="field-file-widget-with-value"
multiple=""
name="my-field"
name="file-widget-with-value"
style="display: none;"
tabindex="-1"
type="file"
Expand Down Expand Up @@ -86,7 +87,7 @@ exports[`FileWidget renders a file widget component with value 1`] = `
exports[`FileWidget renders a file widget component with value in raw data 1`] = `
<div>
<div
class="inline field field-wrapper-my-field"
class="inline field field-wrapper-file-widget-raw-data"
>
<div
class="ui grid"
Expand All @@ -101,10 +102,10 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
class="wrapper"
>
<label
for="field-my-field"
id="fieldset-default-field-label-my-field"
for="field-file-widget-raw-data"
id="fieldset-default-field-label-file-widget-raw-data"
>
My field
File Widget With Raw Data
</label>
</div>
</div>
Expand All @@ -117,19 +118,20 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
>
<img
class="ui small image image-preview"
id="field-my-field-image"
id="field-file-widget-raw-data-image"
src="data:image/png;base64,oiweurtksdgfjaslfqw9523563456"
/>
<label
class="label-file-widget-input"
for="field-file-widget-raw-data"
>
Replace existing file
</label>
<input
autocomplete="off"
id="field-my-field"
id="field-file-widget-raw-data"
multiple=""
name="my-field"
name="file-widget-raw-data"
style="display: none;"
tabindex="-1"
type="file"
Expand Down Expand Up @@ -168,7 +170,7 @@ exports[`FileWidget renders a file widget component with value in raw data 1`] =
exports[`FileWidget renders an empty file widget component 1`] = `
<div>
<div
class="inline field field-wrapper-my-field"
class="inline field field-wrapper-empty-file-widget"
>
<div
class="ui grid"
Expand All @@ -183,10 +185,10 @@ exports[`FileWidget renders an empty file widget component 1`] = `
class="wrapper"
>
<label
for="field-my-field"
id="fieldset-default-field-label-my-field"
for="field-empty-file-widget"
id="fieldset-default-field-label-empty-file-widget"
>
My field
Empty File Widget
</label>
</div>
</div>
Expand All @@ -208,14 +210,15 @@ exports[`FileWidget renders an empty file widget component 1`] = `
</div>
<label
class="label-file-widget-input"
for="field-empty-file-widget"
>
Choose a file
</label>
<input
autocomplete="off"
id="field-my-field"
id="field-empty-file-widget"
multiple=""
name="my-field"
name="empty-file-widget"
style="display: none;"
tabindex="-1"
type="file"
Expand Down
Loading