Improve HTML Semantics of Rendered Diff

[yuschick]

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]

:tada: This issue has been resolved in version 4.0.0 :tada:

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: