Skip to content

fix: Check for :modal selector support before using it #33

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.

Sign up for GitHub

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

Merged
smockle merged 1 commit into from
Jan 14, 2026
Merged

fix: Check for :modal selector support before using it #33

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion arianotify-polyfill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ if (!("ariaNotify" in Element.prototype) || !("ariaNotify" in Document.prototype
// If there is a modal element on the page, everything outside of it is implicitly inert.
// This can be checked by seeing if the element is within the modal, if the modal is present.
(this.element.ownerDocument
.querySelector(":modal")
.querySelector(CSS.supports("selector(:modal)") ? ":modal" : "dialog[open]")
Copy link

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fallback selector dialog[open] is not semantically equivalent to :modal. The :modal selector matches only dialogs opened with showModal() (which make outside content inert), while dialog[open] matches any dialog with the open attribute, including non-modal dialogs opened with show() (which don't make outside content inert). This could cause incorrect behavior where non-modal dialogs are incorrectly treated as making content outside them inert. Consider using dialog[open]:modal as a fallback (which requires the browser to parse it but still functions), or check for the modal state differently (e.g., checking for the presence of a ::backdrop pseudo-element or using JavaScript to track modal state).

See below for a potential fix:

      // Element must be connected to the document.
      if (!this.element.isConnected) {
        return false;
      }

      // Elements within inert containers should not be announced.
      if (this.element.closest("[inert]")) {
        return false;
      }

      // If there is a modal element on the page, everything outside of it is implicitly inert.
      // Only apply this logic when the browser supports the :modal selector.
      const doc = this.element.ownerDocument;
      let modal = null;

      if (typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("selector(:modal)")) {
        modal = doc.querySelector(":modal");
      }

      // If there is a modal, only announce elements within it; otherwise, allow announcement.
      return modal ? modal.contains(this.element) : true;

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new feature detection logic and fallback behavior for environments without :modal support lacks test coverage. Consider adding tests that verify correct behavior in environments where CSS.supports('selector(:modal)') returns false, ensuring the fallback selector works appropriately.

Copilot uses AI. Check for mistakes.
?.contains(this.element) ??
true)
);
Expand Down
Loading