Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Example Disclosure Navigation Menu for more than two nav levels #3045

Open
Fanni-Portier opened this issue Jun 19, 2024 · 3 comments
Open

Example Disclosure Navigation Menu for more than two nav levels #3045

Fanni-Portier opened this issue Jun 19, 2024 · 3 comments
Assignees
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern

Comments

@Fanni-Portier
Copy link

Is there a way to customize Example Disclosure Navigation Menu for more than two navigation levels?

@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Three or more levels in disclosure nav menus.

The full IRC log of that discussion <jugglinmike> Topic: Three or more levels in disclosure nav menus
<jugglinmike> github: https://github.com//issues/3045
<jugglinmike> Matt_King: I think this is a great question
<jugglinmike> Matt_King: I don't feel like this is something we necessarily want to do to the APG example
<jugglinmike> Matt_King: Although I would note that the example does kind of flatten the hierarchy in that navigation
<Jem> https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
<jugglinmike> Matt_King: If we look at the disclosure show/hide navigation menu example
<jugglinmike> Matt_King: We have the "mythical university navigation" which has "about", "admissions", etc.
<jugglinmike> Matt_King: If you expand "About", we have "Overview", "Administration", "FAQs", and "Campus Tours"
<Jem> https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
<jugglinmike> Matt_King: In navigation menu bar, we have two levels
<jugglinmike> Matt_King: Under "FAQs" in the navigation menu bar, it expands to "History", etc
<jugglinmike> Matt_King: We don't have that level shown in the "disclosure"
<jugglinmike> Matt_King: In that way, these examples are not equivalent
<jugglinmike> Matt_King: Should we show what it would be like to do a third level in this navigation in the disclosure version?
<jugglinmike> Matt_King: The person who raised this issue is asking, if we were to do that, how would we do it?
<jugglinmike> Matt_King: From an ARIA standpoint, it's fairly straightforward. That "FAQs" link wouldn't be a link; it would be a disclosure button
<jugglinmike> Matt_King: When you compare these two examples visually, are they different in terms of the way they cover up other content?
<jugglinmike> Matt_King: Do the disclosure ones visually overlay the disclosure content on top of the content that's below it? Or do they move it down?
<jugglinmike> Matt_King: Because menus always pop *over* content, but disclosures generally push content down
<jugglinmike> arigilmore: It appears overlaid on top of the content
<jugglinmike> jugglinmike: We're over time
<jugglinmike> Matt_King: We're not going to wrap up this issue today. We'll keep it on the agenda for next time
<jugglinmike> Zakim, end the meeting

@css-meeting-bot
Copy link
Member

The ARIA Authoring Practices (APG) Task Force just discussed Three or more levels in disclosure nav menus.

The full IRC log of that discussion <jugglinmike> Topic: Three or more levels in disclosure nav menus
<jugglinmike> github: https://github.com//issues/3045
<jugglinmike> Matt_King: Last week, we recognized that there's a difference in content between the "navigation menu bar" and the "disclosure menu bar"
<jugglinmike> Matt_King: The former has three levels, but the latter does not
<jugglinmike> Jem: So the idea was that we should provide a consistent example, like a two-level menu for both patterns
<jugglinmike> Matt_King: Well, the reporter is just asking how it would be done
<jugglinmike> CurtBellew: Doesn't it have more than two levels?
<jugglinmike> Matt_King: If you compare the two... I don't see "history" in the "disclosure menu bar"
<jugglinmike> Matt_King: There is not a page called "Facts" in one, but there is such a page in the other
<jugglinmike> Matt_King: In the disclosure menu bar, I assume that the way it would work is that you would replace the links with a button that expands and shows the ones below it
<jugglinmike> Matt_King: The thing that would be strange from a screen reader user's point of view, at least with a disclosure, they would not expect "campus tours" (for example) to disappear
<jugglinmike> Matt_King: Visually, do you still see the parent when you expand the child?
<jugglinmike> CurtBellew: Yes, it sits next to it
<jugglinmike> Matt_King: Okay, I think we could do the same. That seems like a good thing to demonstrate in this example
<jugglinmike> Matt_King: I don't know why it was originally built any other way. Maybe we should ask Sarah, the original author
<jugglinmike> Matt_King: I think the answer here is to replace the "Facts" link with another disclosure and it would behave he same way as the flyout in the "navigation menu bar" does
<jugglinmike> Jem: If we build another layer of menu, there's going to be another nested UL and LI element with an A link
<jugglinmike> Matt_King: Correct
<jugglinmike> Jem: Seems to be simple
<jugglinmike> Matt_King: It's too bad that we're working on the test plan in ARIA-AT right now. If we update this, we'll have to re-do all the ARIA-AT work.
<jugglinmike> Matt_King: It'd be really interesting to see if we could do this in the other "navigation disclosure" menu, instead
<jugglinmike> Matt_King: Because we have two of them--one that has top-level links, and one that does not have top-level links
<jugglinmike> Matt_King: If we instead update the other one--the one with top-level links--then it would avoid disrupting the ARIA-AT work. That also seems better for APG, since the one with top-level links is the more complicated one
<jugglinmike> Matt_King: This would allow us to preserve the simplicity of the one without top-level links
<jugglinmike> Jem: This would be a good warm-up for Adam, the new contributor who will be joining us soon
<jugglinmike> Matt_King: I'm going to add a link to the new example page that we want to modify

@mcking65
Copy link
Contributor

mcking65 commented Jul 2, 2024

Decision: modify
Example Disclosure Navigation Menu with Top-Level Links | APG | WAI | W3C
to have third-level disclosure buttons and links that mirror the third-level content in
Navigation Menubar Example | APG | WAI | W3C.

@a11ydoer a11ydoer self-assigned this Jul 2, 2024
@mcking65 mcking65 added enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern labels Jul 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Any addition or improvement that doesn't fix a code bug or prose inaccuracy Example Page Related to a page containing an example implementation of a pattern
Projects
None yet
Development

No branches or pull requests

5 participants