fix: use semantic elements for diff elements (fixes #23)

Aeolun · Oct 19, 2023 · a6222c7 · a6222c7
1 parent 34c4d80
commit a6222c7
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 9 deletions.
diff --git a/src/index.tsx b/src/index.tsx
@@ -6,6 +6,7 @@ import {computeLineInformation, DiffInformation, DiffMethod, DiffType, LineInfor
 import computeStyles, {ReactDiffViewerStyles, ReactDiffViewerStylesOverride,} from './styles';
 import {ReactElement} from "react";
 import {computeHiddenBlocks} from "./compute-hidden-blocks";
+import IntrinsicElements = React.JSX.IntrinsicElements;
 
 const m = require('memoize-one');
 
@@ -174,17 +175,31 @@ class DiffViewer extends React.Component<
     renderer?: (chunk: string) => JSX.Element,
   ): ReactElement[] => {
     return diffArray.map((wordDiff, i): JSX.Element => {
-      return (
-        <span
+      const content = renderer ? renderer(wordDiff.value as string) : wordDiff.value
+
+      return wordDiff.type === DiffType.ADDED ?
+        <ins
           key={i}
           className={cn(this.styles.wordDiff, {
             [this.styles.wordAdded]: wordDiff.type === DiffType.ADDED,
+          })}
+        >
+          {content}
+        </ins>
+      : wordDiff.type === DiffType.REMOVED ? <del
+          key={i}
+          className={cn(this.styles.wordDiff, {
             [this.styles.wordRemoved]: wordDiff.type === DiffType.REMOVED,
           })}
         >
-          {renderer ? renderer(wordDiff.value as string) : wordDiff.value}
+          {content}
+        </del> : <span
+          key={i}
+          className={cn(this.styles.wordDiff)}
+        >
+          {content}
         </span>
-      );
+    ;
     });
   };
 
@@ -218,16 +233,24 @@ class DiffViewer extends React.Component<
     const removed = type === DiffType.REMOVED;
     const changed = type === DiffType.CHANGED;
     let content;
-    if (Array.isArray(value)) {
+    const hasWordDiff = Array.isArray(value)
+    if (hasWordDiff) {
       content = this.renderWordDiff(value, this.props.renderContent);
     } else if (this.props.renderContent) {
       content = this.props.renderContent(value);
     } else {
       content = value;
     }
 
+    let ElementType: keyof IntrinsicElements = 'div'
+    if (added && !hasWordDiff) {
+      ElementType = 'ins'
+    } else if (removed && !hasWordDiff) {
+      ElementType = 'del'
+    }
+
     return (
-      <div className={this.styles.line} role={'row'}>
+      <ElementType className={this.styles.line} role={'row'} title={added && !hasWordDiff ? "Added line" : removed && !hasWordDiff ? "Removed line" : undefined}>
         {!this.props.hideLineNumbers && (
           <div
             onClick={
@@ -297,7 +320,7 @@ class DiffViewer extends React.Component<
         >
           <pre className={this.styles.contentText}>{content}</pre>
         </div>
-      </div>
+      </ElementType>
     );
   };
 
@@ -589,17 +612,19 @@ class DiffViewer extends React.Component<
           [this.styles.splitView]: splitView,
         })}
       >
-        <div className={this.styles.column} role={'table'}>
+        <div className={this.styles.column} role={'table'} title={`Diff information for ${leftTitle}`}>
           <div
             className={cn(this.styles.titleBlock, this.styles.column)}
+            role={'columnheader'}
           >
             <pre className={this.styles.contentText}>{leftTitle}</pre>
           </div>
           {nodes.leftLines}
         </div>
-        {nodes.rightLines.length > 0 ? <div className={this.styles.column} role={'table'}>
+        {nodes.rightLines.length > 0 ? <div className={this.styles.column} role={'table'} title={`Diff information for ${rightTitle}`}>
           <div
             className={cn(this.styles.titleBlock, this.styles.column)}
+            role={'columnheader'}
           >
             <pre className={this.styles.contentText}>{rightTitle}</pre>
           </div>

diff --git a/src/styles.ts b/src/styles.ts
@@ -383,6 +383,7 @@ export default (
     label: 'line',
     height: '1.6em',
     display: 'flex',
+    textDecoration: 'none'
   });
 
   const column = css({