Skip to content

Commit 59856f8

Browse files
sumesh-GLsumesh-GL
committed
Merge remote-tracking branch 'origin/AC-15166' into spartans_pr_16082025
2 parents 8abdbf5 + 1d3961c commit 59856f8

File tree

2 files changed

+72
-105
lines changed

2 files changed

+72
-105
lines changed

‎app/code/Magento/Theme/view/frontend/templates/html/sections.phtml‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,20 @@ $groupCss = $block->getGroupCss();
2727
$label = $block->getChildData($alias, 'title');
2828
?>
2929
<div class="section-item-title <?= $escaper->escapeHtmlAttr($groupCss) ?>-item-title"
30-
data-role="collapsible">
30+
data-role="collapsible"
31+
aria-controls="<?= $escaper->escapeHtmlAttr($alias) ?>"
32+
aria-expanded="false">
3133
<a class="<?= $escaper->escapeHtmlAttr($groupCss) ?>-item-switch"
32-
data-toggle="switch" href="#<?= $escaper->escapeHtmlAttr($alias) ?>">
34+
data-toggle="switch"
35+
href="#<?= $escaper->escapeHtmlAttr($alias) ?>">
3336
<?= /* @noEscape */ $label ?>
3437
</a>
3538
</div>
3639
<div class="section-item-content <?= $escaper->escapeHtmlAttr($groupCss) ?>-item-content"
3740
id="<?= $escaper->escapeHtmlAttr($alias) ?>"
38-
role="tab">
41+
role="tabpanel"
42+
aria-hidden="true"
43+
style="display: none;">
3944
<?= /* @noEscape */ $html ?>
4045
</div>
4146
<?php endforeach;?>

‎app/design/frontend/Magento/blank/web/css/source/_navigation.less‎

Lines changed: 64 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
// /**
2-
// * Copyright © Magento, Inc. All rights reserved.
3-
// * See COPYING.txt for license details.
4-
// */
1+
/**
2+
* Copyright 2025 Adobe
3+
* All Rights Reserved.
4+
*/
55

66
//
77
// Variables
@@ -27,12 +27,7 @@
2727
}
2828

2929
.nav-toggle {
30-
.lib-icon-font(
31-
@icon-menu,
32-
@_icon-font-size: 28px,
33-
@_icon-font-color: @header-icons-color,
34-
@_icon-font-color-hover: @header-icons-color-hover
35-
);
30+
.lib-icon-font(@icon-menu, @_icon-font-size: 28px, @_icon-font-color: @header-icons-color, @_icon-font-color-hover: @header-icons-color-hover);
3631
.lib-icon-text-hide();
3732
cursor: pointer;
3833
display: block;
@@ -54,12 +49,7 @@
5449

5550
.parent {
5651
.level-top {
57-
.lib-icon-font(
58-
@_icon-font-content: @icon-down,
59-
@_icon-font-size: 42px,
60-
@_icon-font-position: after,
61-
@_icon-font-display: block
62-
);
52+
.lib-icon-font(@_icon-font-content: @icon-down, @_icon-font-size: 42px, @_icon-font-position: after, @_icon-font-display: block);
6353
position: relative;
6454

6555
&:after {
@@ -69,10 +59,7 @@
6959
}
7060

7161
&.ui-state-active {
72-
.lib-icon-font-symbol(
73-
@_icon-font-content: @icon-up,
74-
@_icon-font-position: after
75-
);
62+
.lib-icon-font-symbol(@_icon-font-content: @icon-up, @_icon-font-position: after);
7663
}
7764
}
7865
}
@@ -100,46 +87,13 @@
10087
margin-bottom: @indent__xs;
10188
}
10289

103-
&:last-child {
104-
border-bottom: 1px solid @color-gray82;
105-
}
106-
}
107-
108-
.switcher-trigger {
109-
strong {
110-
.lib-icon-font(
111-
@_icon-font-content: @icon-down,
112-
@_icon-font-size: 42px,
113-
@_icon-font-position: after,
114-
@_icon-font-display: block
115-
);
116-
position: relative;
90+
&.language {
91+
.options {
92+
.lib-list-reset-styles();
11793

118-
&:after {
119-
position: absolute;
120-
right: -40px;
121-
top: -16px;
122-
}
123-
}
124-
125-
&.active strong {
126-
.lib-icon-font-symbol(
127-
@_icon-font-content: @icon-up,
128-
@_icon-font-position: after
129-
);
130-
}
131-
}
132-
133-
.switcher-dropdown {
134-
.lib-list-reset-styles();
135-
display: none;
136-
padding: @indent__s 0;
137-
}
138-
139-
.switcher-options {
140-
&.active {
141-
.switcher-dropdown {
142-
display: block;
94+
.action {
95+
padding: 0 @indent__s @indent__xs;
96+
}
14397
}
14498
}
14599
}
@@ -178,6 +132,50 @@
178132
}
179133
}
180134

135+
// Mobile-specific hiding rules
136+
.nav-sections-item-content {
137+
.lib-clearfix();
138+
box-sizing: border-box;
139+
display: none; // Hide all content by default on mobile
140+
float: right;
141+
margin-left: -100%;
142+
margin-top: 71px;
143+
padding: @indent__m 0;
144+
width: 100%;
145+
146+
&.active {
147+
display: block !important; // Show only active content on mobile
148+
}
149+
}
150+
151+
.nav-sections-item-title {
152+
background: darken(@navigation__background, 5%);
153+
border: solid darken(@navigation__background, 10%);
154+
border-width: 0 0 1px 1px;
155+
box-sizing: border-box;
156+
float: left;
157+
height: 71px;
158+
padding-top: 24px;
159+
text-align: center;
160+
width: 33.33%;
161+
162+
&.active {
163+
background: transparent;
164+
border-bottom: 0;
165+
166+
// Show corresponding content when tab is active on mobile
167+
+ .nav-sections-item-content {
168+
display: block !important;
169+
}
170+
}
171+
172+
.nav-sections-item-switch {
173+
&:hover {
174+
text-decoration: none;
175+
}
176+
}
177+
}
178+
181179
.nav-before-open {
182180
height: 100%;
183181
overflow-x: hidden;
@@ -232,44 +230,6 @@
232230
z-index: 1;
233231
}
234232

235-
.nav-sections-item-title {
236-
background: darken(@navigation__background, 5%);
237-
border: solid darken(@navigation__background, 10%);
238-
border-width: 0 0 1px 1px;
239-
box-sizing: border-box;
240-
float: left;
241-
height: 71px;
242-
padding-top: 24px;
243-
text-align: center;
244-
width: 33.33%;
245-
246-
&.active {
247-
background: transparent;
248-
border-bottom: 0;
249-
}
250-
251-
.nav-sections-item-switch {
252-
&:hover {
253-
text-decoration: none;
254-
}
255-
}
256-
}
257-
258-
.nav-sections-item-content {
259-
.lib-clearfix();
260-
box-sizing: border-box;
261-
float: right;
262-
margin-left: -100%;
263-
margin-top: 71px;
264-
width: 100%;
265-
266-
&.active {
267-
display: block;
268-
}
269-
270-
padding: @indent__m 0;
271-
}
272-
273233
.lib-main-navigation();
274234
}
275235

@@ -292,13 +252,15 @@
292252
display: none;
293253
}
294254

295-
.nav-sections-item-content > * {
296-
display: none;
297-
}
298-
299255
.nav-sections-item-content {
256+
display: block !important; // Always visible on desktop
257+
258+
> * {
259+
display: none;
260+
}
261+
300262
> .navigation {
301-
display: block;
263+
display: block !important; // Ensure navigation is visible on desktop
302264
}
303265
}
304266

0 commit comments

Comments
 (0)