Fix BL-16538 Little arrow in Leveled Reader Tool displays after reenable tool on Canvas page

[andrew-polk]

Fixes the stray right-pointing arrowhead (►) that intermittently appears in the top-left of the Leveled/Decodable Reader tool body after re-enabling the tool via "More…" on a Canvas page.

Root cause

The toolbox is mid-migration: a hidden legacy jQuery-UI accordion (#toolbox, display:none) runs alongside the visible React/MUI accordion (ToolboxRoot.tsx). The Leveled/Decodable Reader tool body divs are adopted out of the legacy accordion into React, but still carry the jQuery-UI ui-accordion-header class. jQuery-UI's _createIcons() prepends a span.ui-accordion-header-icon (a ui-icon-triangle-1-e right-triangle sprite, positioned absolute; left:.5em; top:50%) to anything with that class — so it renders as the stray arrowhead. accordion("refresh") on re-enable re-runs _createIcons, which is why it's intermittent after re-enabling a reader tool.

The earlier BL-16501 fix neutralized these divs' header background/border theming but did not hide the prepended icon span. This adds a rule to the same CSS block hiding span.ui-accordion-header-icon on adopted div[data-toolid] bodies.

Change

CSS-only, in the emotion css block wrapping the adopted reader body in ToolboxRoot.tsx.

Ref: https://issues.bloomlibrary.org/youtrack/issue/BL-16538

Devin review

---

This change is 

[greptile-apps]

Greptile Summary

CSS-only fix for the stray right-pointing arrowhead (►) that appeared in the top-left corner of the Leveled/Decodable Reader tool body after re-enabling the tool on a Canvas page. The root cause was jQuery-UI's _createIcons() prepending a span.ui-accordion-header-icon to every element carrying the ui-accordion-header class — including adopted reader-tool body divs that still wear that class from the legacy accordion.

• Adds display: none !important for div[data-toolid] span.ui-accordion-header-icon in the same emotion css block that already neutralizes the stray header background/border theming from BL-16501, keeping the fix co-located and well-commented.
• The selector is precise: it targets only descendant icon spans of adopted body divs identified by data-toolid, consistent with the existing sibling rule's scoping strategy.

Important Files Changed

Filename	Overview
src/BloomBrowserUI/bookEdit/toolbox/ToolboxRoot.tsx	Adds a CSS rule to hide the stray jQuery-UI accordion header icon (span.ui-accordion-header-icon) that jQuery-UI's _createIcons() prepends to adopted reader-tool body div[data-toolid] elements, fixing the intermittent right-pointing arrowhead artifact (BL-16538).

_{Reviews (1): Last reviewed commit: "Fix BL-16538 Little arrow in Leveled Rea..." | Re-trigger Greptile}

[andrew-polk]

[Claude Opus 4.8] Consulted Devin on 2026-07-17 18:40 UTC up to commit a4b9a964fb700b507f2b6be8c53f24069c43ff6c. Review complete: 0 Bugs, 0 Flags — no findings.