Merge pull request #18073 from luchillo17/fix/BCKSTG-195-keyboard-navigation---home---

fix(catalog-import): Fix stepper component order for accessibility

.changeset/cold-pillows-mix.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-import': patch
+---
+
+Swap `ImportStepper` and `InfoCard` order to fix tab order in `catalog-import`.

plugins/catalog-import/src/components/DefaultImportPage/DefaultImportPage.tsx

@@ -22,7 +22,7 @@ import {
   SupportButton,
 } from '@backstage/core-components';
 import { configApiRef, useApi } from '@backstage/core-plugin-api';
-import { Grid } from '@material-ui/core';
+import { Grid, useMediaQuery, useTheme } from '@material-ui/core';
 import React from 'react';
 import { ImportInfoCard } from '../ImportInfoCard';
 import { ImportStepper } from '../ImportStepper';
@@ -33,9 +33,21 @@ import { ImportStepper } from '../ImportStepper';
  * @public
  */
 export const DefaultImportPage = () => {
+  const theme = useTheme();
   const configApi = useApi(configApiRef);
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const appTitle = configApi.getOptional('app.title') || 'Backstage';
 
+  const contentItems = [
+    <Grid item xs={12} md={4} lg={6} xl={8}>
+      <ImportInfoCard />
+    </Grid>,
+
+    <Grid item xs={12} md={8} lg={6} xl={4}>
+      <ImportStepper />
+    </Grid>,
+  ];
+
   return (
     <Page themeId="home">
       <Header title="Register an existing component" />
@@ -47,14 +59,8 @@ export const DefaultImportPage = () => {
           </SupportButton>
         </ContentHeader>
 
-        <Grid container spacing={2} direction="row-reverse">
-          <Grid item xs={12} md={4} lg={6} xl={8}>
-            <ImportInfoCard />
-          </Grid>
-
-          <Grid item xs={12} md={8} lg={6} xl={4}>
-            <ImportStepper />
-          </Grid>
+        <Grid container spacing={2}>
+          {isMobile ? contentItems : contentItems.reverse()}
         </Grid>
       </Content>
     </Page>