Enables copying a direct link to any section by clicking its anchor. Also updates the aria-label to remove the code tag
(cherry picked from commit 4e89bc6244)
Long TOC entries now truncate with …, and a title attribute is added to display the full label on hover.
Fixes: #65727
(cherry picked from commit 313454bf17)
Ensures the example viewer header displays correctly by keeping the "Show code"
button aligned to the right and preventing metadata text from wrapping.
Improves layout consistency across documentation examples.
(cherry picked from commit b26fe73a91)
Tab selection relied on the tabs being visible whe nthe example is loaded. That didn't work when `hideCode` was used.
fixes#65550
(cherry picked from commit 119c6ddaeb)
Rather than using multiple view modes for code examples, we can just treat the previous snippet mode as
as multifile mode that just only has one file in it.
(cherry picked from commit f61e61ac4f)
Within examples, we now link to the github URL using the commit that was made to create adev, rather than
always on main, which may change over time.
(cherry picked from commit a8f46e598a)
- Replaced <a><button></button></a> with a proper <a> containing text and
aria-label to ensure links have discernible text.
- Added main tag in home page to provide
a consistent main landmark, improving accessibility for screen readers
and satisfying WCAG and Lighthouse requirements.
Fixes#65181.
(cherry picked from commit ee5947db38)
The example viewer has some `::ng-deep` styles that are used to reset global styles that leak into the live examples. It works by applying a style like `.docs-example-viewer-preview * {all: revert;}`.
The problem with this is that depending on when the first example is rendered, the styles will be lower or higher in the cascade, thus making the reset unreliable. Furthermore, it can affect structural styles from the CDK which intentionally have low specificity.
These changes move the resets into the global stylesheet to make them more predictable.
(cherry picked from commit 1ba50caefc)
Long code blocks overflow the headings on narrow screen (like mobiles), this messes up the global layout of the page. With the ellipsis with fix that.
fixes#64845
(cherry picked from commit 7f44345db3)
The DocViewer component's getCodeSnippetsFromMultifileWrapper method was not
extracting the header attribute from nested <docs-code> elements, causing the
ExampleViewer to fall back to displaying file paths instead of custom headers
in tab labels.
This change adds title extraction from the header attribute when processing
multifile code snippets, ensuring that custom headers are properly displayed
in the code viewer tabs.
Fixes#64760
(cherry picked from commit 5d8b76b4fa)
The navigation list component was using `routerLinkActive` with
`{ exact: true }`, which required an exact URL match including query
parameters. When visiting `/update-guide?v=19.0-20.0&l=1`, the link
`/update-guide` didn't match, so the active class wasn't applied.
Updated `routerLinkActiveOptions` to ignore query parameters while
maintaining exact path matching so the navigation item stays highlighted
when interacting with the update guide form.
(cherry picked from commit 33a872d90a)
The ExampleViewer component was extracting only innerHTML from code
blocks in multifile examples, which lost the shell class applied by
the formatCode function. This caused the $ prompt to not appear for
shell commands in multifile blocks even when language="shell" was set.
Modified the Snippet interface to track shell language state and
updated getCodeSnippetsFromMultifileWrapper and getStandaloneCodeSnippet
methods to preserve the shell class. Updated example-viewer template
to conditionally apply the shell class to the code wrapper element.
Fixes inconsistency between standalone and multifile shell code blocks.
(cherry picked from commit 27e183330e)
Ensures that file names remain visible even if the associated code block
is collapsed or hidden, improving readability and context in the docs.
PR Close#64204
Change direct deps in bazel targets and import specifiers within files to maintain strict deps requirements ahead of enabling strict deps tests in the repo
PR Close#63323
This fix updates the adev `DocViewer` component to support rendering with the `main[docsViewer` selector so that the primary content for the page is inside of a `<main>` element (without introducing an extra DOM element).
PR Close#63121
