Merge branch 'main' into search-navigation-issues

playwright/src/fixtures/content.page.ts

@@ -90,6 +90,13 @@ class ContentPage {
       .addCookies([{ name: 'nudge_study_guides_date', value: current_date, url: this.page.url() }])
   }
 
+  async canonical() {
+    // Return canonical link of the current page
+    let canonicalPageSelector = await this.page.$('[rel="canonical"]')
+    const canonicalPage = await canonicalPageSelector.evaluate((e) => e.getAttribute('href'))
+    return canonicalPage
+  }
+
   async colorLocator(color: string) {
     // Return locator of the color
     if (color === 'blue') {

playwright/src/fixtures/toc.ts

@@ -89,7 +89,7 @@ class TOC {
       if ((await titleAfterClick) != (await titleBeforeClick)) {
         return
       } else {
-        sleep(1)
+        sleep(2)
       }
     } else {
       console.log('The page number specified exceeds the total pages in the book')

playwright/tests/rex-test/rex.behaviorspec.ts

@@ -576,3 +576,101 @@ test('MH page dropdown filters', async ({ page, isMobile }) => {
   const highlightcount = await bookPage.highlightCount()
   expect(highlightcount).toBe(2)
 })
+
+
+test('C543224 canonicals for books with no shared content', async ({ page, isMobile, browserName }) => {
+  test.skip(isMobile as boolean, 'test only desktop resolution')
+  test.skip(browserName == 'webkit', 'test only chrome')
+  test.skip(browserName == 'firefox', 'test only chrome')
+
+  // GIVEN: Open Rex page
+  const bookPage = new ContentPage(page)
+  const path = '/books/chemistry-2e/pages/1-1-chemistry-in-context'
+  await bookPage.open(path)
+
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/chemistry-2e/pages/1-1-chemistry-in-context')
+
+  // WHEN: click EOC page
+  const Toc = new TOC(page)
+  await Toc.pageClick(9)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/chemistry-2e/pages/1-key-equations')
+
+  // WHEN: Click EOB page
+  await Toc.pageClick(221)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/chemistry-2e/pages/e-water-properties')
+
+  // WHEN: click nested EOB page
+  await Toc.pageClick(230)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/chemistry-2e/pages/chapter-1')
+})
+
+
+test('C543225 canonicals for pages derived from another book', async ({ page, isMobile, browserName }) => {
+  test.skip(isMobile as boolean, 'test only desktop resolution')
+  test.skip(browserName == 'webkit', 'test only chrome')
+  test.skip(browserName == 'firefox', 'test only chrome')
+
+  // GIVEN: Open Rex page derived from another book
+  const bookPage = new ContentPage(page)
+  const path = '/books/preparing-for-college-success/pages/2-1-why-college'
+  await bookPage.open(path)
+
+  // THEN: Canonical page points to original content
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/college-success-concise/pages/1-1-why-college')
+
+  // WHEN: click EOC page from a chapter derived from another book
+  const Toc = new TOC(page)
+  await Toc.pageClick(14)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/preparing-for-college-success/pages/2-summary')
+
+
+  // WHEN: Open page unique to this book
+  await Toc.pageClick(3)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/preparing-for-college-success/pages/1-2-your-academic-journey-and-personal-story')
+
+  // WHEN: Open EOC page from the chapter unique to this book
+  await Toc.pageClick(6)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/preparing-for-college-success/pages/1-family-friends-matter')
+
+  // WHEN: Open EOB page from the chapter unique to this book
+  await Toc.pageClick(71)
+  // THEN: Canonical page points to itself
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/preparing-for-college-success/pages/index')
+})
+
+test('C543225 canonicals for old editions point to the latest edition', async ({ page, isMobile, browserName }) => {
+  test.skip(isMobile as boolean, 'test only desktop resolution')
+  test.skip(browserName == 'webkit', 'test only chrome')
+  test.skip(browserName == 'firefox', 'test only chrome')
+
+  // GIVEN: Open older edition of Rex page derived from another book
+  const bookPage = new ContentPage(page)
+  const path = '/books/principles-macroeconomics-2e/pages/1-introduction'
+  await bookPage.open(path)
+  // THEN: Canonical page points to latest edition of the original content
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/principles-economics-3e/pages/1-introduction')
+
+  // WHEN: Open older edition of EOC page of a book derived from another book
+  const Toc = new TOC(page)
+  await Toc.pageClick(7)
+  // THEN: Canonical page points to itself 
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/principles-macroeconomics-2e/pages/1-key-concepts-and-summary')
+
+  // WHEN: Open older edition of nested EOB page of a book derived from another book
+  await Toc.pageClick(243)
+  // THEN: Canonical page points to itself 
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/principles-macroeconomics-2e/pages/chapter-2')
+
+
+  // WHEN: Open older edition of appendix page of a book derived from another book
+  await Toc.pageClick(241)
+  // THEN: Canonical page points to latest edition of the original content
+  expect(await bookPage.canonical()).toBe('https://openstax.org/books/principles-economics-3e/pages/d-the-expenditure-output-model')
+})

public/index.html

@@ -12,7 +12,6 @@
 
     <link rel="stylesheet" href="https://ram.openstax.org/osano/osano.css">
     <script src="https://cmp.osano.com/AzZqbXTbzhHsU3cv1/68d8e8ae-4024-4489-a000-72766ad284a6/osano.js"></script>
-    <script src="https://chat.research.openstax.org/assets/static/loader.js" async></script>
 
     <!-- Google Tag Manager -->
     <script>

pytest-selenium/utils/books.json

@@ -466,6 +466,12 @@
         "search_term": "NIH, 2022d",
         "chapter_search_results_total": 65,
         "rkt_search_results_total": 0
+    },
+    "psychiatric-mental-health": {
+        "default_page": "1-introduction",
+        "search_term": "mental health",
+        "chapter_search_results_total": 2674,
+        "rkt_search_results_total": 4
     }
 }
 

src/app/content/components/Page/PageComponent.tsx

@@ -81,6 +81,7 @@ export default class PageComponent extends Component<PagePropTypes> {
       });
     }
     this.scrollToTopOrHashManager(null, this.props.scrollToTopOrHash);
+    lazyResources.checkLazyResources();
   }
 
   public async componentDidUpdate(prevProps: PagePropTypes) {

src/app/content/components/Page/lazyResourceManager.ts

@@ -23,7 +23,6 @@ export const checkLazyResources = () => {
         element.setAttribute('src', src);
       }
       element.removeAttribute('data-lazy-src');
-
     }
   });
 };

src/app/content/highlights/components/ColorPicker.spec.tsx

@@ -4,7 +4,7 @@ import { renderToDom, dispatchKeyDownEvent } from '../../../../test/reactutils';
 import TestContainer from '../../../../test/TestContainer';
 import { highlightStyles } from '../../constants';
 import ColorPicker from './ColorPicker';
-import { HTMLElement, HTMLDivElement, HTMLInputElement } from '@openstax/types/lib.dom';
+import { HTMLElement, HTMLFieldSetElement, HTMLInputElement } from '@openstax/types/lib.dom';
 import { assertDocument } from '../../../utils';
 
 describe('ColorPicker', () => {
@@ -92,7 +92,7 @@ describe('ColorPicker', () => {
         <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
       </TestContainer>
     );
-    const rg = root.querySelector('[role="radiogroup"]') as HTMLDivElement;
+    const rg = root.querySelector('fieldset') as HTMLFieldSetElement;
 
     expect(rg).toBeTruthy();
     rg?.focus();
@@ -148,7 +148,7 @@ describe('ColorPicker', () => {
         <ColorPicker color={highlightStyles[0].label} onChange={onChange} onRemove={onRemove} />
       </TestContainer>
     );
-    const rg = root.querySelector('[role="radiogroup"]') as HTMLDivElement;
+    const rg = root.querySelector('fieldset') as HTMLFieldSetElement;
 
     expect(rg).toBeTruthy();
     rg?.focus();

src/app/content/highlights/components/ColorPicker.tsx

@@ -117,15 +117,14 @@ const ColorPicker = ({className, ...props}: Props) => {
   React.useEffect(focusOnSelected, [focusOnSelected]);
 
   return (
-    <div
+    <fieldset
       className={className}
       tabIndex={0}
-      role='radiogroup'
-      aria-label='colors'
       ref={ref}
       onKeyDown={handleKeyNavigation}
       onFocus={focusOnSelected}
     >
+      <legend>Choose highlight color</legend>
       {highlightStyles.map((style) => <ColorButton key={style.label}
         name={style.label}
         checked={props.multiple ? props.selected.includes(style.label) : props.color === style.label}
@@ -140,15 +139,24 @@ const ColorPicker = ({className, ...props}: Props) => {
             ? props.onRemove ? props.onRemove() : null
             : props.onChange(style.label)}
       />)}
-    </div>
+    </fieldset>
   );
 };
 
 export default styled(ColorPicker)`
+  border: 0;
   outline: none;
   display: flex;
   flex-direction: row;
   overflow: visible;
   gap: ${cardPadding}rem;
   padding: ${cardPadding}rem 0.3rem;
+
+  legend {
+    position: absolute;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+  }
 `;

src/app/content/highlights/components/HighlightsPopUp.tsx

@@ -142,7 +142,7 @@ const HighlightsPopUp = ({ closeMyHighlights, ...props }: Props) => {
           <CloseIcon colorSchema={props.bookTheme}/>
         </CloseIconWrapper>
       </Header>
-      {props.user ? <ShowMyHighlights /> : <LoginForHighlights />}
+      {props.user ? <ShowMyHighlights topElRef={popUpRef} /> : <LoginForHighlights />}
       <HighlightsHelpInfo />
     </Modal>
     : null;

src/app/content/highlights/components/ShowMyHighlights.spec.tsx

@@ -267,8 +267,9 @@ describe('Show my highlights', () => {
       }));
     });
 
+    const container = window.document.createElement('div');
     const {root} = renderToDom(<TestContainer store={store}>
-      <ShowMyHighlights/>
+      <ShowMyHighlights topElRef={container} />
     </TestContainer>);
 
     const target = root.querySelector('[data-testid="show-myhighlights-body"]');

src/app/content/highlights/components/ShowMyHighlights.tsx

@@ -25,6 +25,7 @@ interface ShowMyHighlightsProps {
   loadMore: () => void;
   initMyHighlights: () => void;
   services: AppServices;
+  topElRef: React.RefObject<HTMLElement>;
 }
 
 class ShowMyHighlights extends Component<ShowMyHighlightsProps, { showGoToTop: boolean }> {
@@ -41,6 +42,7 @@ class ShowMyHighlights extends Component<ShowMyHighlightsProps, { showGoToTop: b
       return;
     }
 
+    this.props.topElRef.current?.focus();
     highlightsBodyRef.scrollTop = 0;
   };
 

src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap

@@ -408,6 +408,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
 }
 
 .c14 {
+  border: 0;
   outline: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -421,6 +422,15 @@ exports[`ContextMenu match snapshot when open 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
+.c14 legend {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+}
+
 .c4 {
   cursor: pointer;
   border: none;
@@ -629,14 +639,15 @@ exports[`ContextMenu match snapshot when open 1`] = `
     <div
       className="c12"
     >
-      <div
-        aria-label="colors"
+      <fieldset
         className="c13 c14"
         onFocus={[Function]}
         onKeyDown={[Function]}
-        role="radiogroup"
         tabIndex={0}
       >
+        <legend>
+          Choose highlight color
+        </legend>
         <label
           aria-label="Apply yellow highlight"
           checked={false}
@@ -942,7 +953,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             }
           />
         </label>
-      </div>
+      </fieldset>
       <ol
         className="c30"
       >

src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap

@@ -275,6 +275,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 }
 
 .c0 {
+  border: 0;
   outline: none;
   display: -webkit-box;
   display: -webkit-flex;
@@ -288,14 +289,24 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
   padding: 0.8rem 0.3rem;
 }
 
-<div
-  aria-label="colors"
+.c0 legend {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+}
+
+<fieldset
   className="c0"
   onFocus={[Function]}
   onKeyDown={[Function]}
-  role="radiogroup"
   tabIndex={0}
 >
+  <legend>
+    Choose highlight color
+  </legend>
   <label
     aria-label="Apply yellow highlight"
     checked={false}
@@ -586,5 +597,5 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       }
     />
   </label>
-</div>
+</fieldset>
 `;