Skip to content

Draft: Shift anchor icon to the left for headers inside a summary tag

Chad Lavimoniere requested to merge 463329-anchor-links-overlays-section-expander-when-using-heading-in-details-summary into master

What does this MR do and why?

When a user adds an h1, h2, h3, h4, h5 or h6 to their markdown/RTE content, we automatically render an icon link to the left of it that navigates to the skiplink for that header.

When the user has placed this header inside a <summary> tag, the skiplink and the summary toggle currently clash. This MR shifts the link icon to the left in this case so there is room for both.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After

How to set up and validate locally

  1. Check out this branch
  2. Create an issue in the GDK
  3. Add the following text to the issue description, then save it:
<details>
<summary>

# I'm an h1

</summary>
Hello, World!
</details>

<details>
<summary>

## I'm an h2

</summary>
Hello, World!
</details>

<details>
<summary>

### I'm an h3

</summary>
Hello, World!
</details>

<details>
<summary>

#### I'm an h4

</summary>
Hello, World!
</details>

<details>
<summary>

##### I'm an h5

</summary>
Hello, World!
</details>


<details>
<summary>

###### I'm an h6

</summary>
Hello, World!
</details>

Related to #463329

Merge request reports