Fix inconsistencies

examples/website/src/index.html

@@ -108,7 +108,13 @@
                 </div>
               </label>
               <label class="radio-option">
-                <input type="radio" name="tokenizer" value="Word" id="tokenizer-word" />
+                <input
+                  type="radio"
+                  name="tokenizer"
+                  value="Word"
+                  id="tokenizer-word"
+                  checked
+                />
                 <span class="radio-custom" aria-hidden="true"></span>
                 <div class="radio-content">
                   <span class="radio-label">Word</span>
@@ -121,7 +127,6 @@
                   name="tokenizer"
                   value="Markdown"
                   id="tokenizer-markdown"
-                  checked
                 />
                 <span class="radio-custom" aria-hidden="true"></span>
                 <div class="radio-content">
@@ -165,7 +170,7 @@
 
           <div class="text-area-card diamond-result">
             <label
-              for="merged"
+              id="merged-label"
               title="The automatically merged result - edit the boxes above to see changes in real-time."
             >
               Merged result
@@ -189,7 +194,13 @@
                 <path d="M3 3l18 18"></path>
               </svg>
             </label>
-            <div id="merged" role="textbox" aria-readonly="true" aria-live="off"></div>
+            <div
+              id="merged"
+              role="textbox"
+              aria-labelledby="merged-label"
+              aria-readonly="true"
+              aria-live="off"
+            ></div>
           </div>
         </main>
 

examples/website/src/index.ts

@@ -12,9 +12,10 @@ const tokenizerRadios = document.querySelectorAll(
 
 const sampleText = `The reconcile-text library is embedded on this page as a WASM module and powers these text boxes. Experiment with changing the "Original", "First user's edit", and "Second user's edit" text boxes to see competing changes get merged in real-time within the "Merged result" box. 
 
-Here, you will see color-coded tokens marking the origin of each token, including ones that got deleted. The result highly depends on the tokenisation strategy which may be:
+Here, you will see color-coded tokens marking the origin of each token, including ones that got deleted. The result depends on the tokenisation strategy selected above:
 - Character-based
-- Word-based`;
+- Word-based (default)
+- Markdown-based`;
 
 let pendingUpdate: number | null = null;
 function scheduleUpdate(): void {
@@ -55,10 +56,10 @@ function loadSample(): void {
   originalTextArea.value = sampleText;
   leftTextArea.value =
     sampleText.replace('color', 'colour') +
-    "\n- Line-based\n\nCheck out what's the most complex conflict you can come up with!";
+    "\n\nCheck out what's the most complex conflict you can come up with!";
-  rightTextArea.value =
+  rightTextArea.value = sampleText
-    sampleText.replace(', for example,', ' such as').replace('WASM', 'WebAssembly') +
+    .replace('Experiment with changing', 'Try editing')
-    '\n- Or your custom tokeniser';
+    .replace('WASM', 'WebAssembly');
 }
 
 function updateMergedText(): void {
@@ -194,7 +195,7 @@ function createSelectionOverlay(isLeft: boolean, isSelection: boolean): HTMLSpan
 
 function getSelectedTokenizer(): BuiltinTokenizer {
   const selectedRadio = Array.from(tokenizerRadios).find((radio) => radio.checked);
-  return (selectedRadio?.value ?? 'Markdown') as BuiltinTokenizer;
+  return (selectedRadio?.value ?? 'Word') as BuiltinTokenizer;
 }
 
 function resizeTextAreas(): void {