bug: Fix Inaccessible Navigation

[lilyndk]

Bug Report

Describe the bug

Issues: 1) Dropdown does not follow common UX pattern with 'Overview' page link, resulting in confusion about what pages 'exist' when the dropdown is open.

2) Submenu links are not accessible from keyboard and missing aria attributes

3) Submenu items are not accessible on mobile

• Tapping on any menu item on mobile to reveal its subitems leads users to the top-level page and doesn’t give them the opportunity to browse or access any secondary pages. The user should be able to tap on top-level menu items without navigating to the page. User should be able to access sub-menu items by tapping instead.

Acceptance Criteria

1) Update nav to include ‘Overview’ page links. If a user clicks on the main link (e.g. About Us), the behaviour should be that the dropdown simply opens upon the click, similar to Nielsen Norman Group:

• Accessibility-wise, this patterns follows W3's suggestion of having the parent function as a toggle.
• This will also fix bug no. 3, as described above under Issues.
• We use Material Design as design system reference, they also have good guidelines on Menu implementation related to accessibility.

2) Ensure that it is possible to open the submenu with the keyboard, e.g. using the arrow down key.

• w3 tutorial:
• another w3 tutorial

[lilyndk]

@dricazenck let us know if you have other suggestions and/or if other codeowners should review this, before the task is assigned. :) Thanks

[khairahscorner]

That was the previous functionality but have a look at this issue: https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/69 The menu functionality was changed to the current version to avoid the "duplication". @lilyndk

[khairahscorner]

Also, if consistency is the main concern, we could create a similar landing page for when "Programmes" is clicked, we'd just need to figure out the content that goes on it.

[lilyndk]

Ah thanks for the info @khairahscorner

My main concern is the UX, i.e. that it's more common to have the dropdown simply open upon the click of the main nav link. Right now, users might think that the 'overview' pages don't exist if they just hover over the menu.

[lilyndk]

But if you know some good sites using the same nav pattern as we have implemented, please share. :)

[WomenCodingCommunity]

istency is the main concern, we could create a similar landing p

I think that is a good idea, we can create programm landing page and should be fine.

[lilyndk]

Great.

Yeah I was also just looking at Google's material design guide, which is the design system we use. They use the proposed behaviour and it seems like this is also better accessibility-wise: https://m3.material.io/components/menus/accessibility. But I'm not an accessibility specialist so I also just asked Cathy to weigh in if she has input :)

[dricazenck]

Let's close this issue and it will be solved as part of #123

[lilyndk]

@dricazenck I'm re-opening this because several related 'nav accessibility' tickets' are being created.

[lilyndk]

Hi @sssoz, can you update the description in this issue to include the notes from the issue you reported in https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/143? And then just close issue #143 and make a note that it's a 'duplicate' of this issue. Thanks

[lilyndk]

Hi @PaulineNemchak, can you update the description in this issue to include the notes from the issue you reported in https://github.com/WomenCodingCommunity/WomenCodingCommunity.github.io/issues/139? And then just close issue #139 and make a note that it's a 'duplicate' of this issue. Thanks

[lilyndk]

It would be good to just fix all the related accessibility navigation issues in this one PR, since we need to change the main nav to include an 'overview page' link for the main landing pages (about us, etc.)

[sssoz]

@lilyndk I unfortunately can’t edit this issue’s description!

[lilyndk]

@sssoz ah ok, I will update the description then to include the bugs you and @PaulineNemchak reported. :)

[lilyndk]

Description has been updated and this task is ready for development.