refactor: simplify the course-home tour button

src/course-home/dates-tab/DatesTab.jsx

@@ -49,7 +49,6 @@ const DatesTab = () => {
       activeTabSlug="dates"
       courseId={courseId}
       courseStatus={{ metadataQuery, tabDataQuery }}
-      metadataModel="courseHomeMeta"
     >
       <div role="heading" aria-level="1" className="h2 my-3">
         {intl.formatMessage(messages.title)}

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -666,7 +666,7 @@ describe('Outline Tab', () => {
           },
         });
         await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);
-        await act(async () => render(<TourProvider><LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="outline">...</LoadedTabPage></TourProvider>, { store }));
+        await act(async () => render(<TourProvider><LoadedTabPage courseId={courseId} activeTabSlug="outline">...</LoadedTabPage></TourProvider>, { store }));
         const instructorToolbar = await screen.getByTestId('instructor-toolbar');
         expect(instructorToolbar).toBeInTheDocument();
         expect(screen.getByText('This learner no longer has access to this course. Their access expired on', { exact: false })).toBeInTheDocument();
@@ -682,7 +682,7 @@ describe('Outline Tab', () => {
           },
         });
         await executeThunk(thunks.fetchOutlineTab(courseId), store.dispatch);
-        await act(async () => render(<TourProvider><LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="outline">...</LoadedTabPage></TourProvider>, { store }));
+        await act(async () => render(<TourProvider><LoadedTabPage courseId={courseId} activeTabSlug="outline">...</LoadedTabPage></TourProvider>, { store }));
         const instructorToolbar = await screen.getByTestId('instructor-toolbar');
         expect(instructorToolbar).toBeInTheDocument();
         expect(screen.queryByText('This learner no longer has access to this course. Their access expired on', { exact: false })).not.toBeInTheDocument();

src/course-home/progress-tab/ProgressTab.test.jsx

@@ -1432,7 +1432,7 @@ describe('Progress Tab', () => {
         },
       });
       await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
-      await act(async () => render(<TourProvider><LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
+      await act(async () => render(<TourProvider><LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
       expect(screen.getByTestId('instructor-toolbar')).toBeInTheDocument();
       expect(screen.getByText('This learner no longer has access to this course. Their access expired on', { exact: false })).toBeInTheDocument();
       expect(screen.getByText('1/1/2020', { exact: false })).toBeInTheDocument();
@@ -1446,7 +1446,7 @@ describe('Progress Tab', () => {
         },
       });
       await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
-      await act(async () => render(<TourProvider><LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
+      await act(async () => render(<TourProvider><LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
       expect(screen.queryByText('This learner no longer has access to this course. Their access expired on', { exact: false })).not.toBeInTheDocument();
       expect(screen.queryByText('1/1/2020', { exact: false })).not.toBeInTheDocument();
     });
@@ -1461,7 +1461,7 @@ describe('Progress Tab', () => {
         start: '2999-01-01T00:00:00Z',
       });
       await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
-      await act(async () => render(<TourProvider><LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
+      await act(async () => render(<TourProvider><LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
       expect(screen.getByTestId('instructor-toolbar')).toBeInTheDocument();
       expect(screen.getByText('This learner does not yet have access to this course. The course starts on', { exact: false })).toBeInTheDocument();
       expect(screen.getByText('1/1/2999', { exact: false })).toBeInTheDocument();
@@ -1474,7 +1474,7 @@ describe('Progress Tab', () => {
         start: '2999-01-01T00:00:00Z',
       });
       await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
-      await act(async () => render(<TourProvider><LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
+      await act(async () => render(<TourProvider><LoadedTabPage courseId={courseId} activeTabSlug="progress">...</LoadedTabPage></TourProvider>, { store }));
       expect(screen.queryByText('This learner does not yet have access to this course. The course starts on', { exact: false })).not.toBeInTheDocument();
       expect(screen.queryByText('1/1/2999', { exact: false })).not.toBeInTheDocument();
     });

src/courseware/CoursewareContainer.jsx

@@ -345,7 +345,6 @@ class CoursewareContainer extends Component {
         courseId={courseId}
         unitId={routeUnitId}
         courseStatus={courseStatus}
-        metadataModel="coursewareMeta"
       >
         <Course
           courseId={courseId}

src/product-tours/ProductTours.test.jsx

@@ -65,7 +65,7 @@ describe('Course Home Tours', () => {
     await executeThunk(courseHomeThunks.fetchOutlineTab(courseId), store.dispatch);
     render(
       <TourProvider>
-        <LoadedTabPage metadataModel="courseHomeMeta" courseId={courseId} activeTabSlug="outline">
+        <LoadedTabPage courseId={courseId} activeTabSlug="outline">
           <OutlineTab />
         </LoadedTabPage>
       </TourProvider>,

src/product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -15,9 +15,7 @@ import messages from '../messages';
 
 const LaunchCourseHomeTourButton = ({ srOnly }) => {
   const intl = useIntl();
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const { courseId } = useParams();
 
   const {
     org,

src/shared/streak-celebration/StreakCelebrationModal.jsx

@@ -54,7 +54,7 @@ const CloseText = ({ intl }) => (
 );
 
 const StreakModal = ({
-  courseId, metadataModel, streakLengthToCelebrate, isStreakCelebrationOpen,
+  courseId, streakLengthToCelebrate, isStreakCelebrationOpen,
   closeStreakCelebration, streakDiscountCouponEnabled, verifiedMode, ...rest
 }) => {
   const intl = useIntl();
@@ -247,7 +247,6 @@ StreakModal.defaultProps = {
 
 StreakModal.propTypes = {
   courseId: PropTypes.string.isRequired,
-  metadataModel: PropTypes.string.isRequired,
   streakLengthToCelebrate: PropTypes.number,
   isStreakCelebrationOpen: PropTypes.bool,
   closeStreakCelebration: PropTypes.func.isRequired,

src/shared/streak-celebration/StreakCelebrationModal.test.jsx

@@ -61,7 +61,6 @@ describe('Loaded Tab Page', () => {
       closeStreakCelebration: jest.fn(),
       courseId: courseMetadata.id,
       isStreakCelebrationOpen: true,
-      metadataModel: 'coursewareMeta',
       streakLengthToCelebrate: 3,
       verifiedMode: camelCaseObject(courseHomeMetadata.verified_mode),
     };

src/tab-page/LoadedTabPage.test.jsx

@@ -17,7 +17,7 @@ jest.mock('../product-tours/ProductTours', () => function () {
 });
 
 describe('Loaded Tab Page', () => {
-  const mockData = { activeTabSlug: 'courseware', metadataModel: 'coursewareMeta' };
+  const mockData = { activeTabSlug: 'courseware' };
 
   beforeAll(async () => {
     const store = await initializeTestStore({ excludeFetchSequence: true });

src/tab-page/LoadedTabPage.tsx

@@ -19,15 +19,13 @@ interface LoadedTabPageProps {
   activeTabSlug: string;
   children?: React.ReactNode;
   courseId: string;
-  metadataModel: string;
   unitId?: string | null;
 }
 
 const LoadedTabPage = ({
   activeTabSlug,
   children = null,
   courseId,
-  metadataModel,
   unitId = null,
 }: LoadedTabPageProps) => {
   const {
@@ -72,7 +70,6 @@ const LoadedTabPage = ({
       )}
       <StreakModal
         courseId={courseId}
-        metadataModel={metadataModel}
         streakLengthToCelebrate={streakLengthToCelebrate}
         isStreakCelebrationOpen={!!isStreakCelebrationOpen}
         closeStreakCelebration={closeStreakCelebration}

src/tab-page/TabContainer.jsx

@@ -39,7 +39,6 @@ const TabContainer = (props) => {
       activeTabSlug={tab}
       courseId={courseId}
       courseStatus={courseStatus}
-      metadataModel={`${slice}Meta`}
     >
       {children}
     </TabWithTimer>

src/tab-page/TabPage.test.jsx

@@ -11,6 +11,10 @@ jest.mock('./LoadedTabPage', () => function () {
   return <div data-testid="LoadedTabPage" />;
 });
 
+jest.mock('../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton', () => function () {
+  return <div data-testid="sr-tour-button" />;
+});
+
 jest.mock('../generic/ToastContext', () => ({
   ...jest.requireActual('../generic/ToastContext'),
   useToast: jest.fn(),
@@ -98,6 +102,16 @@ describe('Tab Page', () => {
     expect(screen.getByTestId('LoadedTabPage')).toBeInTheDocument();
   });
 
+  it('renders the screen-reader tour button on the outline tab', () => {
+    render(<TabPage {...mockData} activeTabSlug="outline" />, { wrapWithRouter: true });
+    expect(screen.getByTestId('sr-tour-button')).toBeInTheDocument();
+  });
+
+  it('does not render the tour button on other tabs', () => {
+    render(<TabPage {...mockData} activeTabSlug="dates" />, { wrapWithRouter: true });
+    expect(screen.queryByTestId('sr-tour-button')).not.toBeInTheDocument();
+  });
+
   describe('React Query courseStatus', () => {
     const metaWithAccess = { data: { courseAccess: { hasAccess: true } } };
 

src/tab-page/TabPage.tsx

@@ -34,7 +34,6 @@ export interface TabPageProps {
   activeTabSlug: string;
   courseId?: string;
   courseStatus: CourseStatus;
-  metadataModel: string;
   unitId?: string;
   children?: ReactNode;
 }
@@ -71,7 +70,6 @@ const TabPage = ({
   activeTabSlug,
   courseId,
   courseStatus,
-  metadataModel,
   unitId,
   children,
 }: TabPageProps) => {
@@ -116,8 +114,12 @@ const TabPage = ({
     </Toast>
   );
 
-  const renderTourButton = () => {
-    if (metadataModel !== 'courseHomeMeta') { return null; }
+  // The outline page renders a visible "launch tour" button deep in the DOM; no other tab
+  // renders it. For screen-reader users we render a screen-reader-only copy above the header,
+  // where it won't be buried (a11y rationale:
+  // https://github.com/openedx/frontend-app-learning/pull/750#discussion_r755536879).
+  const renderSrOnlyTourButton = () => {
+    if (activeTabSlug !== 'outline') { return null; }
     return (<LaunchCourseHomeTourButton srOnly />);
   };
 
@@ -131,7 +133,6 @@ const TabPage = ({
       <LoadedTabPage
         activeTabSlug={activeTabSlug}
         courseId={courseId}
-        metadataModel={metadataModel}
         unitId={unitId}
       >
         {children}
@@ -148,7 +149,7 @@ const TabPage = ({
   return (
     <TourProvider>
       {shouldRenderContent && renderToast()}
-      {shouldRenderContent && renderTourButton()}
+      {shouldRenderContent && renderSrOnlyTourButton()}
       <HeaderSlot courseOrg={org} courseNumber={number} courseTitle={title} />
       {isLoading && renderLoading()}
       {shouldRenderContent && renderLoadedTabPage()}