search

PolymerElements / iron-menu-behavior

Accessible menu behavior
18 stars 28 forks source link

_focusNext should skip non-visible elements as well as disabled ones #72

Closed mhahmadi closed 8 years ago

mhahmadi commented 8 years ago

Description

When paper-listbox/paper-menu receives focus, it attempts to give focus to child elements that may not be visible.

Expected outcome

Non-visible elements are not focusable and should be skipped.

Actual outcome

Non-visible child won't get focus and the focus outline is seen around the paper-listbox/paper-menu.

Live Demo

https://jsfiddle.net/dmtrp0hL/

mhahmadi commented 8 years ago

Some possible fixes are:

  1. Better heuristics for detecting whether somethings is focusable (e.g., checking for item.hasAttribute('hidden') or use window.getComputedStyle(el).display == 'none'?)
  2. Actually trying to focus it and see whether it works.
  3. Providing a selector in the API that can be used with element.matches() to filter out unfocusable elements.

@notwaldorf

notwaldorf commented 8 years ago

I think @valdrinkoshi tried to do something similar for overlays, maybe it's worth doing here as well? https://github.com/PolymerElements/iron-overlay-behavior/pull/200/files#diff-85329e739caff16e918d7795425ad390R134

notwaldorf commented 8 years ago

Actually, maybe calling focus() and seeing if that's the activeElement is better.

/cc @bicknellr who owns this