From afb720ea366fa175401c3d6144afc5eb87d72e18 Mon Sep 17 00:00:00 2001
From: quanb-duy <quanbuid@gmail.com>
Date: Wed, 9 Apr 2025 14:16:32 +0200
Subject: [PATCH] fixed sidebar and added aria-hidden=true to decorative
 non-textual elements

JIRA: DP-3067
---
 assets/scss/menu.scss                  |  2 +-
 layouts/shortcodes/blocks/card.html    | 12 ++++++++----
 layouts/shortcodes/embedded-image.html |  5 +++--
 static/js/menu.js                      | 11 +++++++++--
 4 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/assets/scss/menu.scss b/assets/scss/menu.scss
index ba6519f..5542b27 100644
--- a/assets/scss/menu.scss
+++ b/assets/scss/menu.scss
@@ -154,7 +154,7 @@
         display: none;
         
         &.expanded {
-            display: block;
+            display: block !important;
         }
     }
 
diff --git a/layouts/shortcodes/blocks/card.html b/layouts/shortcodes/blocks/card.html
index 191fef9..aab43f8 100644
--- a/layouts/shortcodes/blocks/card.html
+++ b/layouts/shortcodes/blocks/card.html
@@ -26,12 +26,14 @@
 {{ end }}
 
 
-<div class="{{$cardClass}}  d-flex align-items-stretch">
+<div class="{{$cardClass}} d-flex align-items-stretch">
     {{ if $sectionLink }}
         {{ with .Site.GetPage (printf "%s%s" (.Scratch.Get "docsRoot") $sectionLink) }}
             <a href="{{ .RelPermalink }}" class="homepage-card homepage-card__sectionLink homepage-card__hasIcon homepage-card__icon{{ title $iconPosition }}">
                 <div class="homepage-card__icon">
-                    {{ readFile (printf "%s%s" .RelPermalink .Params.icon) | safeHTML }}
+                    {{ $svgContent := readFile (printf "%s%s" .RelPermalink .Params.icon) }}
+                    {{ $modifiedSvg := replaceRE `(<svg)(.*?>)` "$1 aria-hidden=\"true\"$2" $svgContent 1 }}
+                    {{ $modifiedSvg | safeHTML }}
                 </div>
                 <h4 class="homepage-card__title">{{ .Title }}</h4>
                 {{ if $description }}
@@ -46,9 +48,11 @@ <h4 class="homepage-card__title">{{ .Title }}</h4>
             {{ if $icon }}
                 <div class="homepage-card__icon">
                     {{ if eq (index (last 1 (split $icon ".")) 0) "svg" }}
-                        {{ readFile $icon | safeHTML }}
+                        {{ $svgContent := readFile $icon }}
+                        {{ $modifiedSvg := replaceRE `(<svg)(.*?>)` "$1 aria-hidden=\"true\"$2" $svgContent 1 }}
+                        {{ $modifiedSvg | safeHTML }}
                     {{ else }}
-                        <img src="{{ $icon }}" />
+                        <img src="{{ $icon }}" aria-hidden="true"/>
                     {{ end }}
                 </div>
             {{ end }}
diff --git a/layouts/shortcodes/embedded-image.html b/layouts/shortcodes/embedded-image.html
index f18f101..2bee881 100644
--- a/layouts/shortcodes/embedded-image.html
+++ b/layouts/shortcodes/embedded-image.html
@@ -6,6 +6,7 @@
 {{ $height := .Get "height" }}
 {{ $id := urlize (humanize (replace (delimit (last 1 (split $src "/")) "") "." "-")) }}
 {{ $caption := .Get "caption" }}
+{{ $noalt := .Get "noalt" }}
 
 <div class="{{ if $no_border }}embedded-image_noborder{{ else }}embedded-image{{ end }}{{ if $caption }} hasCaption{{ end }}" data-toggle="modal" data-bs-toggle="modal" data-target="#{{ $id }}" data-bs-target="#{{ $id }}">
 
@@ -19,7 +20,7 @@
 </video>
 
 {{ else }}
-<img src="{{ $src }}" alt="{{ $alt }}"{{ if $width }} width="{{ $width }}"{{ end }}{{ if $height }} height="{{ $height }}"{{ end }} />
+<img src="{{ $src }}" alt="{{ $alt }}"{{ if $width }} width="{{ $width }}"{{ end }}{{ if $height }} height="{{ $height }}"{{ end }} {{ if $noalt }} aria-hidden=”true” data-proofer-ignore {{ end }} />
 {{ end }}
 
 {{ if $caption }}
@@ -37,7 +38,7 @@
 <p>{{ if $alt }}Description: {{ $alt }}. {{ end }}Your browser does not support the video tag.</p>
 </video>
 {{ else }}
-<img src="{{ $src }}" alt="{{ $alt }}" />
+<img src="{{ $src }}" alt="{{ $alt }}" {{ if $noalt }} aria-hidden=”true” data-proofer-ignore {{ end }}/>
 {{ end }}
 </div>
 </div>
\ No newline at end of file
diff --git a/static/js/menu.js b/static/js/menu.js
index d0d8bba..33417b6 100644
--- a/static/js/menu.js
+++ b/static/js/menu.js
@@ -11,15 +11,22 @@ $(document).ready(function () {
     menu.removeClass("init");
     
     $(".gd-docs-menu-page__toggle-btn").on("click", function() {
-        console.log("clicked");
         var $button = $(this);
-        var $section = $("#" + $button.attr("aria-controls"));
+        var sectionId = $button.attr("aria-controls");
+        var $section = $("#" + sectionId);
         var isExpanded = $button.attr("aria-expanded") === "true";
         
+        // Update button state
         $button.attr("aria-expanded", !isExpanded);
         $button.attr("aria-label", (isExpanded ? "Expand" : "Collapse") + " " + 
                                    $button.closest(".gd-docs-menu-page__title").find(".gd-docs-menu-page__link").text() + " section");
         
+        // Fallback: if section not found by ID, look for the next sibling wrapper
+        if ($section.length === 0) {
+            $section = $button.closest(".gd-docs-menu-page__title").next(".gd-docs-menu-section-wrapper");
+        }
+        
+        // Toggle expanded state
         $section.toggleClass("expanded");
     });