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.

Sign up for GitHub

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

Jump to bottom

Improve HTML Semantics of Rendered Diff #23

Closed
yuschick opened this issue May 4, 2023 · 1 comment
Closed

Improve HTML Semantics of Rendered Diff #23

yuschick opened this issue May 4, 2023 · 1 comment
Labels
enhancement New feature or request released on @next

Comments

@yuschick
Copy link

yuschick commented May 4, 2023 •
edited
Loading

This is definitely a useful library, but I would hope for improved HTML semantics.

  • Table caption
    When rendering the table to display the diff, it would be beneficial to support or auto-generate a caption value. In practice this would probably be something like "Changes for [filename]". This way, those navigating with assistive technologies, accessibility trees or landmarks navigation can have greater context as to what the information is.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption

  • Deletions use <del> tag
    When showing document changes like this diff viewer, and showing deletions, it's more appropriate to use the <del> element. This creates a more accurate semantic experience and doesn't rely entirely on the visual UI to understand what content is being deleted.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del

  • Insertions use <ins> tag
    Much like the previous <del> tag, when displaying insertions, the <ins> tag should be used. Again, this provides greater context to those who may browse with assistive technologies and /or accessibility trees. Using these semantic tags will ensure that the markup communicates as clearly as the UI design.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins
@Aeolun Aeolun added the enhancement New feature or request label Jun 19, 2023
Aeolun added a commit that referenced this issue Oct 19, 2023
@Aeolun
fix: use semantic elements for diff elements (fixes #23)
a6222c7
github-actions bot pushed a commit that referenced this issue Oct 19, 2023
@semantic-release-bot
chore(release): 4.0.0 [skip ci]
d10ab38 
# [4.0.0](v3.3.0...v4.0.0) (2023-10-19)

### Bug Fixes

* do not trim trailing newlines (fixes [#27](#27)) ([ee4d53f](ee4d53f))
* use semantic elements for diff elements (fixes [#23](#23)) ([a6222c7](a6222c7))

* feat!: diff/flexbox based layout, text selectable per side (fixes #15) ([9f6c4d5](9f6c4d5)), closes [#15](#15)

### Features

* add summary element and fold expansion/folding (fixes [#22](#22), [#21](#21)) ([e47cbe1](e47cbe1))

### BREAKING CHANGES

* This completely modifies the way react-diff-viewer-continued is rendered. The overall
layout should be more or less the same, but with the new layout probably come new bugs.
@Aeolun
Copy link
Owner

Aeolun commented Oct 19, 2023

🎉 This issue has been resolved in version 4.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@Aeolun Aeolun closed this as completed Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request released on @next
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@yuschick @Aeolun