Skip to content

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

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

Before After
Screen_Recording_2024-08-26_at_11.39.36 Screen_Recording_2024-08-26_at_11.38.52

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>
  1. Hover over the headings. The link icon will display to the left of the summary toggle and will be independently clickable.

Related to #463329 (closed), #469616 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading