Skip to content

fix: make the container styleable and give it an accessible name - #55

Open
sidgaikwad wants to merge 1 commit into
unlayer:mainfrom
sidgaikwad:fix/container-style-and-a11y
Open

fix: make the container styleable and give it an accessible name#55
sidgaikwad wants to merge 1 commit into
unlayer:mainfrom
sidgaikwad:fix/container-style-and-a11y

Conversation

@sidgaikwad

Copy link
Copy Markdown

Fixes #43. Three problems in the same two divs.

1. style could not override flex (the actual bug)

<div id={editorId} ref={containerRef} style={{ ...style, flex: 1 }} />

flex: 1 was written after the spread, so it always won — style={{ flex: 'none' }} or { flex: '0 0 600px' } was silently discarded. Moving it before the spread makes it a default the consumer can override, with zero effect on anyone who doesn't set it.

2. The outer wrapper was unreachable

minHeight was the only thing a consumer could influence on the outer div; its flex: 1 and display: flex were fixed. Dropping the component into a plain block container, a grid cell or a fixed-height panel needed an extra wrapper plus !important. New wrapperStyle prop.

3. No accessible name

I checked what the embed actually renders inside the container on the running demo:

{ "tag": "DIV", "cls": "image-editor-root", "role": null, "aria-label": null }

No landmark, no name, no headings — only svg[role=img] icons. So the entire editing surface was anonymous to assistive tech, and our container contributed nothing but an id.

Added role="region" with an ariaLabel prop defaulting to 'Image editor'.

This one is default-on, so flag it if you'd rather it weren't. A labelled region is a landmark and will show up in screen-reader landmark lists for existing consumers. I went default-on because the measurement above shows there is otherwise no accessible name at all, and region is the conservative choice — role="application" would have changed screen-reader interaction mode, which I did not want to impose on a third-party UI.

Verification

  • 2 new tests; 48 total; coverage still 100% statements / branches / functions / lines
  • lint, typecheck, build clean
  • README props table updated for both new props

Conflict note

The README props-table edit will conflict with #54, which adds a scriptUrl row to the same table. Trivial to resolve; happy to rebase whichever lands second.

Three problems with the rendered container, all in the same two divs.

`flex: 1` was written after the style spread, so it always won:
`style={{ flex: 'none' }}` was silently discarded. Move it before the
spread so it is a default the consumer can override.

The outer wrapper was unreachable — `minHeight` was the only thing a
consumer could influence, so dropping the component into a non-flex
layout needed an extra wrapper and !important. Add `wrapperStyle`.

The container had an id and nothing else. The embed renders an unlabelled
`div.image-editor-root` inside with no landmark and no name of its own, so
the entire editing surface was anonymous to assistive tech. Add
`role="region"` with an `ariaLabel` prop defaulting to 'Image editor'.
@vercel

vercel Bot commented Sep 4, 2026

Copy link
Copy Markdown

@sidgaikwad is attempting to deploy a commit to the Unlayer Team on Vercel.

A member of the Team first needs to authorize it.

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.

Container div: style can not override flex: 1, outer wrapper is unreachable, no a11y attributes

1 participant