Problem/Motivation

same layout visual but different HTML CLASS after some click and scroll

Steps to reproduce

Open Console and try test A & B separately. (Refresh before each tests.)

// test A
window.scrollTo(0, 200);
jQuery('.nav-primary__button').click();
window.scrollTo(0, 0);
console.log(jQuery('.site-header__fixable').attr('class')) // site-header__fixable fixable is-expanded

// test B
window.scrollTo(0, 200);
jQuery('.nav-primary__button').click();
jQuery('.nav-primary__button').click();
window.scrollTo(0, 0);
console.log(jQuery('.site-header__fixable').attr('class')) // site-header__fixable fixable

and aria-expanded also incorrect

Comments

droplet created an issue. See original summary.

droplet’s picture

droplet commented
Issue summary: View changes
droplet’s picture

droplet commented
Parent issue: » #3177296: [META] Make Olivero stable
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Priority: Normal » Minor
Status: Active » Closed (works as designed)
Issue tags: +=

This is intentional. The is-expanded class indicates that the header should be expanded when the header is able to be collapsed (which only happens when the document is scrolled down a bit). We could potentially name the class is-expanded-on-scroll-down, but IMO this is too verbose.

and aria-expanded also incorrect

When the document is scrolled to the top of the page, we apply a visibility:hidden CSS property to the button, which removes it from the accessibility tree.

Maybe a better way would be to disable the button when scrolled up (and then set opacity: 0 or something). However, that could probably be covered in #3177260: [META] Accessibility of Olivero header/menu region

Closing as "works as designed". Re-open if you strongly disagree.