In addition to the built-in support for accessibility with keyboard navigation, it would also be helpful to have the appropriate ARIA attributes applied and toggled when the menu dropdowns are activated.

  • Menu link (with children): aria-expanded, aria-haspopup
  • Submenu element: aria-expanded, aria-hidden, aria-labeledby

Supporting this also requires changes to the client library in order for the aria attributes to maintain state when the dropdowns are activated/deactivated.

CommentFileSizeAuthor
#9 superfish-2674280-9.patch2.02 KBckng
#6 superfish-add_aria_attributes-2674280-6.patch6.62 KBzipymonkey
#5 superfish-add_aria_attributes-2674280-5.patch6.88 KBzipymonkey
#4 superfish-add_aria_attributes-2674280-4-D7.patch6.65 KBsitiveni
#4 aria.js_.txt1.51 KBsitiveni
#2 superfish_library_add_aria_attributes_for-2674280-2.patch1.47 KBmdeltito
#2 superfish_theme_add_aria_attributes_for-2674280-2.patch1.57 KBmdeltito

Issue fork superfish-2674280

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

    About issue forks

    Comments

    mdeltito created an issue. See original summary.

    mdeltito’s picture

    mdeltito commented
    StatusFileSize
    new superfish_theme_add_aria_attributes_for-2674280-2.patch1.57 KB
    new superfish_library_add_aria_attributes_for-2674280-2.patch1.47 KB

    Attached are two patches, one for the module (theme function) and one for the Drupal Superfish library (1.4.8)

    mdeltito’s picture

    mdeltito commented
    Status: Active » Needs review
    sitiveni’s picture

    sitiveni commented
    StatusFileSize
    new aria.js_.txt1.51 KB
    new superfish-add_aria_attributes-2674280-4-D7.patch6.65 KB

    Hi @mdeltito et al,

    Added JS ARIA as separate library jQuery plugin file (aria.js - remove extension .txt as I wasn't able to upload a JS file) in order to make it configurable (enabled or not) in the superfish block options.

    I also took the adding of the attributes out of the list item theme function and placed it in superfish build theme function as the other attributes are set there too. On top of that I set the role (menu for "ul" and menuitem for "li") as attribute.

    I took guidance from Terril Thompson (http://terrillthompson.com/blog/202) for the ARIA attributes but kept your aria-expanded attribute too.

    I did not consider expanded menus or when no theme is used (setting "use_item_theme" not set); so there is room to enhance. I basically implement for my requirements (bit selfish I know; time is of essence tho).

    Thanks

    zipymonkey’s picture

    zipymonkey commented
    StatusFileSize
    new superfish-add_aria_attributes-2674280-5.patch6.88 KB

    I rerolled this patch to work with most recent dev and superfish 2.0.

    I also created a patch to the Superfish-for-Drupal library. I can make a pull request if the patch works.

    https://github.com/zipymonkey/Superfish-for-Drupal/commit/cb6bb121e596dd...

    zipymonkey’s picture

    zipymonkey commented
    StatusFileSize
    new superfish-add_aria_attributes-2674280-6.patch6.62 KB

    Uploading a new version of the patch which does not contain debug messages.

    schiavone’s picture

    schiavone commented

    @zipymonkey thanks for the patch. Successfully applied it to SuperFish Module 7.x-2.0 using 1.2 library. This needs to be rolled into dev branch!

    stewest’s picture

    stewest
    Location Wellington
    commented
    Status: Needs review » Reviewed & tested by the community
    ckng’s picture

    ckng
    Primary language English
    commented
    Version: 7.x-1.x-dev » 8.x-1.x-dev
    Status: Reviewed & tested by the community » Needs review
    StatusFileSize
    new superfish-2674280-9.patch2.02 KB

    Attached patch for 8.x-1.x version.

    • lobsterr committed 758def11 on 8.x-1.x 
      Issue #2674280 by ckng, lobsterr: Add aria attributes for improved...
    lobsterr’s picture

    lobsterr commented
    Status: Needs review » Fixed

    Thank you for contribution

    • ivnish committed db46ecd0 on 2.0.x authored by lobsterr 
      Issue #2674280 by ckng, lobsterr: Add aria attributes for improved...

    Status: Fixed » Closed (fixed)

    Automatically closed - issue fixed for 2 weeks with no activity.

    lordzik’s picture

    lordzik commented

    Hello,
    i would like to ask if those changes were correctly commited to 8.x branch as grep finds only one row with "aria-expanded" string in module's directory:
    # grep -R aria-expanded *
    templates/superfish-menu-items.html.twig: {{ item.link_menuparent|merge({'#attributes': {'role': 'menuitem', 'aria-haspopup': 'true', 'aria-expanded': 'false'}}) }}

    And aria-expanded is not changing to "true" when menu is expanded - so this seems not to work.

    Best regards