From 5ee7441eaecf9b6ecf08e990fc317a6b2c8cceb9 Mon Sep 17 00:00:00 2001 From: jomcarvajal Date: Wed, 19 Feb 2025 15:51:11 -0600 Subject: [PATCH 01/17] refactor toc with navigation tree --- playwright/src/fixtures/toc.ts | 8 +- pytest-selenium/regions/toc.py | 2 +- src/app/components/Details.tsx | 13 + .../content/components/ContentLink.spec.tsx | 11 + src/app/content/components/ContentLink.tsx | 1 + .../components/TableOfContents/index.spec.tsx | 3 +- .../components/TableOfContents/index.tsx | 18 +- .../TableOfContents/styled/index.tsx | 10 +- .../__snapshots__/Content.spec.tsx.snap | 1457 ++++++----------- 9 files changed, 588 insertions(+), 935 deletions(-) diff --git a/playwright/src/fixtures/toc.ts b/playwright/src/fixtures/toc.ts index 06e60a8584..cbc2f9d592 100644 --- a/playwright/src/fixtures/toc.ts +++ b/playwright/src/fixtures/toc.ts @@ -13,7 +13,7 @@ class TOC { constructor(page: Page) { this.page = page this.pageLocator = this.page.locator('[data-type="page"]') - this.tocDropdownLocator = this.page.locator('details[class*="NavDetails"]') + this.tocDropdownLocator = this.page.locator('a[class*="NavDetails"]') this.sectionNameLocator = this.page.locator('h1[class*="BookBanner"]') this.pageSlugLocator = this.page.locator('[data-type="page"] a') this.currentPageLocator = this.page.locator("[aria-label*='Current Page'] a") @@ -33,7 +33,7 @@ class TOC { async unitIntroCount() { // Total number of unit introduction pages in the book - const unitIntroPageLocator = this.page.locator('//li[@data-type="unit"]/details/ol[1]/li[1][@data-type="page"]') + const unitIntroPageLocator = this.page.locator('//li[@data-type="unit"]/a/ol[1]/li[1][@data-type="page"]') return await unitIntroPageLocator.count() } @@ -72,7 +72,7 @@ class TOC { await this.pageLocator.nth(pageNumber).click() } else { // expand the dropdowns in toc - await this.page.waitForSelector('details[class*="NavDetails"]') + await this.page.waitForSelector('a[class*="NavDetails"]') const tocDropdownCounts = await this.tocDropdownLocator.count() let tocDropdownCount: number for (tocDropdownCount = 0; tocDropdownCount < tocDropdownCounts; tocDropdownCount++) { @@ -143,7 +143,7 @@ class TOC { // Return unit name of the current page const toc = this.page.locator('nav[data-testid=toc]') const unitLocator = toc - .locator('css=[data-type=unit] >> details', { + .locator('css=[data-type=unit] >> a', { has: this.page.locator(`[href="${await this.CurrentPageSlug()}"]`), }) .first() diff --git a/pytest-selenium/regions/toc.py b/pytest-selenium/regions/toc.py index a90fe8daa0..2f198b8f4c 100644 --- a/pytest-selenium/regions/toc.py +++ b/pytest-selenium/regions/toc.py @@ -21,7 +21,7 @@ class TableOfContents(Region): _section_link_locator = (By.CSS_SELECTOR, "ol li a") _active_section_locator = (By.CSS_SELECTOR, "[aria-label='Current Page']") - _chapter_link_selector = "li details" + _chapter_link_selector = "li a" @property def active_section(self): diff --git a/src/app/components/Details.tsx b/src/app/components/Details.tsx index 3f1b7e19ba..0e92a7b923 100644 --- a/src/app/components/Details.tsx +++ b/src/app/components/Details.tsx @@ -50,3 +50,16 @@ export const Details = styled.details` } `} `; + +// Other components than ToC use Details, so we need to style them separately +export const DetailsTree = styled.a` + ${/* suppress errors from https://github.com/stylelint/stylelint/issues/3391 */ css` + &[open] > summary ${ExpandIcon} { + display: none; + } + + &:not([open]) > summary ${CollapseIcon} { + display: none; + } + `} +`; \ No newline at end of file diff --git a/src/app/content/components/ContentLink.spec.tsx b/src/app/content/components/ContentLink.spec.tsx index 33d9c71d8e..d5f10bdfe4 100644 --- a/src/app/content/components/ContentLink.spec.tsx +++ b/src/app/content/components/ContentLink.spec.tsx @@ -38,6 +38,7 @@ describe('ContentLink', () => { const click = async(component: renderer.ReactTestRenderer) => { const event = { preventDefault: jest.fn(), + stopPropagation: jest.fn(), }; await component.root.findByType('a').props.onClick(event); @@ -66,6 +67,7 @@ describe('ContentLink', () => { state: { }, })); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); }); it('dispatches navigation action with search if there is a search', async() => { @@ -86,6 +88,7 @@ describe('ContentLink', () => { state: { }, }, { search: 'query=asdf' })); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); }); it('search passed as prop overwrites search from the redux state', async() => { @@ -106,6 +109,7 @@ describe('ContentLink', () => { state: { }, }, { search: `query=${mockSearch.query}` })); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); }); it('dispatches navigation action with scroll target data and search if scroll target is passed', async() => { @@ -135,6 +139,7 @@ describe('ContentLink', () => { }), })); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); }); it('dispatches navigation action without search when linking to a different book', async() => { @@ -152,6 +157,7 @@ describe('ContentLink', () => { state: { }, })); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); }); it('calls onClick when passed', async() => { @@ -168,6 +174,7 @@ describe('ContentLink', () => { state: { }, })); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); expect(clickSpy).toHaveBeenCalled(); }); @@ -180,12 +187,14 @@ describe('ContentLink', () => { const event = { metaKey: true, preventDefault: jest.fn(), + stopPropagation: jest.fn(), }; await component.root.findByType('a').props.onClick(event); expect(dispatch).not.toHaveBeenCalled(); expect(event.preventDefault).not.toHaveBeenCalled(); + expect(event.stopPropagation).not.toHaveBeenCalled(); expect(clickSpy).not.toHaveBeenCalled(); }); }); @@ -217,6 +226,7 @@ describe('ContentLink', () => { expect(dispatch).not.toHaveBeenCalledWith(push(expect.anything())); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); expect(clickSpy).not.toHaveBeenCalled(); }); @@ -231,6 +241,7 @@ describe('ContentLink', () => { expect(dispatch).toHaveBeenCalled(); expect(event.preventDefault).toHaveBeenCalled(); + expect(event.stopPropagation).toHaveBeenCalled(); expect(clickSpy).toHaveBeenCalled(); }); }); diff --git a/src/app/content/components/ContentLink.tsx b/src/app/content/components/ContentLink.tsx index 4f1d60baff..04af8651fe 100644 --- a/src/app/content/components/ContentLink.tsx +++ b/src/app/content/components/ContentLink.tsx @@ -79,6 +79,7 @@ export const ContentLink = (props: React.PropsWithChildren) => { return; } + e.stopPropagation(); e.preventDefault(); if (hasUnsavedHighlight && !await showConfirmation(services)) { diff --git a/src/app/content/components/TableOfContents/index.spec.tsx b/src/app/content/components/TableOfContents/index.spec.tsx index 3578e58e1d..052a9894e4 100644 --- a/src/app/content/components/TableOfContents/index.spec.tsx +++ b/src/app/content/components/TableOfContents/index.spec.tsx @@ -119,7 +119,8 @@ describe('TableOfContents', () => { const component = renderer.create(Component); renderer.act(() => { - component.root.findAllByType('a')[0].props.onClick({preventDefault: () => null}); + component.root.findAllByType('a')[0].props.onClick({preventDefault: () => null, stopPropagation: () => null}); + component.root.findAllByType('a')[1].props.onClick({preventDefault: () => null, stopPropagation: () => null}); }); expect(dispatchSpy).toHaveBeenCalledWith(actions.resetToc()); }); diff --git a/src/app/content/components/TableOfContents/index.tsx b/src/app/content/components/TableOfContents/index.tsx index 14b8626ee2..e501535aa2 100644 --- a/src/app/content/components/TableOfContents/index.tsx +++ b/src/app/content/components/TableOfContents/index.tsx @@ -98,6 +98,7 @@ const SidebarBody = React.forwardRef< data-testid='toc' aria-label={useIntl().formatMessage({ id: 'i18n:toc:title' })} data-analytics-region='toc' + role="navigation" {...props} /> @@ -122,8 +123,14 @@ function TocNode({ title, children, }: React.PropsWithChildren<{ defaultOpen: boolean; title: string }>) { + const [isOpen, setOpen] = React.useState(defaultOpen); + const toggleOpen = (event: React.MouseEvent) => { + event.stopPropagation(); + setOpen((prevState) => !prevState); + }; + return ( - + @@ -131,7 +138,7 @@ function TocNode({ - {children} + {isOpen && children} ); } @@ -159,15 +166,17 @@ function TocSection({ section, activeSection, onNavigate, + role, }: { book: Book | undefined; page: Page | undefined; section: ArchiveTree; activeSection: React.RefObject; onNavigate: () => void; + role: "tree" | "group"; }) { return ( - + {linkContents(section).map((item) => { const sectionType = getArchiveTreeSectionType(item); const active = page && stripIdVersion(item.id) === page.id; @@ -178,6 +187,7 @@ function TocSection({ @@ -193,6 +203,7 @@ function TocSection({ page={item} dangerouslySetInnerHTML={{__html: item.title}} {...maybeAriaLabel(item)} + role="treeitem" /> ; })} @@ -221,6 +232,7 @@ export class TableOfContents extends Component { section={book.tree} activeSection={this.activeSection} onNavigate={this.props.onNavigate} + role="tree" /> )} diff --git a/src/app/content/components/TableOfContents/styled/index.tsx b/src/app/content/components/TableOfContents/styled/index.tsx index e7220d0861..d5cf68554d 100644 --- a/src/app/content/components/TableOfContents/styled/index.tsx +++ b/src/app/content/components/TableOfContents/styled/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import styled, { css } from 'styled-components/macro'; -import { Details } from '../../../../components/Details'; +import { DetailsTree } from '../../../../components/Details'; import { iconSize, Summary as BaseSummary } from '../../../../components/Details'; import { labelStyle } from '../../../../components/Typography'; import theme from '../../../../theme'; @@ -71,6 +71,7 @@ export const NavItemComponent = React.forwardRef{children} ); @@ -128,7 +129,7 @@ export const NavOl = styled.ol<{section: ArchiveTree}>` const numberWidth = getNumberWidth(props.section.contents); return css` - & > ${NavItem} > details > summary, + & > ${NavItem} > a > summary, & > ${NavItem} > ${ContentLink} { .os-number { width: ${numberWidth}rem; @@ -147,7 +148,7 @@ export const NavOl = styled.ol<{section: ArchiveTree}>` } } - & > ${NavItem} > details > ol { + & > ${NavItem} > a > ol { margin-left: ${numberWidth + dividerWidth}rem; } `; @@ -162,9 +163,8 @@ class DetailsComponent extends React.Component; + return ; } } diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap index 17d9487480..9437e84021 100644 --- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap +++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap @@ -215,19 +215,19 @@ Array [ overflow: hidden; } -.c110 { +.c109 { height: 1em; } -.c112 { +.c111 { height: 1em; } -.c111 { +.c110 { height: 1em; } -.c93 { +.c92 { color: #424242; font-size: 1.6rem; line-height: 2.5rem; @@ -237,16 +237,16 @@ Array [ transition: opacity 0.2s; } -.c94 { +.c93 { color: #d5d5d5; display: grid; } -.c95 { +.c94 { background-color: #424242; } -.c96 { +.c95 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -268,45 +268,45 @@ Array [ overflow: visible; } -.c97 { +.c96 { grid-area: headline; margin: 0; } -.c98 { +.c97 { grid-area: mission; } -.c98 a { +.c97 a { color: #d5d5d5; font-weight: bold; text-underline-position: under; } -.c98 a:hover, -.c98 a:active, -.c98 a:focus { +.c97 a:hover, +.c97 a:active, +.c97 a:focus { color: inherit; } -.c102 { +.c101 { color: #d5d5d5; -webkit-text-decoration: none; text-decoration: none; } -.c102:hover, -.c102:active, -.c102:focus { +.c101:hover, +.c101:active, +.c101:focus { color: inherit; } -.c102:hover { +.c101:hover { -webkit-text-decoration: underline; text-decoration: underline; } -.c113 { +.c112 { color: #d5d5d5; display: inline-grid; grid-auto-flow: column; @@ -314,34 +314,34 @@ Array [ overflow: hidden; } -.c113:hover, -.c113:active, -.c113:focus { +.c112:hover, +.c112:active, +.c112:focus { color: inherit; } -.c99 { +.c98 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col1; } -.c103 { +.c102 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col2; } -.c104 { +.c103 { display: grid; grid-gap: 0.5rem; overflow: visible; grid-area: col3; } -.c100 { +.c99 { font-size: 1.8rem; font-weight: bold; -webkit-letter-spacing: -0.072rem; @@ -352,7 +352,7 @@ Array [ margin: 0; } -.c105 { +.c104 { font-size: 1.2rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -363,7 +363,7 @@ Array [ background-color: #3b3b3b; } -.c106 { +.c105 { max-width: 131rem; -webkit-align-items: center; -webkit-box-align: center; @@ -385,28 +385,28 @@ Array [ overflow: visible; } -.c107 { +.c106 { display: grid; grid-gap: 1rem; overflow: visible; } -.c107 [data-html="copyright"] { +.c106 [data-html="copyright"] { overflow: visible; } -.c107 a { +.c106 a { color: #d5d5d5; overflow: visible; } -.c107 a:hover, -.c107 a:active, -.c107 a:focus { +.c106 a:hover, +.c106 a:active, +.c106 a:focus { color: inherit; } -.c107 sup { +.c106 sup { font-size: 66%; margin-left: 0.1rem; position: relative; @@ -414,7 +414,7 @@ Array [ vertical-align: top; } -.c108 { +.c107 { -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; @@ -430,7 +430,7 @@ Array [ overflow: visible; } -.c101 { +.c100 { margin: 0; padding: 0; display: -webkit-box; @@ -444,7 +444,7 @@ Array [ list-style: none; } -.c109 { +.c108 { color: #d5d5d5; font-size: 1.6rem; line-height: 2.5rem; @@ -464,13 +464,13 @@ Array [ width: 3rem; } -.c109:hover, -.c109:active, -.c109:focus { +.c108:hover, +.c108:active, +.c108:focus { color: inherit; } -.c114 { +.c113 { height: 4rem; -webkit-transform: translateY(0.2rem); -ms-transform: translateY(0.2rem); @@ -672,20 +672,20 @@ Array [ width: 1.7rem; } -.c87 { +.c86 { list-style: none; cursor: pointer; } -.c87::before { +.c86::before { display: none; } -.c87::-moz-list-bullet { +.c86::-moz-list-bullet { list-style-type: none; } -.c87::-webkit-details-marker { +.c86::-webkit-details-marker { display: none; } @@ -697,40 +697,40 @@ Array [ display: none; } -.c80 { +.c79 { outline: none; --content-text-scale: 1; } -.c80 .os-problem-container .token, -.c80 .os-solution-container .token { +.c79 .os-problem-container .token, +.c79 .os-solution-container .token { font-size-adjust: cap-height 1; vertical-align: middle; } -.c79 { +.c78 { overflow: visible; } -.c79 .highlight { +.c78 .highlight { position: relative; z-index: 1; } -.c79 .MathJax_Display .highlight, -.c79 .MathJax_Preview + .highlight { +.c78 .MathJax_Display .highlight, +.c78 .MathJax_Preview + .highlight { display: inline-block; } -.c79 .highlight.yellow { +.c78 .highlight.yellow { background-color: #ffff8a; } -.c79 .highlight.yellow.block { +.c78 .highlight.yellow.block { display: block; } -.c79 .highlight.yellow.block:after { +.c78 .highlight.yellow.block:after { position: absolute; z-index: -1; content: ""; @@ -742,7 +742,7 @@ Array [ background-color: #ffff8a; } -.c79 .highlight.yellow.block.first.has-note:before { +.c78 .highlight.yellow.block.first.has-note:before { position: absolute; top: -1rem; left: -1rem; @@ -754,7 +754,7 @@ Array [ border-bottom: 1.2em solid transparent; } -.c79 .highlight.yellow.first.text.has-note:after { +.c78 .highlight.yellow.first.text.has-note:after { position: absolute; top: 0; left: 0; @@ -769,15 +769,15 @@ Array [ transform: rotate(90deg); } -.c79 .highlight.green { +.c78 .highlight.green { background-color: #def99f; } -.c79 .highlight.green.block { +.c78 .highlight.green.block { display: block; } -.c79 .highlight.green.block:after { +.c78 .highlight.green.block:after { position: absolute; z-index: -1; content: ""; @@ -789,7 +789,7 @@ Array [ background-color: #def99f; } -.c79 .highlight.green.block.first.has-note:before { +.c78 .highlight.green.block.first.has-note:before { position: absolute; top: -1rem; left: -1rem; @@ -801,7 +801,7 @@ Array [ border-bottom: 1.2em solid transparent; } -.c79 .highlight.green.first.text.has-note:after { +.c78 .highlight.green.first.text.has-note:after { position: absolute; top: 0; left: 0; @@ -816,15 +816,15 @@ Array [ transform: rotate(90deg); } -.c79 .highlight.blue { +.c78 .highlight.blue { background-color: #c8f5ff; } -.c79 .highlight.blue.block { +.c78 .highlight.blue.block { display: block; } -.c79 .highlight.blue.block:after { +.c78 .highlight.blue.block:after { position: absolute; z-index: -1; content: ""; @@ -836,7 +836,7 @@ Array [ background-color: #c8f5ff; } -.c79 .highlight.blue.block.first.has-note:before { +.c78 .highlight.blue.block.first.has-note:before { position: absolute; top: -1rem; left: -1rem; @@ -848,7 +848,7 @@ Array [ border-bottom: 1.2em solid transparent; } -.c79 .highlight.blue.first.text.has-note:after { +.c78 .highlight.blue.first.text.has-note:after { position: absolute; top: 0; left: 0; @@ -863,15 +863,15 @@ Array [ transform: rotate(90deg); } -.c79 .highlight.purple { +.c78 .highlight.purple { background-color: #cbcfff; } -.c79 .highlight.purple.block { +.c78 .highlight.purple.block { display: block; } -.c79 .highlight.purple.block:after { +.c78 .highlight.purple.block:after { position: absolute; z-index: -1; content: ""; @@ -883,7 +883,7 @@ Array [ background-color: #cbcfff; } -.c79 .highlight.purple.block.first.has-note:before { +.c78 .highlight.purple.block.first.has-note:before { position: absolute; top: -1rem; left: -1rem; @@ -895,7 +895,7 @@ Array [ border-bottom: 1.2em solid transparent; } -.c79 .highlight.purple.first.text.has-note:after { +.c78 .highlight.purple.first.text.has-note:after { position: absolute; top: 0; left: 0; @@ -910,15 +910,15 @@ Array [ transform: rotate(90deg); } -.c79 .highlight.pink { +.c78 .highlight.pink { background-color: #ffc5e1; } -.c79 .highlight.pink.block { +.c78 .highlight.pink.block { display: block; } -.c79 .highlight.pink.block:after { +.c78 .highlight.pink.block:after { position: absolute; z-index: -1; content: ""; @@ -930,7 +930,7 @@ Array [ background-color: #ffc5e1; } -.c79 .highlight.pink.block.first.has-note:before { +.c78 .highlight.pink.block.first.has-note:before { position: absolute; top: -1rem; left: -1rem; @@ -942,7 +942,7 @@ Array [ border-bottom: 1.2em solid transparent; } -.c79 .highlight.pink.first.text.has-note:after { +.c78 .highlight.pink.first.text.has-note:after { position: absolute; top: 0; left: 0; @@ -957,12 +957,12 @@ Array [ transform: rotate(90deg); } -.c79 .os-figure, -.c79 .os-figure:last-child { +.c78 .os-figure, +.c78 .os-figure:last-child { margin-bottom: 5px; } -.c79 #main-content * { +.c78 #main-content * { overflow: initial; } @@ -979,21 +979,21 @@ Array [ grid-template-columns: 8rem auto auto; } -.c90 { +.c89 { margin-left: -0.3rem; } -.c91 { +.c90 { margin-left: -0.3rem; } -.c89 { +.c88 { font-weight: 500; list-style: none; } -.c89, -.c89 span { +.c88, +.c88 span { color: #424242; font-size: 1.6rem; line-height: 2.5rem; @@ -1003,33 +1003,33 @@ Array [ text-decoration: none; } -.c89 a, -.c89 span a { +.c88 a, +.c88 span a { color: #027EB5; cursor: pointer; -webkit-text-decoration: underline; text-decoration: underline; } -.c89 a:hover, -.c89 span a:hover { +.c88 a:hover, +.c88 span a:hover { color: #0064A0; } -.c89:hover, -.c89 span:hover, -.c89:focus, -.c89 span:focus { +.c88:hover, +.c88 span:hover, +.c88:focus, +.c88 span:focus { -webkit-text-decoration: underline; text-decoration: underline; color: #0064A0; } -.c92 blockquote { +.c91 blockquote { margin-left: 0; } -.c86 { +.c85 { color: #424242; font-size: 1.6rem; line-height: 2.5rem; @@ -1040,30 +1040,30 @@ Array [ padding-top: 1.8rem; } -.c86[open] > summary .c67 { +.c85[open] > summary .c67 { display: none; } -.c86:not([open]) > summary .c69 { +.c85:not([open]) > summary .c69 { display: none; } -.c86 a { +.c85 a { color: #027EB5; cursor: pointer; -webkit-text-decoration: underline; text-decoration: underline; } -.c86 a:hover { +.c85 a:hover { color: #0064A0; } -.c86 > .c88 { +.c85 > .c87 { margin-bottom: 1.8rem; } -.c86 li { +.c85 li { margin-bottom: 1rem; overflow: visible; } @@ -1230,7 +1230,7 @@ Array [ margin-top: -7rem; } -.c75 { +.c74 { grid-column: 1 / -1; grid-row: 1; justify-self: center; @@ -1244,7 +1244,7 @@ Array [ display: contents; } -.c77 { +.c76 { position: -webkit-sticky; position: sticky; overflow: visible; @@ -1361,50 +1361,50 @@ Array [ display: none; } -.c78:focus-within { +.c77:focus-within { overflow: visible; } -.c83 { +.c82 { height: 2.5rem; width: 2.5rem; } -.c85 { +.c84 { height: 2.5rem; width: 2.5rem; margin-top: 0.1rem; } -.c82 { +.c81 { color: #027EB5; cursor: pointer; -webkit-text-decoration: none; text-decoration: none; } -.c82:hover, -.c82:focus { +.c81:hover, +.c81:focus { -webkit-text-decoration: underline; text-decoration: underline; color: #0064A0; } -.c84 { +.c83 { color: #027EB5; cursor: pointer; -webkit-text-decoration: none; text-decoration: none; } -.c84:hover, -.c84:focus { +.c83:hover, +.c83:focus { -webkit-text-decoration: underline; text-decoration: underline; color: #0064A0; } -.c81 { +.c80 { color: #424242; font-size: 1.6rem; line-height: 2.5rem; @@ -1429,7 +1429,7 @@ Array [ border-bottom: solid 0.1rem #e5e5e5; } -.c81 a { +.c80 a { border: none; display: -webkit-box; display: -webkit-flex; @@ -1903,20 +1903,20 @@ li[aria-label="Current Page"] .c61 { padding: 0; } -.c57 > .c58 > details > summary .os-number, +.c57 > .c58 > a > summary .os-number, .c57 > .c58 > .c60 .os-number { width: 1.78125rem; overflow: hidden; } -.c57 > .c58 > details > summary .os-divider, +.c57 > .c58 > a > summary .os-divider, .c57 > .c58 > .c60 .os-divider { width: 0.8rem; text-align: center; overflow: hidden; } -.c57 > .c58 > details > summary .os-text, +.c57 > .c58 > a > summary .os-text, .c57 > .c58 > .c60 .os-text { -webkit-flex: 1; -ms-flex: 1; @@ -1924,7 +1924,7 @@ li[aria-label="Current Page"] .c61 { overflow: hidden; } -.c57 > .c58 > details > ol { +.c57 > .c58 > a > ol { margin-left: 2.58125rem; } @@ -1933,20 +1933,20 @@ li[aria-label="Current Page"] .c61 { padding: 0; } -.c73 > .c58 > details > summary .os-number, +.c73 > .c58 > a > summary .os-number, .c73 > .c58 > .c60 .os-number { - width: 4.0078125rem; + width: 0rem; overflow: hidden; } -.c73 > .c58 > details > summary .os-divider, +.c73 > .c58 > a > summary .os-divider, .c73 > .c58 > .c60 .os-divider { width: 0.8rem; text-align: center; overflow: hidden; } -.c73 > .c58 > details > summary .os-text, +.c73 > .c58 > a > summary .os-text, .c73 > .c58 > .c60 .os-text { -webkit-flex: 1; -ms-flex: 1; @@ -1954,37 +1954,7 @@ li[aria-label="Current Page"] .c61 { overflow: hidden; } -.c73 > .c58 > details > ol { - margin-left: 4.8078125rem; -} - -.c74 { - margin: 0; - padding: 0; -} - -.c74 > .c58 > details > summary .os-number, -.c74 > .c58 > .c60 .os-number { - width: 0rem; - overflow: hidden; -} - -.c74 > .c58 > details > summary .os-divider, -.c74 > .c58 > .c60 .os-divider { - width: 0.8rem; - text-align: center; - overflow: hidden; -} - -.c74 > .c58 > details > summary .os-text, -.c74 > .c58 > .c60 .os-text { - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - overflow: hidden; -} - -.c74 > .c58 > details > ol { +.c73 > .c58 > a > ol { margin-left: 0.8rem; } @@ -2044,31 +2014,31 @@ li[aria-label="Current Page"] .c61 { } @media print { - .c93 { + .c92 { display: none; } } @media (min-width:60.1em) { - .c95 { + .c94 { padding: 7rem 0; } } @media (max-width:37.5em) { - .c95 { + .c94 { padding: 2rem 0; } } @media (max-width:60.1em) and (min-width:37.6em) { - .c95 { + .c94 { padding: 4rem 0; } } @media (min-width:37.6em) { - .c96 { + .c95 { -webkit-align-items: start; -webkit-box-align: start; -ms-flex-align: start; @@ -2079,19 +2049,19 @@ li[aria-label="Current Page"] .c61 { } @media (max-width:37.5em) { - .c96 { + .c95 { grid-template: "headline" "mission" "col1" "col2" "col3"; } } @media (min-width:60.1em) { - .c96 { + .c95 { grid-column-gap: 8rem; } } @media (min-width:37.6em) { - .c97 { + .c96 { font-size: 2.4rem; font-weight: bold; -webkit-letter-spacing: -0.096rem; @@ -2103,7 +2073,7 @@ li[aria-label="Current Page"] .c61 { } @media (max-width:37.5em) { - .c97 { + .c96 { font-size: 2rem; font-weight: bold; -webkit-letter-spacing: -0.08rem; @@ -2115,7 +2085,7 @@ li[aria-label="Current Page"] .c61 { } @media (min-width:37.6em) { - .c98 { + .c97 { font-size: 1.8rem; font-weight: normal; -webkit-letter-spacing: normal; @@ -2127,37 +2097,37 @@ li[aria-label="Current Page"] .c61 { } @media (max-width:37.5em) { - .c102 { + .c101 { line-height: 4.5rem; } } @media (max-width:37.5em) { - .c100 { + .c99 { line-height: 4.5rem; } } @media (min-width:37.6em) { - .c105 { + .c104 { padding: 2.5rem 0; } } @media (max-width:37.5em) { - .c105 { + .c104 { padding: 1.5rem; } } @media (min-width:37.6em) { - .c106 { + .c105 { grid-auto-flow: column; } } @media (max-width:37.5em) { - .c106 { + .c105 { padding: 0; } } @@ -2236,14 +2206,14 @@ li[aria-label="Current Page"] .c61 { } @media screen { - .c79 { + .c78 { max-width: 82.5rem; margin: 0 auto; } } @media screen { - .c79 { + .c78 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -2254,120 +2224,120 @@ li[aria-label="Current Page"] .c61 { width: 100%; } - .c79 #main-content { + .c78 #main-content { overflow: visible; width: 100%; } - .c79 #main-content > [data-type="page"], - .c79 #main-content > [data-type="composite-page"] { + .c78 #main-content > [data-type="page"], + .c78 #main-content > [data-type="composite-page"] { margin-top: 3.2rem; } } @media screen { - .c79 .highlight.yellow[aria-current] { + .c78 .highlight.yellow[aria-current] { background-color: #fed200; border-bottom: 0.2rem solid #8f7700; padding: 0.2rem 0 0; } - .c79 .highlight.yellow[aria-current].block:after { + .c78 .highlight.yellow[aria-current].block:after { background-color: #fed200; } - .c79 .highlight.yellow[aria-current].first.text.has-note:after { + .c78 .highlight.yellow[aria-current].first.text.has-note:after { display: none; } } @media screen { - .c79 .highlight.green[aria-current] { + .c78 .highlight.green[aria-current] { background-color: #92d101; border-bottom: 0.2rem solid #4e6f01; padding: 0.2rem 0 0; } - .c79 .highlight.green[aria-current].block:after { + .c78 .highlight.green[aria-current].block:after { background-color: #92d101; } - .c79 .highlight.green[aria-current].first.text.has-note:after { + .c78 .highlight.green[aria-current].first.text.has-note:after { display: none; } } @media screen { - .c79 .highlight.blue[aria-current] { + .c78 .highlight.blue[aria-current] { background-color: #00c3ed; border-bottom: 0.2rem solid #006880; padding: 0.2rem 0 0; } - .c79 .highlight.blue[aria-current].block:after { + .c78 .highlight.blue[aria-current].block:after { background-color: #00c3ed; } - .c79 .highlight.blue[aria-current].first.text.has-note:after { + .c78 .highlight.blue[aria-current].first.text.has-note:after { display: none; } } @media screen { - .c79 .highlight.purple[aria-current] { + .c78 .highlight.purple[aria-current] { background-color: #545ec8; border-bottom: 0.2rem solid #141a3e; padding: 0.2rem 0 0; color: #fff; } - .c79 .highlight.purple[aria-current].block:after { + .c78 .highlight.purple[aria-current].block:after { background-color: #545ec8; } - .c79 .highlight.purple[aria-current].first.text.has-note:after { + .c78 .highlight.purple[aria-current].first.text.has-note:after { display: none; } } @media screen { - .c79 .highlight.pink[aria-current] { + .c78 .highlight.pink[aria-current] { background-color: #de017e; border-bottom: 0.2rem solid #560131; padding: 0.2rem 0 0; color: #fff; } - .c79 .highlight.pink[aria-current].block:after { + .c78 .highlight.pink[aria-current].block:after { background-color: #de017e; } - .c79 .highlight.pink[aria-current].first.text.has-note:after { + .c78 .highlight.pink[aria-current].first.text.has-note:after { display: none; } } @media screen { - .c79 .search-highlight { + .c78 .search-highlight { font-weight: bold; } - .c79 .search-highlight, - .c79 .search-highlight .math { + .c78 .search-highlight, + .c78 .search-highlight .math { background-color: #ffea00; } - .c79 .search-highlight[aria-current], - .c79 .search-highlight[aria-current] .math { + .c78 .search-highlight[aria-current], + .c78 .search-highlight[aria-current] .math { background-color: #ff9e4b; padding: 0.2rem 0; } - .c79 .search-highlight[aria-current] .search-highlight { + .c78 .search-highlight[aria-current] .search-highlight { background-color: unset; } - .c79 .search-highlight [data-for-screenreaders="true"]::before { + .c78 .search-highlight [data-for-screenreaders="true"]::before { content: attr(data-message); position: absolute; width: 1px; @@ -2389,38 +2359,38 @@ li[aria-label="Current Page"] .c61 { } @media screen { - .c89 { + .c88 { max-width: 82.5rem; margin: 0 auto; } } @media screen { - .c92 { + .c91 { max-width: 82.5rem; margin: 0 auto; } } @media screen and (max-width:75em) { - .c86 { + .c85 { padding: 0 1.6rem; } } @media screen and (max-width:75em) { - .c86 { + .c85 { min-height: 4rem; padding-top: 0.8rem; } - .c86 > .c64 { + .c85 > .c64 { margin-bottom: 0.8rem; } } @media print { - .c86 { + .c85 { display: none; } } @@ -2570,19 +2540,19 @@ li[aria-label="Current Page"] .c61 { } @media screen and (max-width:75em) { - .c75 { + .c74 { grid-column-start: 2; } } @media screen and (max-width:50em) { - .c75 { + .c74 { grid-column: 1 / -1; } } @media screen { - .c75 { + .c74 { background-color: #fff; padding-left: 37.5rem; -webkit-transition: padding-left 300ms ease-in-out; @@ -2591,21 +2561,21 @@ li[aria-label="Current Page"] .c61 { } @media screen and (max-width:90em) { - .c77 { + .c76 { max-width: calc(100vw - ((100vw - 128rem) / 2) - 8rem); left: calc(100vw - (100vw - ((100vw - 128rem) / 2) - 8rem)); } } @media screen and (max-width:80em) { - .c77 { + .c76 { max-width: calc(100vw - 8rem); left: 8rem; } } @media screen and (max-width:75em) { - .c77 { + .c76 { max-width: 100%; left: 0; z-index: 21; @@ -2614,7 +2584,7 @@ li[aria-label="Current Page"] .c61 { } @media screen { - .c76 { + .c75 { overflow: visible; -webkit-flex: 1; -ms-flex: 1; @@ -2702,7 +2672,7 @@ li[aria-label="Current Page"] .c61 { } @media screen { - .c78 { + .c77 { padding: 0 3.2rem; -webkit-flex: 1; -ms-flex: 1; @@ -2718,25 +2688,25 @@ li[aria-label="Current Page"] .c61 { } @media screen and (max-width:75em) { - .c82 { + .c81 { margin-left: -0.8rem; } } @media screen and (max-width:75em) { - .c84 { + .c83 { margin-right: -0.8rem; } } @media print { - .c81 { + .c80 { display: none; } } @media screen and (max-width:75em) { - .c81 { + .c80 { margin: 3.5rem auto 3rem auto; border: 0; } @@ -3557,6 +3527,7 @@ li[aria-label="Current Page"] .c61 { className="c49" data-analytics-region="toc" data-testid="toc" + role="navigation" > -
    -
  1. -
    - -
    - - - 1 Test Chapter 1.1", - } - } - /> -
    -     -
      -
    1. - Introduction to Science and the Realm of Physics, Physical Quantities, and Units", - } - } - href="1-introduction-to-science-and-the-realm-of-physics-physical-quantities-and-units" - onClick={[Function]} - /> -
      2. -
    -
    -
    2. -
  2. - 1.1 Physics: An Introduction", - } - } - href="1-1-physics-an-introduction" - onClick={[Function]} - /> -
    3. -
  3. - 23.12 RLC Series AC Circuits", - } - } - href="23-12-rlc-series-ac-circuits" - onClick={[Function]} - /> -
    4. -
- +
  • -
    -
      -
    1. - Test Page 3", - } - } - href="2-test-page-3" - onClick={[Function]} - /> -
      2. -
    -
    +
  • -
    -
    +
  • -
    -
      -
    1. - Test Page 5", - } - } - href="4-test-page-5" - onClick={[Function]} - /> -
      2. -
    -
    +
  • -
    -
      -
    1. - Test Page 6 with special characters in url", - } - } - href="10-test-page-6-f%C3%ADsica" - onClick={[Function]} - /> -
      2. -
    -
    +
  • -
    -
      -
    1. - Test Page 7", - } - } - href="12-test-page-7" - onClick={[Function]} - /> -
      2. -
    -
    +
    • this is a test page
    @@ -4270,19 +4091,19 @@ li[aria-label="Current Page"] .c61 { />