From 80bf1ef8f0e804c7d90ea36d390821d1f5627cd5 Mon Sep 17 00:00:00 2001
From: Denys Bohdan <denys_bohdan@epam.com>
Date: Mon, 6 Jan 2025 14:24:43 +0100
Subject: [PATCH 1/2] STSMACOM-882 `<NoteFields>` improve "Display as pop-up"
 markup and fix label a11y issue.

---
 CHANGELOG.md                                  |  1 +
 .../components/NoteFields/NoteFields.js       | 56 ++++++++-----------
 2 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 727aea175..1c2a7689f 100644
--- 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
index 8b537c295..ca171565a 100644
--- 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 for="display-as-popup-group">
+                <span className={styles.heading}>
+                  <FormattedMessage id="stripes-smart-components.notes.displayAsPopup.label" />
+                </span>
+              </Label>
+              <div id="display-as-popup-group">
+                <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}
+                />
+              </div>
             </Col>
           </Row>
         )}

From d4c3c1a3c4072950d4ba12635617cda613efcfed Mon Sep 17 00:00:00 2001
From: Denys Bohdan <denys_bohdan@epam.com>
Date: Tue, 7 Jan 2025 10:03:51 +0100
Subject: [PATCH 2/2] STSMACOM-882 use a different approach to fix Notes
 display as a pop-up label

---
 .../components/NoteForm/components/NoteFields/NoteFields.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/Notes/components/NoteForm/components/NoteFields/NoteFields.js b/lib/Notes/components/NoteForm/components/NoteFields/NoteFields.js
index ca171565a..d28bd26bc 100644
--- a/lib/Notes/components/NoteForm/components/NoteFields/NoteFields.js
+++ b/lib/Notes/components/NoteForm/components/NoteFields/NoteFields.js
@@ -90,12 +90,12 @@ export default class NoteFields extends Component {
         {showDisplayAsPopupOptions && (
           <Row>
             <Col xs={12}>
-              <Label for="display-as-popup-group">
+              <Label id="display-as-popup-group-label">
                 <span className={styles.heading}>
                   <FormattedMessage id="stripes-smart-components.notes.displayAsPopup.label" />
                 </span>
               </Label>
-              <div id="display-as-popup-group">
+              <fieldset aria-labelledby="display-as-popup-group-label">
                 <Field
                   name="popUpOnCheckOut"
                   type="checkbox"
@@ -112,7 +112,7 @@ export default class NoteFields extends Component {
                   label={<FormattedMessage id="stripes-smart-components.notes.displayAsPopup.users" />}
                   readOnly={fieldsAreDisabled}
                 />
-              </div>
+              </fieldset>
             </Col>
           </Row>
         )}