ACCESSIBILITY – Toggle submenu

Hi,

If you switch on Keyboard support in the Accessibility menu, you get the "plus" toggle element next to the MENU-ITEM that has submenu. 

The aria-label "toggle submenu" has been made translatable (as per my discussion here), which is great. The Accessibility audit is also recommending the addition of the name of the menu item into the aria-label, ie. "toggle submenu MENU-ITEM-NAME" – so that the voice-over user knows, which submenu is opening.

Also, the aria-expanded attribute in the submenu <ul> element is not changing to "true" after the submenu is open on hover, it remains "false". For correct behaviour of voice-over It should change to "true" just as the style="display: none" on this element changes to 'block'. 

Please see my screenshot:

I think these modifications would need to be made in the menu.js, but I am not very skilful in JS. 

You have been such a great help with my previous accessibility issue, can you help with this one?

Thank you.

David

Comments

  • Hi,

    I have passed this info to the dev team.

    We will take a closer look at it.


    Best regards

  • Hello,

    The aria-label name attaching is in development right now, but I tried to recreate the problem with the aria-expanded not changing to true but I was not able to, everything works fine.

    Please, tell me if what browser, OS and Be version do you use? Also did you check if its not a plugins conflict related?

    Thanks

  • Hi Pablo,

    Thank you for your reply.

    Regarding "aria-expanded" not changing, I tried to deactivate plugins step by step, but that did not help.

    This is my config (tried in three different browsers):

    MacOS 13.1 (22C65)

    BeTheme 26.6.6

    CHROME 109.0.5414.119

    SAFARI 16.2 (18614.3.7.1.5)

    FIREFOX 104.0.2 (64 bitů)

    Regards,

    David

  • edited January 2023

    Sorry, I did not notice that you wrote about hover, not opening by keypress.

    The accessibility is made to change on keypress only, we did not prepare it for hover action - it is labeled as a keyboard support now.

    We have the hover aria-expanded handling in our To-do list, but I'm not able to tell you when it will be released.

    About the new aria-label, I'll try my best to make it included in next update 😊

    Best regards,

    Muffin Group

  • Thanks so much for your quick reply. That would be awesome.

    Regards,

    David

  • The accessibility aria label is ready to download, it's included in the today's update :)

    Greetings

  • Hi Pablo,

    I appreciate all your help.

    The aria-label includes the MENU ITEM NAME, which is great, however, it has been misplaced on a different HTML element. The new "modified" aria-label with MENU ITEM NAME has been added to the UL element (it has not been there and it should not be there) and the "original" aria-label on the MENU TOGGLE (a href element) has not been modified.

    Please see my screenshot for hopefully more clarity:

    Do you know what I mean?

    Regards,

    David

  • edited February 2023

    Sorry David,

    The script was made to be proper on HB 2.0 and the pre-built headers were using completely different HTML strucutre - I overlooked that.

    So, it's fixed and its in queue to add it to production bundle, I'll send here a message when it will be released to download.

    Greetings

  • Thanks so much.

Sign In or Register to comment.