Problem/Motivation

The Crisis banner shows a "Close this banner" link when active on the top of the page. This is not actually a real link but acts as a button.
This should either be a element or needs to have the right aria-attribute to give the element te correct role.

Proposed resolution

Add the role="button" attribute to the tag, so the correct role is defined, without breaking functionality and styling.

Comments

TVoesenek created an issue. See original summary.

tvoesenek’s picture

Status: Active » Needs review
StatusFileSize
new577 bytes

This patch adds the role="button" attribute to the "Close this banner"--tag.

dennis cohn’s picture

It's better to use the semantic <button> element instead of a link acting like a button.
Otherwise you will need to make the element focusable and have to define event handlers for click and keydown events (Enter and Space keys for example..

If you can't change it for styling issues, add a tabindex="0" to the element.

bskibinski’s picture

This is indeed to prevent broken styling, a native button element would be better, but would require manual styling for all the sites.

It's still an <a> tag, so `focus` and `enter` keys should still work (just tested it, and those do work).
mouseclick events are already handled by the javascript.
You are right about capturing the spacebar key though.

bskibinski’s picture

Tried to remove the unnecessary href attribute from the link, but drupal converts it into a span, which would also break styling on a lot of sites.

Added tabindex 0 just to be sure when someone wants to fix it in another way, doesn't hurt it for now.

Changed the title attribuut to an aria-label for better pronunciation by screenreaders.

And altered the javascript to also capture the spacebar (and also enter/click). (might not be the best/prettiest JS, but it works).

joshahubbers’s picture

Script works.

joshahubbers’s picture

Status: Needs review » Reviewed & tested by the community
joshahubbers’s picture

Status: Reviewed & tested by the community » Fixed

  • bskibinski authored 4cfb456 on 7.x-1.x
    Issue #3189795 by TVoesenek, bskibinski, JoshaHubbers, Dennis Cohn: The...

Status: Fixed » Closed (fixed)

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