Refactor interlinearizer WebView for accessibility and update tests

- Change role from 'group' to 'radiogroup' for JSON view mode buttons to improve accessibility.
- Update button roles to 'radio' and aria attributes to 'aria-checked' for better semantic meaning.
- Modify tests to reflect the updated roles and ensure proper functionality of the JSON view mode switch.

Author: alex-rawlings-yyc

src/__tests__/interlinearizer.web-view.test.tsx

@@ -107,11 +107,11 @@ describe('InterlinearizerWebView', () => {
   it('renders the JSON view mode switch (InterlinearData / Interlinearization / Analyses)', () => {
     render(<InterlinearizerWebView {...testWebViewProps} />);
 
-    const group = screen.getByRole('group', { name: /json view mode/i });
-    expect(group).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^interlineardata$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^interlinearization$/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /^analyses$/i })).toBeInTheDocument();
+    const radiogroup = screen.getByRole('radiogroup', { name: /json view mode/i });
+    expect(radiogroup).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /^interlineardata$/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /^interlinearization$/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /^analyses$/i })).toBeInTheDocument();
     expect(screen.getByText(/view json as:/i)).toBeInTheDocument();
   });
 
@@ -150,7 +150,7 @@ describe('InterlinearizerWebView', () => {
   it('switching to Interlinearization shows converted model JSON', () => {
     render(<InterlinearizerWebView {...testWebViewProps} />);
 
-    fireEvent.click(screen.getByRole('button', { name: /^interlinearization$/i }));
+    fireEvent.click(screen.getByRole('radio', { name: /^interlinearization$/i }));
 
     expect(screen.getByText(/^Interlinearization \(JSON\):$/)).toBeInTheDocument();
     expect(screen.getByText(/analysisLanguages/i)).toBeInTheDocument();
@@ -161,10 +161,10 @@ describe('InterlinearizerWebView', () => {
   it('switching back to InterlinearData shows PT9 structure JSON', () => {
     render(<InterlinearizerWebView {...testWebViewProps} />);
 
-    fireEvent.click(screen.getByRole('button', { name: /^interlinearization$/i }));
+    fireEvent.click(screen.getByRole('radio', { name: /^interlinearization$/i }));
     expect(screen.getByText(/^Interlinearization \(JSON\):$/)).toBeInTheDocument();
 
-    fireEvent.click(screen.getByRole('button', { name: /^interlineardata$/i }));
+    fireEvent.click(screen.getByRole('radio', { name: /^interlineardata$/i }));
 
     expect(screen.getByText(/^InterlinearData \(JSON\):$/)).toBeInTheDocument();
     expect(screen.getByText(/glossLanguage/i)).toBeInTheDocument();
@@ -174,7 +174,7 @@ describe('InterlinearizerWebView', () => {
   it('switching to Analyses shows analysis map JSON from test data', () => {
     render(<InterlinearizerWebView {...testWebViewProps} />);
 
-    fireEvent.click(screen.getByRole('button', { name: /^analyses$/i }));
+    fireEvent.click(screen.getByRole('radio', { name: /^analyses$/i }));
 
     expect(screen.getByText(/^Analyses \(JSON\):$/)).toBeInTheDocument();
     expect(mockCreateAnalyses).toHaveBeenCalledWith(stubInterlinearData);
@@ -187,7 +187,7 @@ describe('InterlinearizerWebView', () => {
     mockConvert.mockReturnValueOnce(undefined);
 
     const { container } = render(<InterlinearizerWebView {...testWebViewProps} />);
-    fireEvent.click(screen.getByRole('button', { name: /^interlinearization$/i }));
+    fireEvent.click(screen.getByRole('radio', { name: /^interlinearization$/i }));
 
     const jsonPre = container.querySelector('pre');
     expect(jsonPre).toBeInTheDocument();

src/__tests__/parsers/paratext-9/paratext9Converter.test.ts

@@ -212,6 +212,7 @@ describe('convertParatext9ToInterlinearization', () => {
       };
       const result = convertParatext9ToInterlinearization(data);
 
+      expect(result.books[0].textVersion).toBe('H1');
       expect(result.books[0].segments[0].occurrences[0].assignments[0].status).toBe('approved');
     });
   });

src/interlinearizer.web-view.tsx

@@ -91,42 +91,45 @@ globalThis.webViewComponent = function InterlinearizerWebView() {
             <span className="tw-text-sm tw-font-medium tw-text-foreground">View JSON as:</span>
             <div
               className="tw-inline-flex tw-rounded-md tw-border tw-border-border tw-bg-muted tw-p-0.5"
-              role="group"
+              role="radiogroup"
               aria-label="JSON view mode"
             >
               <button
                 type="button"
+                role="radio"
                 onClick={() => setJsonViewMode('interlinear-data')}
                 className={`tw-rounded tw-px-3 tw-py-1.5 tw-text-sm tw-font-medium tw-transition-colors ${
                   jsonViewMode === 'interlinear-data'
                     ? 'tw-bg-background tw-text-foreground tw-shadow-sm'
                     : 'tw-text-muted-foreground hover:tw-text-foreground'
                 }`}
-                aria-pressed={jsonViewMode === 'interlinear-data'}
+                aria-checked={jsonViewMode === 'interlinear-data'}
               >
                 InterlinearData
               </button>
               <button
                 type="button"
+                role="radio"
                 onClick={() => setJsonViewMode('interlinearization')}
                 className={`tw-rounded tw-px-3 tw-py-1.5 tw-text-sm tw-font-medium tw-transition-colors ${
                   jsonViewMode === 'interlinearization'
                     ? 'tw-bg-background tw-text-foreground tw-shadow-sm'
                     : 'tw-text-muted-foreground hover:tw-text-foreground'
                 }`}
-                aria-pressed={jsonViewMode === 'interlinearization'}
+                aria-checked={jsonViewMode === 'interlinearization'}
               >
                 Interlinearization
               </button>
               <button
                 type="button"
+                role="radio"
                 onClick={() => setJsonViewMode('analyses')}
                 className={`tw-rounded tw-px-3 tw-py-1.5 tw-text-sm tw-font-medium tw-transition-colors ${
                   jsonViewMode === 'analyses'
                     ? 'tw-bg-background tw-text-foreground tw-shadow-sm'
                     : 'tw-text-muted-foreground hover:tw-text-foreground'
                 }`}
-                aria-pressed={jsonViewMode === 'analyses'}
+                aria-checked={jsonViewMode === 'analyses'}
               >
                 Analyses
               </button>

src/parsers/paratext-9/paratext9Converter.ts

@@ -134,23 +134,19 @@ function convertVerseToSegment(
   const segmentId = generateSegmentId(verseRef);
 
   const wordOccurrences = verseData.clusters.map((cluster, clusterIndex): Occurrence => {
+    const occurrenceId = generateOccurrenceIdFromCluster(segmentId, cluster.id, clusterIndex);
     const assignments = cluster.lexemes.map((lexeme): AnalysisAssignment => {
       const analysisId = generateAnalysisId(lexeme.lexemeId, lexeme.senseId, glossLanguage);
-      const assignmentId = generateAssignmentId(
-        generateOccurrenceIdFromCluster(segmentId, cluster.id, clusterIndex),
-        analysisId,
-      );
+      const assignmentId = generateAssignmentId(occurrenceId, analysisId);
 
       return {
         id: assignmentId,
-        occurrenceId: generateOccurrenceIdFromCluster(segmentId, cluster.id, clusterIndex),
+        occurrenceId,
         analysisId,
         status: verseData.hash ? AssignmentStatus.Approved : AssignmentStatus.Suggested,
       };
     });
 
-    const occurrenceId = generateOccurrenceIdFromCluster(segmentId, cluster.id, clusterIndex);
-
     return {
       id: occurrenceId,
       segmentId,
@@ -258,9 +254,9 @@ export function convertParatext9ToInterlinearization(
     return convertVerseToSegment(verseRef, verseData, glossLanguage);
   });
 
-  const verseDataArray = Object.values(verses);
-  const verseWithHash = verseDataArray.find((verseData) => verseData.hash);
-  const textVersion = verseWithHash?.hash || '';
+  const sortedVerseRefs = Object.keys(verses).sort();
+  const firstVerseRefWithHash = sortedVerseRefs.find((ref) => verses[ref].hash);
+  const textVersion = firstVerseRefWithHash !== undefined ? verses[firstVerseRefWithHash].hash : '';
 
   const analyzedBook: AnalyzedBook = {
     id: analyzedBookId,