Skip to content

Recognize plaintext-only and case-insensitive editable states - #2223

Open
feritcemkahraman wants to merge 1 commit into
focus-trap:masterfrom
feritcemkahraman:fix-plaintext-contenteditable
Open

feritcemkahraman wants to merge 1 commit into
focus-trap:masterfrom
feritcemkahraman:fix-plaintext-contenteditable

Conversation

@feritcemkahraman

@feritcemkahraman feritcemkahraman commented Oct 10, 2026 •

Copy link
Copy Markdown

Plaintext-only editable regions currently disappear from the natural tab order returned by tabbable(). Uppercase valid contenteditable values have the same issue: Chromium focuses these nodes natively, but the attribute fallback classifies them as non-editable and returns tabindex -1.

Recognize plaintext-only and case-insensitive enumerated values in the existing fallback. Explicit negative tabindex remains respected. No new APIs or dependencies.

Validation:

  • Three new unit regressions fail before the source change; all 10 unit tests pass afterwards.
  • Real Chromium reproduction: native focus succeeds on the plaintext-only node; baseline tabbable returns no nodes, fixed returns both plaintext-only and uppercase TRUE nodes.
  • TypeScript, full ESLint, ESM/CJS/UMD compilation, changed-file Prettier and diff checks pass.
  • Added Cypress regression and patch changeset. The full Cypress suite was not run locally (binary not installed).
  • Full format check reports 19 existing unrelated files; those files are unchanged.
PR Checklist

Please leave this checklist in your PR.

  • Source changes maintain stated browser compatibility.
  • Web APIs introduced have deep browser coverage, including Safari (often very late to adopt new APIs).
  • Issue being fixed is referenced.
  • Unit test coverage added/updated.
  • E2E test coverage added/updated.
  • Typings added/updated.
  • Changes do not break SSR:
    • Careful to test typeof document/window !== 'undefined' before using it in code that gets executed on load.
  • README updated (API changes, instructions, etc.).
  • Changes to dependencies explained.
  • Changeset added (run npm run changeset locally to add one, and follow the prompts).
    • EXCEPTION: A Changeset is not required if the change does not affect any of the source files that produce the package bundle. For example, demo changes, tooling changes, test updates, or a new dev-only dependency to run tests more efficiently should not have a Changeset since it will not affect package consumers.

Summary by CodeRabbit

  • Bug Fixes
    • Elements with contenteditable="plaintext-only" or case-insensitive contenteditable values such as "TRUE" are now included in natural tab order. Explicitly setting a tab index of -1 continues to exclude them.

@changeset-bot

changeset-bot Bot commented Oct 10, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: ef22af4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
tabbable Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai

coderabbitai Bot commented Oct 10, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 9e98c46c-14ea-45a8-8102-9d20283b6ae6

📥 Commits

Reviewing files that changed from the base of the PR and between dd677e2 and ef22af4.


📒 Files selected for processing (4)
  • .changeset/plaintext-editable.md
  • src/index.js
  • test/e2e/tabbable.cy.js
  • test/unit/unit.test.js

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.



Walkthrough

The contenteditable check now accepts plaintext-only and case-insensitive true values. Unit and end-to-end tests verify tab-index handling, tab order, and focus behavior.

Changes

Contenteditable value recognition

Layer / File(s) Summary
Recognize editable values and verify tab order
src/index.js, test/unit/unit.test.js, test/e2e/tabbable.cy.js, .changeset/plaintext-editable.md
The check lowercases the contenteditable value and accepts plaintext-only, true, and the empty value. Tests cover tab-index results, inclusion in tab order, and focus behavior. The changeset records the patch.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to ef22a

The change recognizes plaintext-only and case-insensitive editable values while retaining negative-tabindex behavior. No concrete unresolved merge risk remains.

Pre-merge checks | Passed 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: recognizing plaintext-only and case-insensitive editable states.
Description check Passed The description explains the problem, implementation, tests, validation results, limitations, and changeset. It includes the required checklist and covers the relevant template items, although checkli…
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

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

Successfully merging this pull request may close these issues.

1 participant