STSMACOM-882 <NoteFields> improve "Display as pop-up" markup and fi…

…x label a11y issue. (#1553) ## Description axe previously showed an a11y issue related to checkbox group labels. Latest code doesn't show this issue anymore, but applied the fix anyways. Re-organized "Display as pop-up" checkbox group markup. ## Screenshots ![image](https://github.com/user-attachments/assets/6c90e93c-ed4d-454d-8c24-874e324d6c85) ## Issues [STSMACOM-882](https://folio-org.atlassian.net/browse/STSMACOM-882)
folio-org · Jan 8, 2025 · 101386a · 101386a
1 parent 18fdf67
commit 101386a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * Remove unnecessary `aria-rowindex` in `ItemView` and `ItemEdit` components. Fixes STSMACOM-871.
 * Check for `active` status of `<Settings>` navigation links independently from the applied href and query string. Query string should only be applied to active link. Refs STSMACOM-837.
 * `<EditableListForm>` use `lodash.isEmpty` to check for empty `state.status` in re-initialization checks on component update. Fixes STSMACOM-876.
+* `<NoteFields>` improve "Display as pop-up" markup and fix label a11y issue. Refs STSMACOM-882.
 
 ## [9.2.3] IN PROGRESS
 

diff --git a/lib/Notes/components/NoteForm/components/NoteFields/NoteFields.js b/lib/Notes/components/NoteForm/components/NoteFields/NoteFields.js
@@ -90,39 +90,29 @@ export default class NoteFields extends Component {
         {showDisplayAsPopupOptions && (
           <Row>
             <Col xs={12}>
-              <Row>
-                <Col xs={12}>
-                  <Label tagName="div">
-                    <span className={styles.heading}>
-                      <FormattedMessage id="stripes-smart-components.notes.displayAsPopup.label" />
-                    </span>
-                  </Label>
-                </Col>
-              </Row>
-              <Row>
-                <Col xs={12}>
-                  <Field
-                    name="popUpOnCheckOut"
-                    type="checkbox"
-                    component={Checkbox}
-                    data-test-note-popup-on-checkout-field
-                    label={<FormattedMessage id="stripes-smart-components.notes.displayAsPopup.checkout" />}
-                    readOnly={fieldsAreDisabled}
-                  />
-                </Col>
-              </Row>
-              <Row>
-                <Col xs={12}>
-                  <Field
-                    name="popUpOnUser"
-                    type="checkbox"
-                    component={Checkbox}
-                    data-test-note-popup-on-users-field
-                    label={<FormattedMessage id="stripes-smart-components.notes.displayAsPopup.users" />}
-                    readOnly={fieldsAreDisabled}
-                  />
-                </Col>
-              </Row>
+              <Label id="display-as-popup-group-label">
+                <span className={styles.heading}>
+                  <FormattedMessage id="stripes-smart-components.notes.displayAsPopup.label" />
+                </span>
+              </Label>
+              <fieldset aria-labelledby="display-as-popup-group-label">
+                <Field
+                  name="popUpOnCheckOut"
+                  type="checkbox"
+                  component={Checkbox}
+                  data-test-note-popup-on-checkout-field
+                  label={<FormattedMessage id="stripes-smart-components.notes.displayAsPopup.checkout" />}
+                  readOnly={fieldsAreDisabled}
+                />
+                <Field
+                  name="popUpOnUser"
+                  type="checkbox"
+                  component={Checkbox}
+                  data-test-note-popup-on-users-field
+                  label={<FormattedMessage id="stripes-smart-components.notes.displayAsPopup.users" />}
+                  readOnly={fieldsAreDisabled}
+                />
+              </fieldset>
             </Col>
           </Row>
         )}