Skip to content
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.

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

Render story iframe in external document #128

Merged
merged 2 commits into from
Jul 8, 2024

Conversation

angelikatyborska
Copy link
Contributor

This PR renders story iframes in external documents (src="/file_path.html") instead of inlined documents (srcdoc="<html>..."). This is necessary for me to be able to use the WAVE browser extension to do accessibility checks of the components.

WAVE cannot run checks on iframe on a page, so I need to "open iframe in a new tab" to run WAVE on its content. But you can only do that when the iframe is an external document.

Screen.Recording.2024-07-03.at.13.25.27.mov

full_file_path = Path.join(full_dir_path, file_name)
iframe_src = "/#{relative_dir_path}/#{file_name}"

iframe_srcdoc = ~s(<html lang="en"><head><title>#{iframe_src}</title><style>#{style}</style><link rel="stylesheet" href="#{dist}/build/bitstyles.css"></head><body>#{Enum.join([extra_html, result]) |> String.replace("\n", "")}</body></html>)
Copy link
Member

@andreasknoepfle andreasknoepfle Jul 8, 2024

Choose a reason for hiding this comment

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

Why does this even care about newlines 🤔 I guess this can be removed when it is not in an iframe anymore.

@angelikatyborska angelikatyborska merged commit b74c21d into main Jul 8, 2024
2 checks passed
@angelikatyborska angelikatyborska deleted the render-story-iframe-as-external-document branch July 8, 2024 11:22
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.

2 participants