Fix scrolling and accessibility issues in Bloblang playgrounds by JakeSCahill · Pull Request #366 · redpanda-data/docs-ui

JakeSCahill · 2026-02-16T12:44:23Z

Summary

When testing the Bloblang playgrounds with large data sets (50+ JSON items, long mappings), several issues became apparent:

Text was being cut off horizontally - Long lines in the Mapping editor were truncated without word wrap
Scrollbars were invisible - macOS overlay scrollbars combined with conflicting Ace editor options meant users couldn't see or use scrollbars
Accessibility gaps - Missing focus trap, ARIA attributes, and keyboard hints in the mini playground

What's Fixed

Full Playground (`bloblang-playground.hbs`, `bloblang-playground.css`)

Added wrap: true to Ace editors for word wrapping
Removed maxLines: 50 which conflicted with CSS height control
Added explicit scrollbar styling (12px width) for visibility
Changed overflow: hidden to overflow: visible on parent containers so scrollbars aren't clipped

Mini Playground (`16-bloblang-interactive.js`, `bloblang-interactive.css`)

Fixed editor heights with CSS max-height instead of maxLines
Added focus trap to keep keyboard navigation inside the modal
Added role="dialog", aria-modal, and aria-live attributes for screen readers
Added keyboard shortcut hint showing Ctrl+Enter to run

Touch Device Improvements

Skip tooltips on Try It, Copy, and Ask AI buttons on touch devices (avoids annoying long-press popups)

Testing

Verified scrolling works with 500+ lines in Input and Output editors
Tested mini playground on syntax test page
All 19 automated tests pass
Manual testing on desktop browsers

coderabbitai · 2026-02-16T12:44:37Z

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR enhances the Bloblang interactive playground with CSS layout refinements, accessibility improvements, and JavaScript refactoring. Changes span three CSS files with editor container sizing, scrollbar styling, dark mode support, and mobile responsiveness; significant JavaScript refactoring in parser enhancements (# Out:, # Output:, # Input: directives), tooltip system refactoring with touch device handling, and accessibility features (ARIA attributes, focus trapping); an extended Ace editor initialization API accepting an options object; and corresponding template updates. Documentation is added to CLAUDE.md.

Sequence Diagram

sequenceDiagram
    actor User
    participant UI as UI/DOM
    participant JS as JavaScript Handler
    participant Ace as Ace Editor
    participant Tooltip as Tooltip System
    participant A11y as Accessibility Layer

    User->>UI: Click "Try It" / Open Playground
    UI->>JS: Trigger mini-playground initialization
    JS->>A11y: Set up focus trap
    JS->>A11y: Apply ARIA attributes (roles, labels, live regions)
    JS->>Ace: Initialize with options (minLines: 5, maxLines: null, wrap: true)
    Ace->>Ace: Configure CSS-driven height constraints
    Ace-->>JS: Editor ready
    JS->>Tooltip: Initialize tooltips with touch detection
    Tooltip->>Tooltip: Compute isTouch state once
    alt Touch Device
        Tooltip->>Tooltip: Adjust triggers to focus/click
        Tooltip->>A11y: Add aria attributes to tooltips
    else Non-Touch
        Tooltip->>Tooltip: Use hover triggers
    end
    JS->>JS: Parse directives (# Input:, # Output:, # Out:)
    JS->>Ace: Populate editor with content
    Ace->>UI: Render editor with styled scrollbars
    A11y->>UI: Enable keyboard navigation and focus indicators
    User->>UI: Interact (type, run, close)
    JS->>A11y: Update ARIA live regions (status messages)
    A11y->>User: Announce state changes

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Fix Bloblang playground editor alignment #362 — Modifies bloblang-playground.css and bloblang-playground.hbs for editor sizing and scrollbar alignment
Add connector logos and Bloblang interactive features #359 — Implements foundational Bloblang interactive playground functionality with similar Ace editor and parser patterns
Add Connect Tools section to TOC on Redpanda Connect pages #363 — Adds preload-on-hover behavior in src/js/16-bloblang-interactive.js for the "Try It" playground feature

Suggested reviewers

paulohtb6
eblairmckee
micheleRP

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main changes: fixing scrolling and accessibility issues in the Bloblang playgrounds, which aligns with all modifications across CSS, JavaScript, and template files.
Docstring Coverage	✅ Passed	Docstring coverage is 85.71% which is sufficient. The required threshold is 80.00%.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into `main`
Description check	✅ Passed	The pull request description clearly relates to the changeset, detailing fixes for scrolling and accessibility issues in Bloblang playgrounds with specific changes to CSS, JavaScript, and templates.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/bloblang-playground-scroll-ux

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 and usage tips.}

netlify · 2026-02-16T12:44:52Z

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	`27d4115`
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/699324edcfbe8900077aba82
😎 Deploy Preview	https://deploy-preview-366--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 34 (🟢 up 6 from production) Accessibility: 93 (no change from production) Best Practices: 100 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/js/16-bloblang-interactive.js (1)
763-774: ⚠️ Potential issue | 🟡 Minor

Avoid nested dialog roles on overlay.
Both the overlay and the inner container declare role="dialog"/aria-modal, which can confuse screen readers. Keep the dialog semantics on the inner container only.
🔧 Suggested fix
 const overlay = document.createElement('div');
 overlay.className = 'bloblang-playground-overlay';
-overlay.setAttribute('role', 'dialog');
-overlay.setAttribute('aria-modal', 'true');
-overlay.setAttribute('aria-labelledby', 'playground-title');

The editors were cutting off content and hiding scrollbars when dealing with large data. This fixes both the full playground and mini playground. Changes: - Enable word wrap in Ace editors to prevent horizontal text cutoff - Remove maxLines option that conflicted with CSS max-height - Fix overflow:hidden on parent containers that clipped scrollbars - Add explicit scrollbar styling for macOS overlay scrollbar visibility - Add focus trap and ARIA attributes to mini playground modal - Add keyboard shortcut hint (Ctrl+Enter to run) - Skip tooltips on touch devices for Try It, Copy, and Ask AI buttons Also updated CLAUDE.md with notes on these features for future work.

JakeSCahill requested a review from a team February 16, 2026 12:47

coderabbitai bot reviewed Feb 16, 2026

View reviewed changes

JakeSCahill force-pushed the fix/bloblang-playground-scroll-ux branch from a8c0475 to b01f8a7 Compare February 16, 2026 13:36

JakeSCahill force-pushed the fix/bloblang-playground-scroll-ux branch from b01f8a7 to 27d4115 Compare February 16, 2026 14:08

JakeSCahill requested review from Feediver1 and paulohtb6 and removed request for paulohtb6 February 18, 2026 13:44

Feediver1 approved these changes Feb 19, 2026

View reviewed changes

Feediver1 merged commit 78fcaeb into main Feb 19, 2026
7 checks passed

Feediver1 deleted the fix/bloblang-playground-scroll-ux branch February 19, 2026 14:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix scrolling and accessibility issues in Bloblang playgrounds#366

Fix scrolling and accessibility issues in Bloblang playgrounds#366
Feediver1 merged 1 commit intomainfrom
fix/bloblang-playground-scroll-ux

JakeSCahill commented Feb 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Feb 16, 2026 •

edited

Loading

Review skipped

Walkthrough

Sequence Diagram

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

netlify bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

JakeSCahill commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What's Fixed

Full Playground (bloblang-playground.hbs, bloblang-playground.css)

Mini Playground (16-bloblang-interactive.js, bloblang-interactive.css)

Touch Device Improvements

Testing

Uh oh!

coderabbitai bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Sequence Diagram

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

netlify bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for docs-ui ready!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

JakeSCahill commented Feb 16, 2026 •

edited

Loading

Full Playground (`bloblang-playground.hbs`, `bloblang-playground.css`)

Mini Playground (`16-bloblang-interactive.js`, `bloblang-interactive.css`)

coderabbitai bot commented Feb 16, 2026 •

edited

Loading

netlify bot commented Feb 16, 2026 •

edited

Loading