txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Accordion starts closed on mobile by default

Browse Source 
Removed 'open' attribute from accordion <details> elements to ensure sidebars
start collapsed on mobile view, providing a cleaner initial state.

Changes:
- templates/partials/cv/sidebar.html: Removed open attribute
- templates/cv-content.html: Removed open attributes (2 occurrences)
- templates/language-switch.html: Removed open attributes (2 occurrences)
- tests/mjs/43-mobile-accordion-and-modal-test.mjs: Updated test expectations

Test results:
  ✅ Accordion initially closed
  ✅ Content initially hidden
  ✅ Toggle functionality working perfectly
  ✅ Modal centering maintained (0px offset)
This commit is contained in:
juanatsap
2025-11-22 16:31:29 +00:00
parent 2eafb78954
commit fb313d8dc6
4 changed files with 35 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/mjs/43-mobile-accordion-and-modal-test.mjs
+30 -15
View File
@@ -35,9 +35,10 @@ const MOBILE_VIEWPORT = { width: 375, height: 667 }; // iPhone SE size
console.log(` • Summary elements: ${summaryCount}`);
console.log(` • Content elements: ${contentCount}`);
// Check if accordion is initially open
// Check if accordion is initially closed (should be closed on mobile)
const isOpen = await accordionDetails.evaluate(el => el.hasAttribute('open'));
console.log(` • Initially open: ${isOpen ? '✅ YES' : '❌ NO'}`);
console.log(` • Initially closed: ${!isOpen ? '✅ YES' : '❌ NO (should be closed)'}`);
console.log(` • Initially open: ${isOpen ? '❌ YES (should be closed)' : '✅ NO'}`);
// Check if summary is visible on mobile
const summaryDisplay = await accordionSummary.evaluate(el => {
@@ -47,30 +48,44 @@ const MOBILE_VIEWPORT = { width: 375, height: 667 }; // iPhone SE size
console.log(` • Summary display: ${summaryDisplay}`);
console.log(` • Summary visible: ${summaryDisplay !== 'none' ? '✅ YES' : '❌ NO'}`);
// Check if content is initially hidden (since accordion starts closed)
const initialContentHidden = await accordionContent.evaluate(el => {
const style = window.getComputedStyle(el);
return style.maxHeight === '0px' || style.opacity === '0';
});
console.log(` • Content initially hidden: ${initialContentHidden ? '✅ YES' : '❌ NO'}`);
// Test accordion toggle
if (detailsCount > 0) {
console.log('\n🖱️ Testing Accordion Toggle...');
// Click to close
// Click to OPEN (since it starts closed)
await accordionSummary.click();
await page.waitForTimeout(500);
const isClosedAfterClick = await accordionDetails.evaluate(el => !el.hasAttribute('open'));
console.log(` • Closed after click: ${isClosedAfterClick ? '✅ YES' : '❌ NO'}`);
const isOpenedAfterClick = await accordionDetails.evaluate(el => el.hasAttribute('open'));
console.log(` • Opened after click: ${isOpenedAfterClick ? '✅ YES' : '❌ NO'}`);
// Check if content is hidden
const contentHidden = await accordionContent.evaluate(el => {
// Check if content is now visible
const contentVisible = await accordionContent.evaluate(el => {
const style = window.getComputedStyle(el);
return style.opacity === '1';
});
console.log(` • Content visible: ${contentVisible ? '✅ YES' : '❌ NO'}`);
// Click to close again
await accordionSummary.click();
await page.waitForTimeout(500);
const isClosedAgain = await accordionDetails.evaluate(el => !el.hasAttribute('open'));
console.log(` • Closed after second click: ${isClosedAgain ? '✅ YES' : '❌ NO'}`);
// Verify content is hidden again
const contentHiddenAgain = await accordionContent.evaluate(el => {
const style = window.getComputedStyle(el);
return style.maxHeight === '0px' || style.opacity === '0';
});
console.log(` • Content hidden: ${contentHidden ? '✅ YES' : '❌ NO'}`);
// Click to reopen
await accordionSummary.click();
await page.waitForTimeout(500);
const isReopenedAfterClick = await accordionDetails.evaluate(el => el.hasAttribute('open'));
console.log(` • Reopened after click: ${isReopenedAfterClick ? '✅ YES' : '❌ NO'}`);
console.log(` • Content hidden again: ${contentHiddenAgain ? '✅ YES' : '❌ NO'}`);
}
// ===== TEST 2: MODAL CENTERING =====