iron-collapse is focusable (by clicking or tabbing into it), which produces a focus outline in browsers

[punzki]

Illustrated by demo: https://elements.polymer-project.org/elements/iron-collapse?view=demo:demo/index.html

Clicking on the content inside core-collapse, or tabbing into it, produces an ugly "focused" outline (on Chrome, a glowing blue outline). In my opinion, this should not be the desired behavior. The element controlling the iron-collapse (e.g., a button) is the one that should be focusable, and the developer is the one that should be responsible for making sure that it is. Making the iron-collapse focusable doesn't achieve anything useful.

The hostAttributes of iron-collapse has tabindex: 0, which is causing this behavior. There's no way to remove the behavior. Even setting tabindex="-1" in the iron-collapse element makes it focusable on click (strange, because it isn't tabbable).

core-collapse in v0.5 does not have this behavior; I'd say this a regression.

P.S. I'd love for this to be my first pull request/contribution to open source on GitHub, if you devs agree with me and would let me. 😃

[andrepl]

@punzki I agree this is kind of annoying, would love to see it fixed. try submitting your PR on the iron-collapse repo instead: https://github.com/polymerelements/iron-collapse/issues

[punzki]

@andrepl - D'oh, of course I should've opened this issue there... will copy it over and try to submit the PR.

[kevinpschaaf]

Closing, as it's been moved to PolymerElements/iron-collapse#10.