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

SyntaxError: '[inert] *):not([tabindex^="-"]):not(:disabled' is not a valid selector #124

Open
sebnitu opened this issue Aug 25, 2024 · 0 comments

Comments

@sebnitu
Copy link

sebnitu commented Aug 25, 2024

Hello there! Firstly thank you for the work you do on this project!

I'm currently using a package called focusable-selectors which provides an array of selectors for grabbing all focusable HTML elements. I was previously locked to using nwsapi v2.2.2 because I was getting a "not valid selector" syntax error but recently updated to the most recent version used by jsdom nswapi v2.2.12 and am now getting this syntax error:

SyntaxError: '[inert] *):not([tabindex^="-"]):not(:disabled' is not a valid selector
  emit node_modules/nwsapi/src/nwsapi.js:575:17
  Object._matches [as match] node_modules/nwsapi/src/nwsapi.js:1417:9
  Array.Resolver node_modules/nwsapi/src/nwsapi.js:777:17
  collect node_modules/nwsapi/src/nwsapi.js:1573:21
  Object._querySelectorAll [as select] node_modules/nwsapi/src/nwsapi.js:1528:36
  HTMLDivElementImpl.querySelectorAll node_modules/jsdom/lib/jsdom/living/nodes/ParentNode-impl.js:78:26
  HTMLDivElement.querySelectorAll node_modules/jsdom/lib/jsdom/living/generated/Element.js:1119:58

Here's a discussion about the issue here for some more context: KittyGiraudel/focusable-selectors#17

Essentially the problem was resolved by removing a complex selector from specifically three array items (note: I removed the selectors that work as expected):

const notInert = ':not([inert]):not([inert] *)'
const notNegTabIndex = ':not([tabindex^="-"])'
const notDisabled = ':not(:disabled)'

export default [
  `button${notInert}${notNegTabIndex}${notDisabled}`,
  `[contenteditable]${notInert}${notNegTabIndex}`,
  `[tabindex]${notInert}${notNegTabIndex}`,
]

Source

The interesting thing is that in the array, there are many selectors that use the ${notInert}${notNegTabIndex}${notDisabled} chained selectors and do not produce a syntax error, only the button, [contenteditable] and [tabindex] do.

Temporary solution

The temporary solution I'm using to resolve my issue was to simply remove this portion in the notInert const: :not([inert] *).

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

No branches or pull requests

1 participant