Feature/ucd 180 by kloos-ds · Pull Request #41 · doubleSlashde/mkdocs-doubleslash-theme

kloos-ds · 2026-07-02T13:12:03Z

verbessere doubleSlash im CD-konformität

Neues Feature:

der Content-Bereich soll durch den User über einen Button verbreitert werden können, so dass sich die beiden Seitenleisten links und rechts "weg klappen" lassen

ds-giusy · 2026-07-07T08:27:57Z

Hi @kloos-ds,
Kannst du bitte hier nachschauen, was den toc-collapse-toggle im dark mode überlagert?

ds-giusy · 2026-07-07T09:09:32Z

Frage: unter w: 1220px soll man das Inhaltsverzeichnis nicht mehr einklappen können?

ds-giusy · 2026-07-07T08:42:42Z

+    --md-default-fg-color--light: var(--ds-color-ink);
+
+    --md-accent-fg-color: var(--ds-color-primary);
+    --md-accent-fg-color--transparent: #00a5e120;


Eigener Alpha-Token; existiert nicht in unserem CD.
FYI: für eine Var-Alpha-Komposition benötigt man im CSS color-mix()

verwendet jetzt color-mix()

ds-giusy · 2026-07-07T08:43:20Z

-    --md-custom-accent-color: #15202b;
-    --md-custom-text-color: #d7e9f4;
+    --md-accent-fg-color: var(--ds-color-dark-clickable);
+    --md-accent-fg-color--transparent: #00a5e120;


hier noch eine stelle bezüglich eigener Alpha-Token

verwendet jetzt color-mix()

ds-giusy · 2026-07-07T08:45:24Z

    .md-tabs__item {
        color: var(--md-typeset-color);
        opacity: 1;
-        font-weight: bold;
+        font-family: "Inter SemiBold", Arial, Helvetica, sans-serif;
+        font-size: 15px;
+        font-weight: 600;
+        line-height: 24px;
    }


font-size/line-height in px (15px, 45px, 40px, 25px, 18px, 13px, 19px …)

Werte selbst korrekt aus typography.*-website/body-md/footer-md/caption-subfooter, aber nicht als Custom Properties gepflegt → bei Token-Update im CD müsste jede Stelle händisch synchronisiert werden

ersetzt mit properties

ds-giusy · 2026-07-07T08:47:09Z

    .md-content .md-typeset h1 {
        font-size: 45px;
+        line-height: 58.5px;
        margin-bottom: 30px;
    }

    .md-content .md-typeset h2 {
-        font-size: 25px;
+        font-size: 40px;
+        line-height: 52px;
        margin-bottom: 15px;
    }

    .md-content .md-typeset h3 {
        font-size: 25px;
+        line-height: 40px;
+        margin-bottom: 12px;
+    }
+
+    .md-content .md-typeset h4 {
+        font-size: 23px;
+        line-height: 29.9px;
+        margin-bottom: 12px;
+    }
+
+    .md-content .md-typeset h5 {
+        font-size: 20px;
+        line-height: 26px;
+        margin-bottom: 12px;
+    }
+
+    .md-content .md-typeset h6 {
+        font-size: 18px;
+        line-height: 24px;
        margin-bottom: 12px;
    }


Selbes Feedback wie bei Zeile 130-137.
Sollte sich etwas im CD ändern müsste das alles händisch synchronisiert werden.

ersetzt mit properties

ds-giusy · 2026-07-07T09:22:01Z

+  <button
+      type="button"
+      class="ds-toc-toggle md-icon"
+      data-md-component="toc-collapse-toggle"
+      aria-pressed="false"
+      aria-label="Inhaltsverzeichnis ausblenden"
+      title="Inhaltsverzeichnis ausblenden"
+      hidden
+  >


hier ebenfalls

Vorschlag:
aria-describedby="" am Button ergänzen

button hat jetzt describedby

ds-giusy · 2026-07-07T09:24:12Z

+  function maybeShowInitialTooltip(button, tooltip) {
+    if (!tooltip || button.hidden) {
+      return;
+    }
+
+    try {
+      if (sessionStorage.getItem(TOOLTIP_STORAGE_KEY) === "true") {
+        return;
+      }
+    } catch (e) {
+      return;
+    }
+
+    showInitialTooltip(tooltip, button);
+  }
+
+  function showInitialTooltip(tooltip, button) {
+    if (!tooltip || tooltip.classList.contains("ds-toc-toggle__tooltip--visible")) {
+      return;
+    }
+
+    try {
+      sessionStorage.setItem(TOOLTIP_STORAGE_KEY, "true");
+    } catch (e) {}
+
+    tooltip.hidden = false;
+    window.requestAnimationFrame(function () {
+      tooltip.classList.add("ds-toc-toggle__tooltip--visible");
+    });
+
+    window.setTimeout(function () {
+      hideTooltip(tooltip);
+    }, TOOLTIP_DURATION_MS);
+
+    button.addEventListener(
+      "click",
+      function () {
+        hideTooltip(tooltip);
+      },
+      { once: true }
+    );
+  }


Accessibility:
Tooltip erscheint nur einmalig beim ersten Laden und verschwindet nach fixen 3000ms, ohne dass der Nutzer die Anzeigedauer verlängern/steuern kann. Tastatur-Nutzer, die erst nach den 3s zum Button tabben, sehen den Hinweis nie.

WCAG Criterion 2.2.1

Vorschlag:
Tooltip zusätzlich bei focus/hover auf den Button zeigen (nicht nur beim Page-Load), oder Dauer verlängern/nicht auto-hiden bei Fokus

wird bei hover jetzt auch angezeigt

ds-giusy · 2026-07-07T09:26:51Z

+    }
+
+    .ds-content-width-toggle {
+        --ds-toggle-size: 2rem;


Accessibility (Best Practice kein Fehler):
Touch-Target des .ds-content-width-toggle ist im Default-Zustand nur --ds-toggle-size: 2rem (32×32px), erst im "Wide"-Zustand wächst er auf --ds-spacing-control-height (43px).

Vorschlag:
Man könnte hier einheitlich --ds-spacing-control-height (43px) für beide Zustände nutzen oder ist es zu groß dann?

ds-giusy · 2026-07-07T09:29:49Z

+    <span class="ds-toc-toggle__icon ds-toc-toggle__icon--collapse">
+      {% include ".icons/lucide/chevrons-right.svg" %}
+    </span>
+    <span class="ds-toc-toggle__icon ds-toc-toggle__icon--expand" hidden>
+      {% include ".icons/lucide/chevrons-left.svg" %}
+    </span>


Minor Accessibility:
Die Icon-s (collapse/expand) liegen dauerhaft im DOM, nur eines ist per hidden versteckt. SVGs haben kein aria-hidden="true", das inaktive SVG könnte bei manchen Screenreadern trotzdem als leeres Element auftauchen.

WCAG Criterion: 4.1.2

Vorschlag:
aria-hidden="true" auf beide .ds-*-toggle__icon-Spans setzen (Button-Label trägt die Semantik bereits über aria-label)

haben jetzt aria-hidden

ds-giusy · 2026-07-07T09:30:28Z

+  <span class="ds-content-width-toggle__icon ds-content-width-toggle__icon--collapse">
+    {% include ".icons/lucide/chevrons-left.svg" %}
+  </span>
+  <span class="ds-content-width-toggle__icon ds-content-width-toggle__icon--expand" hidden>
+    {% include ".icons/lucide/chevrons-right.svg" %}
+  </span>


Minor Accessibility:
Die Icon-s (collapse/expand) liegen dauerhaft im DOM, nur eines ist per hidden versteckt. SVGs haben kein aria-hidden="true", das inaktive SVG könnte bei manchen Screenreadern trotzdem als leeres Element auftauchen.

WCAG Criterion: 4.1.2

Vorschlag:
aria-hidden="true" auf beide .ds-*-toggle__icon-Spans setzen (Button-Label trägt die Semantik bereits über aria-label)

haben jetzt aria-hidden

…-theme.css Co-authored-by: ds-giusy <108790481+ds-giusy@users.noreply.github.com>

jonas-haeusler · 2026-07-07T11:16:07Z

changelog will automatically be generated at release time by commitizen, based on the commit messages since last release. please don't maintain in manually.

…ve background from toc title, further feedback

jonas-haeusler · 2026-07-07T11:23:35Z

+                    "accent": "custom",
+                    "scheme": "slate",
                    "toggle": {
-                        "icon": "lucide/sun-moon",


please remove the sun-moon icon if its no longer used.
if the circle-half icon is not from lucide, please move it out of the lucide directory as well.

removed it and moved the icon out the folder

…docs-doubleslash-theme into feature/UCD-180

kloos-ds · 2026-07-07T13:01:23Z

made some mistake while working on the branch
i reopen a clean version on the branch feature/UCD-180-1
sorry for the inconvenience

kloos-ds added 2 commits July 2, 2026 10:58

UCD-180 add feature to collapse sidebars, improve style

c7d1d14

UCD-180 adjust table style and dark mode switch

fbc4369

ds-giusy reviewed Jul 7, 2026

View reviewed changes

kloos-ds and others added 4 commits July 7, 2026 12:12

Update mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash…

cee62cf

…-theme.css Co-authored-by: ds-giusy <108790481+ds-giusy@users.noreply.github.com>

Update mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash…

c90c122

…-theme.css Co-authored-by: ds-giusy <108790481+ds-giusy@users.noreply.github.com>

Update mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash…

2270289

…-theme.css Co-authored-by: ds-giusy <108790481+ds-giusy@users.noreply.github.com>

Update mkdocs_doubleslash_theme/assets/stylesheets/mkdocs-doubleslash…

ab54739

…-theme.css Co-authored-by: ds-giusy <108790481+ds-giusy@users.noreply.github.com>

jonas-haeusler reviewed Jul 7, 2026

View reviewed changes

UCD-180 remove screen width restriction for toc collapse button, remo…

d454088

…ve background from toc title, further feedback

jonas-haeusler reviewed Jul 7, 2026

View reviewed changes

kloos-ds added 2 commits July 7, 2026 13:36

Merge branch 'feature/UCD-180' of https://github.com/doubleSlashde/mk…

1143cfb

…docs-doubleslash-theme into feature/UCD-180

remove changelog entry

3cd033e

kloos-ds closed this Jul 7, 2026

kloos-ds deleted the feature/UCD-180 branch July 10, 2026 07:47

Uh oh!

Conversation

kloos-ds commented Jul 2, 2026

Uh oh!

ds-giusy commented Jul 7, 2026

Uh oh!

ds-giusy commented Jul 7, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kloos-ds commented Jul 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants