[A11Y] Fix the markup and/or styles/CSS for Drop Buttons

[quicksketch]

The CSS around Drop Buttons is difficult to work with in non-table scenarios. Problems:

• They use display: block, causing them to fill 100% width of wherever they are.
• You can't float them left or right without breaking them, unless you set a fixed width.
• Some places like Views inadvertently scale down the size of drop buttons.

We should adjust the CSS to be inline-block for better usability in various locations that are not tables (most specifically layouts, where we use them on the content layout form).

[Bojhan]

You might want to take a look at https://www.drupal.org/node/1899236

Its super hairy, so its great if you find a solution for this.

[quicksketch]

Thanks @Bojhan, that's super helpful. I'm not sure we'll go as far as that issue attempted. Rewriting drop buttons as a jQuery plugin with a completely different implementation looks like a lot of work that we don't have the resources to tackle. I was just thinking a CSS update, but perhaps there's some reason why this markup is difficult to achieve the desired result without more effort. Although if we come up with something better that is API compatible, that'd be a good fit for D8 at this point.

[tjdjours]

I have a drop button css I can contribute. I turned the tabs of primary local tasks into a drop button.

No js:

It floats right, no problem, though I wouldn't say it's perfect ltr <> rtl. It's tight (10px) without an additional chunk (50px total) of right side padding. Not sure if that extra would work in the cases described, here.

Float right with +10px right:

Float right with +50px right.

[tjdjours]

Here it is in action. The grey is the hover state of the cog. The blue is the hover state inside the menu after it's clicked/tapped open.

[quicksketch]

Hi @tjdjours, thanks! The tricky part about these drop buttons is that they contain a label for the default action next to the drop-down arrow. Just a dropdown without a default option is a lot easier to accomplish, showing the first item from that dropdown and then the remaining items hidden underneath another click is challenge for this particular issue. Here's a dropbutton in the closed and open state:

[tjdjours]

So, style it so it looks like a stylized <select>?
Guessing it needs to be a <ul><li> list. The <select> would be easier.

An eg of the latter can be seen with some simple jq on this codepen. It targets an id on the <ul>.

Or, this codepen which doesn't smush it into a <select>. (Looks like a duck...). Could be toggleClass'd and maybe no <dd><dt>.

Again, looks like a <select>..

[quicksketch]

The purpose of a dropbutton is to allow users to click the most common option (usually "Edit" or "Configure") and put the remaining options in the drop-down list (e.g. "Delete", "Clone", "Revert", etc.) On the page it's a UL currently, with the first item being the clickable choice without opening the dropdown. Using a <select> has a different behavior, since you have to click once to open it, then select a choice with a second click. With a dropbutton the user can select the first choice without opening the dropdown at all. Each <li> within the dropbutton contains an <a> tag.

[tjdjours]

Oh I see. You want them all as clickable links.

My css only example with the cog allows for that. Just add another <a> to precede the drop.

Rendered quickly via inspection, so rough eg follows.

I swapped out the cog for an arrow.
First image shows the added link hovered. Second image shows the drop arrow hovered. Third image shows the active state on descendent <ul>

[tjdjours]

Here's another example -- http://codepen.io/andyfitz/pen/nvsjw
Not css only, though far simpler to style the surroundings by comparison. There it is, done, too.

Each of the top levels can be replaced with a link. My modification, here: http://jsbin.com/kowoxiqami

  <div class='menu'>
    <span><a href="https://github.com">Enable</a></span>
    <ul>
      <li><a href='#'>Edit</a></li>
      <li><a href='#'>Clone</a></li>
    </ul>
  </div>

Gracefully degrades w/o js, too. Turns into a hover as opposed to click to open. And the link I added above works just as great.

[quicksketch]

Yep, that's a lot closer to what we're looking for! The JS is allowed to move the DOM around as necessary (say to create the prefixed <span>), just as long as we start with a basic <ul> list of links.

Another consideration is the accessibility of dropdown. It looks like in your example, the click handler is bound to a span, but it'll need to be an anchor tag so that it's keyboard accessible. Another challenge is ensuring it works in RTL languages (e.g. Arabic), but we can work that out in the CSS.

Do you think you could take a stab at modifying the /core/misc/dropbutton.js file and css file? Or would you prefer to work in fiddles/codepens to get the proof of concept working? Of course after we get the basic functionality, we'll need to style it.

[tjdjours]

Yeah, I'd rather fuss over it in a jsbin/codepen or whatever as opposed a pile of little style commits.

it'll need to be an anchor tag so that it's keyboard accessible.

Even with the nojs hover to open fall-back?

[quicksketch]

Even with the nojs hover to open fall-back?

Yep, although it's nice to have a non-JS behavior, this is about providing accessibility to users unable to use a mouse or using a screen-reader. From the experience I've had, these users almost always have JS enabled, just like anyone else, because sites generally won't work without JS.

If you use a Mac, I'd suggest turning on the full keyboard access option so that you can use the tab key to select links, then try opening/closing the menu using the keyboard only (tab to get to the right link, then hit return to "click", which should be able to open the menu). Going even further, we need to have screen readers declare that the "open arrow" will show additional options, but usually that's as easy as simply setting a title attribute on the link, but we can build/test that after we just figure out the CSS/JS.

[tjdjours]

Ok. Well, I use linux; tab and enter works as it always has with a keybaord. I just need to remember to test it.

My css only one works that way but would need the styling. Pretty sure the styling would contradict a good part of the drop pattern (with properties of click-anywhere <select>). The target is giant in this eg. http://jsbin.com/kowoxiqami because it is a <span>. The other method, I think, would limit the target just being the arrow. Would that be ok?

Edit: Or, oh - negative relative positioning with a mess of inelegant css push and pull.

[quicksketch]

The other method, I think, would limit the target just being the arrow. Would that be ok?

Yep, that's the current pattern. Honestly our styling needs to increase the size of the arrow (or surrounding padding) so it's more finger-friendly. But that's the general idea. The first item should just be a normal link that is directly clickable, all subsequent items should be accessible after clicking the down arrow.

[tjdjours]

Ok. Here it is.
Drop menu widget revised

UPDATE: Cloned to one w/o mystery expiry meat - http://jsbin.com/fujora/1/

I had a look at the existing drop button. Surprised I didn't initially recognize the pattern from views edit. The markup I did is slightly different. The drop arrow isn't its own second-item <li>.
Instead, it's adjacent and outside the <ul>. It's a simple <a>, here, though I think this markup makes it an adaptable pattern to a larger nested drop menu.

<div class="arbitrarily-sized-container">  
 <div class="dropbutton-menu">
  <a href="https://github.com">Enable</a>
  <a class="dropbutton-default-action" href="#"></a>
   <ul>
     <li>
       <a href='http://jsbin.com'>Edit</a>
     </li>
     <li>
       <a href='http://codepen.io/andyfitz/pen/nvsjw'>Clone</a>
     </li>
   </ul>
 </div>
</div>

Sass/css credits again to the codepen I cited above - http://codepen.io/andyfitz/pen/nvsjw.

[jenlampton]

I took a good stab at cleaning up the CSS for drop-buttons over in #785 so I'm re-purposing this issue to focus on the markup. It looks like @tjdjours has made great progress on that already, so I don't want to derail this issue with various CSS fixes for 1.x. Tagging this issue appropriately.

[quicksketch]

The CSS fixes in #785 help but we still have a number of problems. The issue at #1300 revealed a bug in our dropbuttons:

A huge gap between the region title and the dropbutton. It would be great to revisit this again and see if we could solve this problem.

[klonos]

...filed a separate issue for the huge gap thing as I believe I have a solution for it...