-
Notifications
You must be signed in to change notification settings - Fork 473
♿(frontend) make html export accessible to screen reader users #1743
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
base: main
Are you sure you want to change the base?
Conversation
f8e43c1 to
49fd980
Compare
|
Size Change: -1 B (0%) Total Size: 4.15 MB
|
adjusted structure and semantics to ensure proper sr interpretation Signed-off-by: Cyril <c.gromoff@gmail.com>
49fd980 to
10b5eb3
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we add all the utility function about the html feature in a separate file like utils-html.ts ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes of course !
| * - We work directly on the parsed Document so modifications are reflected before we zip files. | ||
| * - We keep the editor inner structure but upgrade the key block types to native elements. | ||
| */ | ||
| export const improveHtmlAccessibility = ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should unit test this function, I can see there is some unexpected behavior around the li tag:
Here you can get a pre-made template with lot of blocks: https://www.blocknotejs.org/examples/interoperability/converting-blocks-to-pdf
| const quoteBlocks = Array.from( | ||
| body.querySelectorAll<HTMLElement>("[data-content-type='quote']"), | ||
| ); | ||
| quoteBlocks.forEach((block) => { | ||
| const quote = parsedDocument.createElement('blockquote'); | ||
| quote.innerHTML = block.innerHTML; | ||
| block.replaceWith(quote); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
| - 🌐(backend) internationalize demo #1644 | ||
| - ♿(frontend) improve accessibility: | ||
| - ♿️Improve keyboard accessibility for the document tree #1681 | ||
| - ♿(frontend) make html export accessible to screen reader users #1743 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When rebase, it will have to go under "Unreleased".


Purpose
Ensure that the HTML export is accessible to screen reader users by improving
its semantic structure and navigability.
Proposal
Refactor the HTML export output to follow accessibility best practices:
proper use of landmarks, headings, and roles to provide clear structure and
context for assistive technologies.