[Modal, Frame(Nav), Sheet] Trapped virtual cursor inside dialogs

UNRELEASED.md

@@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed virtual cursor leaving dialog in `Modal`, `Navigation` and `Sheet` ([#3931](https://github.com/Shopify/polaris-react/pull/3931))
+
 ### Documentation
 
 ### Development workflow

locales/en.json

@@ -113,6 +113,7 @@
     },
     "Frame": {
       "skipToContent": "Skip to content",
+      "navigationLabel": "Navigation",
       "Navigation": {
         "closeMobileNavigationLabel": "Close navigation"
       }

src/components/Frame/Frame.tsx

@@ -135,6 +135,9 @@ class FrameInner extends PureComponent<CombinedProps, State> {
           classNames={navTransitionClasses}
         >
           <div
+            aria-modal
+            role="dialog"
+            aria-label={i18n.translate('Polaris.Frame.navigationLabel')}
             ref={this.navigationNode}
             className={navClassName}
             onKeyDown={this.handleNavKeydown}

src/components/Frame/README.md

@@ -346,6 +346,7 @@ function FrameExample() {
             },
             Frame: {
               skipToContent: 'Skip to content',
+              navigationLabel: 'Navigation',
               Navigation: {
                 closeMobileNavigationLabel: 'Close navigation',
               },
@@ -680,6 +681,7 @@ function FrameExample() {
             },
             Frame: {
               skipToContent: 'Skip to content',
+              navigationLabel: 'Navigation',
               Navigation: {
                 closeMobileNavigationLabel: 'Close navigation',
               },

src/components/Modal/components/Dialog/Dialog.tsx

@@ -66,6 +66,7 @@ export function Dialog({
         <TrapFocus>
           <div
             role="dialog"
+            aria-modal
             aria-labelledby={labelledBy}
             tabIndex={-1}
             className={styles.Dialog}

src/components/Sheet/Sheet.tsx

@@ -76,6 +76,7 @@ export function Sheet({
           <TrapFocus trapping={open}>
             <div
               role="dialog"
+              aria-modal
               tabIndex={-1}
               className={styles.Sheet}
               aria-label={accessibilityLabel}