Dropdown: implementing dropdown plugin

[Garneauma]

Dependent on PR #9531.

• Once PR Build: Bump grunt-contrib-uglify to 5.2.1 to support new JS features #9531 is merged, remove package.json and package-lock.json from this commit.

Changes related to WET-274 - Stabilize add to calendar plugin.

[polmih]

Tested on local environment, working as expected on Chrome, Firefox, Edge, for all 3 types of devices (cell, tablet, desktop).
Minor change requests related to translation and code examples

[duboisp]

Here a partial review, I only reviewed the design pattern for now.
The interaction pattern, once enhanced, seem to works as expected.

• Regroup the bootstrap CSS with this plugin CSS

• Is the dropdown pattern is limited at the following?

<div class="wb-dropdown">
  <button></button>
  <ul>
      <li></li>
   </ul>
</div>

• Where: .wb-dropdown is the component scope

• The component only have 2 allowed children in this sequence:

  1. <button>
  2. <ul>

• The menu item is restricted (by the design pattern) to be either anchor or button

• Can we have dropdown inside dropdown or is that pattern not supported yet? If so, let add a note or an example about that.

• Can you adjust the focus visible style for a conformity to Focus Appearance (Level AA)

• Enhance the pattern with JS instead of relying on the author. See the inline notes.

• The various "color" is attached to convey a state, our working example and section title need to be adjusted to convey the same intention. The working example would need to be updated and same thing for the button name to avoid a failure to SC 1.4.1 Use of Color

• Perform a second review on the design pattern, review the CSS and review the JS

[Garneauma]

Fixed all issues mentioned in comments.

Can you adjust the focus visible style for a conformity to Focus Appearance (Level AA)

I am not sure what you mean. There already is a border around the item on keyboard focus. I don't know what else should be added.

[duboisp]

Pre-approved upon review + testing

[duboisp]

Great work,

Here another partial review, see my observation bellow. I am going to complete my review+testing this afternoon.

Observations:

• The dropdown button is still displayed in basic HTML mode and it is not operable. Suggest to hide it in basic mode.
• Add a little JS action for the demo that use buttons
• Mouse hover contrast is barely visible on the inner interactive element of the dropdown. Especially when compared an anchor or a button outside the dropdown pattern
• The link and the button rendering are exactly the same in the drop down. Can we render them differently? A link bring you to somewhere and a button do an action on the current page.
• When clicking the button, there is no style when clicked like a normal button.
• Is the items in a drop down is always a menu? Overriding the role on anchor and button can be problematic here. Let's discuss.
• Missing an aria-hidden on the caret icon.

[duboisp]

Can we hide the button in disable mode?

[duboisp]

As discussed, we should keep the text inside the button into the page when viewed in Basic HTML mode.

Like transforming the button into a paragraph.

[duboisp]

Just a few small change and a note to not forget to apply the same content change to the French version.

This complete my review and testing until all the requested change is addressed.

[duboisp]

As discussed, we should keep the text inside the button into the page when viewed in Basic HTML mode.

Like transforming the button into a paragraph.

[duboisp]

Pre-approve upon final review and testing.

[duboisp]

Tested and the following todo:

• Transform the dropdown button into paragraph in basic HTML mode
• Apply the 2 little content propose change

Other than that, it should be good to go upon a subsequent local testing and code review of the additional changes.

[duboisp]

Is it going to be a provisional feature?

Suggested change

	<div class="alert alert-warning">
	<h2>Unstable feature</h2>
	<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
	<p><small><a href="../provisional-en.html">Check other provisional features available.</a></small></p>
	</div>

[duboisp]

Is it going to be a provisional feature?

Suggested change

	<div lang="en" class="alert alert-warning">
	<h2>Unstable feature</h2>
	<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
	<p><small><a href="../provisional-fr.html">Check other provisional features available.</a></small></p>
	</div>