From e88b2057183c198e30b1d314482de2178664297b Mon Sep 17 00:00:00 2001
From: Sangeetha Babu <58620134+sangeethababu9223@users.noreply.github.com>
Date: Thu, 19 Sep 2024 12:38:42 +0530
Subject: [PATCH] fix(ExportModal): screen reader indentifies hidden controls

---
 .../components/ExportModal/ExportModal.tsx    | 189 +++++++++---------
 1 file changed, 98 insertions(+), 91 deletions(-)

diff --git a/packages/ibm-products/src/components/ExportModal/ExportModal.tsx b/packages/ibm-products/src/components/ExportModal/ExportModal.tsx
index ba95670492..7e52be5424 100644
--- a/packages/ibm-products/src/components/ExportModal/ExportModal.tsx
+++ b/packages/ibm-products/src/components/ExportModal/ExportModal.tsx
@@ -17,6 +17,7 @@ import {
   RadioButton,
   RadioButtonGroup,
   TextInput,
+  unstable_FeatureFlags as FeatureFlags,
 } from '@carbon/react';
 import { CheckmarkFilled, ErrorFilled } from '@carbon/react/icons';
 import React, {
@@ -254,101 +255,107 @@ export let ExportModal = forwardRef(
     };
 
     return renderPortalUse(
-      <ComposedModal
-        {...rest}
-        className={cx(blockClass, className)}
-        aria-label={title}
-        size="sm"
-        preventCloseOnClickOutside
-        {...{ open, ref, onClose, ...getDevtoolsProps(componentName) }}
+      <FeatureFlags
+        flags={{
+          'enable-experimental-focus-wrap-without-sentinels': true,
+        }}
       >
-        <ModalHeader
-          className={`${blockClass}__header`}
-          closeModal={onClose}
-          title={title}
-        />
-        <ModalBody className={`${blockClass}__body-container`}>
-          {!submitted && (
-            <>
-              {body && <p className={`${blockClass}__body`}>{body}</p>}
-              {preformattedExtensions.length ? (
-                <FormGroup legendText={preformattedExtensionsLabel}>
-                  <RadioButtonGroup
-                    orientation="vertical"
-                    onChange={onExtensionChangeHandler}
-                    valueSelected={extension}
-                    name="extensions"
-                  >
-                    {preformattedExtensions.map((o) => (
-                      <RadioButton
-                        key={o.extension}
-                        id={o.extension}
-                        value={o.extension}
-                        labelText={`${o.extension} (${o.description})`}
-                        data-modal-primary-focus
-                      />
-                    ))}
-                  </RadioButtonGroup>
-                </FormGroup>
-              ) : (
-                <div className={`${blockClass}__input-container`}>
-                  {inputType === 'text' ? (
-                    <TextInput {...commonInputProps} />
-                  ) : (
-                    <PasswordInput
-                      {...commonInputProps}
-                      showPasswordLabel={showPasswordLabel}
-                      hidePasswordLabel={hidePasswordLabel}
-                      tooltipPosition="left"
-                    />
-                  )}
-                </div>
-              )}
-            </>
-          )}
-          <div className={`${blockClass}__messaging`}>
-            {loading && (
-              <>
-                <Loading small withOverlay={false} />
-                <p>{loadingMessage}</p>
-              </>
-            )}
-            {successful && (
-              <>
-                <CheckmarkFilled
-                  size={16}
-                  className={`${blockClass}__checkmark-icon`}
-                />
-                <p>{successMessage}</p>
-              </>
-            )}
-            {error && (
+        <ComposedModal
+          {...rest}
+          className={cx(blockClass, className)}
+          aria-label={title}
+          size="sm"
+          preventCloseOnClickOutside
+          {...{ open, ref, onClose, ...getDevtoolsProps(componentName) }}
+        >
+          <ModalHeader
+            className={`${blockClass}__header`}
+            closeModal={onClose}
+            title={title}
+          />
+          <ModalBody className={`${blockClass}__body-container`}>
+            {!submitted && (
               <>
-                <ErrorFilled
-                  size={16}
-                  className={`${blockClass}__error-icon`}
-                />
-                <p>{errorMessage}</p>
+                {body && <p className={`${blockClass}__body`}>{body}</p>}
+                {preformattedExtensions.length ? (
+                  <FormGroup legendText={preformattedExtensionsLabel}>
+                    <RadioButtonGroup
+                      orientation="vertical"
+                      onChange={onExtensionChangeHandler}
+                      valueSelected={extension}
+                      name="extensions"
+                    >
+                      {preformattedExtensions.map((o) => (
+                        <RadioButton
+                          key={o.extension}
+                          id={o.extension}
+                          value={o.extension}
+                          labelText={`${o.extension} (${o.description})`}
+                          data-modal-primary-focus
+                        />
+                      ))}
+                    </RadioButtonGroup>
+                  </FormGroup>
+                ) : (
+                  <div className={`${blockClass}__input-container`}>
+                    {inputType === 'text' ? (
+                      <TextInput {...commonInputProps} />
+                    ) : (
+                      <PasswordInput
+                        {...commonInputProps}
+                        showPasswordLabel={showPasswordLabel}
+                        hidePasswordLabel={hidePasswordLabel}
+                        tooltipPosition="left"
+                      />
+                    )}
+                  </div>
+                )}
               </>
             )}
-          </div>
-        </ModalBody>
-        {!submitted && (
-          <ModalFooter className={`${blockClass}__footer`}>
-            <Button type="button" kind="secondary" onClick={onClose}>
-              {secondaryButtonText}
-            </Button>
-            <Button
-              type="submit"
-              kind="primary"
-              onClick={onSubmitHandler}
-              disabled={primaryButtonDisabled}
-            >
-              {primaryButtonText}
-            </Button>
-          </ModalFooter>
-        )}
-      </ComposedModal>
+            <div className={`${blockClass}__messaging`}>
+              {loading && (
+                <>
+                  <Loading small withOverlay={false} />
+                  <p>{loadingMessage}</p>
+                </>
+              )}
+              {successful && (
+                <>
+                  <CheckmarkFilled
+                    size={16}
+                    className={`${blockClass}__checkmark-icon`}
+                  />
+                  <p>{successMessage}</p>
+                </>
+              )}
+              {error && (
+                <>
+                  <ErrorFilled
+                    size={16}
+                    className={`${blockClass}__error-icon`}
+                  />
+                  <p>{errorMessage}</p>
+                </>
+              )}
+            </div>
+          </ModalBody>
+          {!submitted && (
+            <ModalFooter className={`${blockClass}__footer`}>
+              <Button type="button" kind="secondary" onClick={onClose}>
+                {secondaryButtonText}
+              </Button>
+              <Button
+                type="submit"
+                kind="primary"
+                onClick={onSubmitHandler}
+                disabled={primaryButtonDisabled}
+              >
+                {primaryButtonText}
+              </Button>
+            </ModalFooter>
+          )}
+        </ComposedModal>
+      </FeatureFlags>
     );
   }
 );