Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

query/focusable should be able to provide only-tabbable elements as well #100

Closed
rodneyrehm opened this issue Jan 16, 2016 · 1 comment
Closed

Comments

@rodneyrehm
Copy link
Member

The following methods ignore elements that are keyboard-focusable but not script-focusable. While this is the expected use case, considering these methods are for scripting, there is currently no way to identify all tabbable elements, e.g. to visually mark them as such.

To allow both uses a new option includeOnlyTabbable: true should be added to the following modules:

  • query/first-tabbable
  • query/focusable
  • query/tabbable
  • query/tabsequence

The effect of this option should be to disengage the isOnlyTabbable() constraint in is/focusable. As all elements passing is/only-tabbable must already pass is/focus-relevant, no further change should be necessary.

In #80 the cores of is/focus-relevant and is/tabbable were refactored to allow specifying options, while maintaining the function signatures - the same should be done to is/focusable.

@rodneyrehm
Copy link
Member Author

The initial assumption regarding anything that is considered is/only-focusable is also considered is/focus-relevant is invalid as query/focusable.all considers both.

Missing from is/focus-relevant in Firefox:

[
  "label[tabindex=0]",
  "svg a[xlink|href]",
  "svg[tabindex=-1] a[xlink|href]",
  "svg[focusable=false] a[xlink|href]",
  "svg a[xlink|href][tabindex=0]",
  "svg a[xlink|href][tabindex=1]",
  "svg a[focusable=false]",
  "svg a[xlink|href][tabindex=-1]",
  "svg{tiny} a[focusable=false]",
  "svg{tiny} a[tabindex=-1]",
  "svg{tiny}[focusable=false] a"
]

Missing from is/focus-relevant in Internet Explorer:

[
  "svg",
  "svg a[xlink|href]",
  "svg rect[focusable=true]",
  "svg[tabindex=-1]",
  "svg[tabindex=-1] a[xlink|href]",
  "svg[focusable=false] a[xlink|href]",
  "svg:has(a[tabindex=0])",
  "svg a[xlink|href][tabindex=0]",
  "svg a[xlink|href][tabindex=1]",
  "svg{viewbox}",
  "svg rect[focusable=true]{viewbox}",
  "svg:has(a[tabindex=-1])",
  "svg a[xlink|href][tabindex=-1]",
  "svg{tiny}",
  "svg{tiny} rect[focusable=true]",
  "svg{tiny} a[tabindex=-1]",
  "svg{tiny} rect[focusable=true][tabindex=-1]",
  "svg{tiny}[focusable=false] a"
]

Chrome does not suffer from the is/only-tabbable workaround

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant