fix(a11y): mobile tab navigation (#51669)

client/src/templates/Challenges/classic/classic.css

@@ -92,20 +92,26 @@
 }
 
 #mobile-layout .nav-lists {
-  margin: 0 1px;
+  margin: 0;
   padding: 0;
   display: flex;
   border-bottom: 1px solid var(--quaternary-color);
+  height: 2rem;
+  flex-shrink: 0;
 }
 
-/* Need to narrow width to make room for preview toggle button */
-#mobile-layout .nav-lists[data-haspreview='true'] {
-  width: calc(100% - 2rem - 2px);
+/* Need to narrow width of tabs to make room for preview toggle button */
+#mobile-layout[data-haspreview='true'] [role='tablist'] {
+  width: calc(100% - 2rem);
 }
 
 #mobile-layout .nav-lists > button {
-  height: 2.5em;
+  height: 100%;
   font-size: 0.8em;
+  /* Need to override radix-ui defaults on side padding to allow room for
+     four tabs and a preview toggle button at narrow view ports */
+  padding-left: 0.2rem;
+  padding-right: 0.2rem;
 }
 
 #mobile-layout .nav-lists button[data-state='active'] {
@@ -129,6 +135,9 @@
   width: 2rem;
   border: 0;
   padding: 0;
+  background-color: inherit;
+  font-size: 0.8rem;
+  height: 100%;
 }
 
 .portal-button[aria-expanded='true'] {
@@ -172,13 +181,12 @@
   flex-direction: column;
 }
 
-#mobile-layout .portal-button {
+#mobile-layout .portal-button-wrap {
+  position: absolute;
   top: calc(var(--header-height) + var(--breadcrumbs-height));
-}
-
-#mobile-layout .portal-button svg {
-  height: 18px;
-  padding-block-start: 3px;
+  right: 0;
+  height: 2rem;
+  border-bottom: 1px solid var(--quaternary-color);
 }
 
 #mobile-layout #mobile-layout-pane-instructions {

client/src/templates/Challenges/classic/mobile-layout.tsx

@@ -86,9 +86,9 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
     currentTab: this.props.hasEditableBoundaries ? Tab.Editor : Tab.Instructions
   };
 
-  switchTab = (tab: Tab): void => {
+  switchTab = (tab: string): void => {
     this.setState({
-      currentTab: tab
+      currentTab: tab as Tab
     });
   };
 
@@ -215,6 +215,7 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
           onMouseDown={this.handleClick}
           onTouchStart={this.handleClick}
           defaultValue={currentTab}
+          onValueChange={this.switchTab}
           {...(hasPreview && { 'data-haspreview': 'true' })}
         >
           <TabsList className='nav-lists'>
@@ -239,14 +240,6 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
                 {i18next.t('learn.editor-tabs.preview')}
               </TabsTrigger>
             )}
-            <button
-              className='portal-button'
-              aria-expanded={!!showPreviewPortal}
-              onClick={() => togglePane('showPreviewPortal')}
-            >
-              <span className='sr-only'>{getPortalBtnSrText()}</span>
-              <FontAwesomeIcon icon={faWindowRestore} />
-            </button>
           </TabsList>
 
           <TabsContent tabIndex={-1} className='tab-content' value={Tab.Editor}>
@@ -284,7 +277,20 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
               className='tab-content'
               value={Tab.Preview}
               forceMount
+              // forceMount causes the preview tabpanel to never be hidden,
+              // so we need to manually add it when preview is not active.
+              {...(this.state.currentTab === 'preview' ? {} : { hidden: true })}
             >
+              <div className='portal-button-wrap'>
+                <button
+                  className='portal-button'
+                  aria-expanded={!!showPreviewPortal}
+                  onClick={() => togglePane('showPreviewPortal')}
+                >
+                  <span className='sr-only'>{getPortalBtnSrText()}</span>
+                  <FontAwesomeIcon icon={faWindowRestore} />
+                </button>
+              </div>
               {displayPreviewPane && preview}
               {showPreviewPortal && (
                 <p className='preview-external-window'>
@@ -300,6 +306,18 @@ class MobileLayout extends Component<MobileLayoutProps, MobileLayoutState> {
               videoUrl={videoUrl}
             />
           )}
+          {hasPreview && this.state.currentTab !== 'preview' && (
+            <div className='portal-button-wrap'>
+              <button
+                className='portal-button'
+                aria-expanded={!!showPreviewPortal}
+                onClick={() => togglePane('showPreviewPortal')}
+              >
+                <span className='sr-only'>{getPortalBtnSrText()}</span>
+                <FontAwesomeIcon icon={faWindowRestore} />
+              </button>
+            </div>
+          )}
         </Tabs>
         {displayPreviewPortal && (
           <PreviewPortal windowTitle={windowTitle}>{preview}</PreviewPortal>