w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 346 forks source link

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

Open Fanni-Portier opened 5 months ago

Fanni-Portier commented 5 months ago

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

css-meeting-bot commented 5 months ago

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/w3c/aria-practices/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 commented 4 months ago

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/w3c/aria-practices/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 commented 4 months ago

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.