[CRISP-683] Add `<sp-menu />` #96

Westbrook · 2019-08-01T22:45:28Z

Blocks

#95

Description

Add support for the Menu pattern from Spectrum CSS: http://opensource.adobe.com/spectrum-css/2.13.0/docs/#menu

Related Issue

Motivation and Context

Let's support more of the Spectrum CSS standards!

How Has This Been Tested?

I've added tests for all of the individual menu parts.

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

andrewhatran · 2019-08-02T00:20:12Z

Great start! Looks really good so far.

Thinking we can get this one merged in first and modify dropdown to leverage it.

I noticed that clicking on disabled MenuItems will give it focus styling (The blue border on the left) Is this expected?

test/menu.spec.ts

andrewhatran · 2019-08-14T17:25:42Z

src/menu-item/menu-item.ts

+    public selected = false;
+
+    @property({ type: Number, reflect: true })
+    public tabIndex = -1;


I didn't know about this about this accessibility best practice (tabindex should be < 0). Learned something new!

I was wondering what the drawbacks were for setting the default to 0 instead of -1.
In the -1 case, the consumer would have to explicitly set the tabIndex attribute to 0 for it to be tabbable.

This is something that applies specifically to an element that will be delivered with the role="menuitem" attribute. In that only one of the child items the role="menu" parent CAN have tabindex="0" at a time, making them all tabindex="-1" by default and then allowing the parent element to manage which gets tabindex="0" seems like the best approach here. I'm open to thoughts on a cleaner way to manage that.

Separately, this might play into the conversation we got into just a little bit last week or so around what should be a "package" and what should be part of one. Likely the sp-menu-item/devider/group should all be "child" elements of the "menu" package to make that a little more clear. I'd prefer to address that in #116, but could be convinced to address this here if it helps clarify the above.

Extended info on -1/0 as a value:
When an element have tabindex="-1" what that means is that the element can be programmatically focused, but can't focus the element via keyboard input. This means that we can control for UIs (like menus) that might have a lot of entries can be given a single entry point, and then expose the rest of the list via opt-in (arrow keyss as opposed to tab) as is outlined in https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html.

Ahh okay, that makes sense. I wasn't aware that tabindex="-1" had that behavior. Your implementation is crystal clear, I was just unfamiliar with the role="menu-item" attribute.

Focusing through the menu items with the arrow-keys as opposed to tabs feels great!
Looks like we could add that arrow-key interface to our tab-list sometime in future as well:
https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html

andrewhatran · 2019-08-14T20:44:57Z

Looks and feels great! The only thing left is documentation and it's good to go for me 👍

Westbrook · 2019-08-14T21:02:42Z

Thanks @andrewhatran, adding the docs is on the list!

I also want to make sure I'm properly covered with tests, so if you have a minute to review: #117 it would be a big help. Thanks!

…rols. Aria coverage.

Westbrook · 2019-08-16T21:17:21Z

documentation/components/menu.md

+</sp-popover>
+```
+
+## Accessibility


Let me know if I can be more clear here.

Westbrook · 2019-08-16T21:17:38Z

scripts/firefox.sh

@@ -53,7 +53,7 @@ if [ -f /proc/version ]; then
 fi

 # launch firefox and grab the PID
-"$FIREFOX_BIN" -profile $PROFILE_PATH -no-remote $1 &
+"$FIREFOX_BIN" -profile $PROFILE_PATH -no-remote -headless $1 &


Headless Firefox avoids issues where it doesn't allow you to capture focus.

Westbrook · 2019-08-16T21:32:36Z

test/banner.spec.ts

@@ -12,8 +12,7 @@ import '../lib/banner';
 import { Banner } from '../lib/banner';
 import { fixture } from '@open-wc/testing';
 import { html } from 'lit-html';
-import { chai } from '@bundled-es-modules/chai';
-const expect = chai.expect;
+import { expect } from '@bundled-es-modules/chai';


Messed up the import syntax previously, this is simpler.

msdewey

Looks great! Thanks for writing such neat and thorough unit tests. Documentation and storybooks looked good, just have some nit-picky questions/comments

msdewey · 2019-08-19T20:16:50Z

src/menu-group/menu-group.ts

+
+import menuGroupStyles from './menu-group.css';
+
+let instances = 0;


What do you think about making this a private static property of MenuGroup? just for the sake of keeping the variable contained by the class its exclusively being used by.

That sounds like an awesome alternative, but I'm not sure what that would look like. Could you share an example?

sure! something like this:

private static instanceCount = 0; constructor() { super(); MenuGroup.instanceCount++; } public render(): TemplateResult { const labelledby = `menu-heading-category-${MenuGroup.instanceCount}`; ...

heres a helpful note about how it works: https://aliolicode.com/2016/05/07/typescript-static-members/

Is this what you were thinking? I had a little trouble with the compiler when trying your version directly, but I can dig deeper if this wasn't what you were hoping for here.

yep this is it! thanks 👍

msdewey · 2019-08-19T20:21:28Z

src/menu-item/spectrum-menu-item.css

+}
+#button:hover,
+#button:focus,
+#button.is-open {


spectrum web component follows a pattern we rename boolean attributes from is-<attribute> to just<attribute> via spectrum-config.js. could you do that for is-open?

Good to know. This specific instance is for functionality that isn't covered yet: https://opensource.adobe.com/spectrum-css/2.13.0/docs/#menu-nested Is it OK if I make an issue instead of addressing this right now?

wfm! thanks 👍

msdewey · 2019-08-19T20:23:38Z

src/menu/menu.ts

+ * @element sp-menu
+ *
+ */
+export class Menu extends LitElement {


out of curiosity, would there be any benefit for Menu to extend Focusable? I'm not sure if that would save lines for any of the focus logic but it might be worth considering if you haven't already!

I'll look at this again, for sure. To support that, do you see functionality beyond public focus(): that is duplicated here?

Right now its focus() and potentially the keydown and focusin event handling, however if you think the behaviors are different enough I wouldnt worry about this. i was also wondering if it might be helpful to have the blur() method as well though for de-selecting.

I think the functionality in sp-menu is pretty different than than in Focusable. However, now that you've got me looking at it more, I'm unsure whether sp-menu should have more of the functionality in Focusable or not... I've created #147 to track and think it would be great to have the team look at it together at some point in the future. Accessibility is hard, and sometime it takes a village.

msdewey

lgtm, thanks 😃

Westbrook mentioned this pull request Aug 2, 2019

[CRISP-683] Add <sp-dropdown /> #95

Merged

10 tasks

Westbrook force-pushed the westbrook/CRISP-1181/menu branch 2 times, most recently from d51f9c3 to decbca0 Compare August 9, 2019 17:04

Westbrook commented Aug 13, 2019

View reviewed changes

test/menu.spec.ts Outdated Show resolved Hide resolved

andrewhatran reviewed Aug 14, 2019

View reviewed changes

Westbrook Johnson and others added 11 commits August 16, 2019 15:05

WIP: First pass through the menu UI

ae20f33

Move divider to own element. Expand style coverage. Add keyboard cont…

46c795a

…rols. Aria coverage.

Remove logging

290710e

Menu tests

31c4b03

Add tests speculatively.

2278582

Comment about local fail conditions.

59a630c

Use headless instead of silly comment.

7c8d61e

Take my own advice

14aa107

Start documentation

d3f9606

Add menu documentation, styling and basic testing

b3a0d12

Add focusable styles.

5e03fae

Westbrook force-pushed the westbrook/CRISP-1181/menu branch from 7f76ff1 to 5e03fae Compare August 16, 2019 19:06

Westbrook added 4 commits August 16, 2019 15:33

Cover menu-item[selcted]. Udpate import

7e472a1

Expand coverage. Commit test artifacts

0ec5006

Test menu-group

40f5d40

Synch of the coverage %s

3fa2356

Westbrook marked this pull request as ready for review August 16, 2019 21:15

Westbrook added 3 commits August 16, 2019 17:16

clean up logging

d939608

Remove superfluous changes.

895e1db

Correct comments

351f215

Westbrook commented Aug 16, 2019

View reviewed changes

Westbrook requested a review from andrewhatran August 16, 2019 21:34

Westbrook assigned msdewey Aug 16, 2019

Westbrook mentioned this pull request Aug 19, 2019

Reimplement overlays to allow arbitrary nesting #140

Merged

10 tasks

msdewey reviewed Aug 19, 2019

View reviewed changes

Use private static for counts.

6dcbcfc

msdewey approved these changes Aug 19, 2019

View reviewed changes

Westbrook merged commit 619d07e into master Aug 19, 2019

Westbrook deleted the westbrook/CRISP-1181/menu branch August 19, 2019 21:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[CRISP-683] Add `<sp-menu />` #96

[CRISP-683] Add `<sp-menu />` #96

Westbrook commented Aug 1, 2019 •

edited

Loading

andrewhatran commented Aug 2, 2019

andrewhatran Aug 14, 2019

Westbrook Aug 14, 2019

Westbrook Aug 14, 2019

andrewhatran Aug 14, 2019

andrewhatran commented Aug 14, 2019

Westbrook commented Aug 14, 2019

Westbrook Aug 16, 2019

Westbrook Aug 16, 2019

Westbrook Aug 16, 2019

msdewey left a comment

msdewey Aug 19, 2019

Westbrook Aug 19, 2019

msdewey Aug 19, 2019

msdewey Aug 19, 2019

Westbrook Aug 19, 2019

msdewey Aug 19, 2019

msdewey Aug 19, 2019

Westbrook Aug 19, 2019

Westbrook Aug 19, 2019

msdewey Aug 19, 2019

msdewey Aug 19, 2019

Westbrook Aug 19, 2019

msdewey Aug 19, 2019

Westbrook Aug 19, 2019

msdewey left a comment


		import menuGroupStyles from './menu-group.css';

		let instances = 0;

[CRISP-683] Add <sp-menu /> #96

[CRISP-683] Add <sp-menu /> #96

Conversation

Westbrook commented Aug 1, 2019 • edited Loading

Blocks

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

andrewhatran commented Aug 2, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

andrewhatran commented Aug 14, 2019

Westbrook commented Aug 14, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

msdewey left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

msdewey left a comment

Choose a reason for hiding this comment

[CRISP-683] Add `<sp-menu />` #96

[CRISP-683] Add `<sp-menu />` #96

Westbrook commented Aug 1, 2019 •

edited

Loading