From e7ddcf1c895b19530b880516f08f183f97c0e401 Mon Sep 17 00:00:00 2001
From: Henry Heino <personalizedrefrigerator@gmail.com>
Date: Wed, 28 Aug 2024 11:07:11 -0700
Subject: [PATCH] WIP: Rewrite to use listbox role

The listbox role isn't as good a fit with the note list's functionality
(particularly for more complicated list items). However, Windows
Narrator reads nothing with the 'grid' role. (Perhaps it was incorrectly
applied?)
---
 .../app-desktop/gui/NoteList/NoteList2.tsx    | 23 +++++--------------
 packages/app-desktop/gui/NoteList/style.scss  |  7 ------
 .../gui/NoteListItem/NoteListItem.tsx         |  3 ++-
 3 files changed, 8 insertions(+), 25 deletions(-)

diff --git a/packages/app-desktop/gui/NoteList/NoteList2.tsx b/packages/app-desktop/gui/NoteList/NoteList2.tsx
index 049597cfc1e..6caf147a4f7 100644
--- a/packages/app-desktop/gui/NoteList/NoteList2.tsx
+++ b/packages/app-desktop/gui/NoteList/NoteList2.tsx
@@ -23,6 +23,7 @@ import useDragAndDrop from './utils/useDragAndDrop';
 import { itemIsInTrash } from '@joplin/lib/services/trash';
 import getEmptyFolderMessage from '@joplin/lib/components/shared/NoteList/getEmptyFolderMessage';
 import Folder from '@joplin/lib/models/Folder';
+import { _ } from '@joplin/lib/locale';
 const { connect } = require('react-redux');
 
 const commands = {
@@ -202,7 +203,6 @@ const NoteList = (props: Props) => {
 
 		if (!props.notes.length) return { notes: rows, renderedSelectedItem };
 
-		const firstRowIndex = Math.floor(startNoteIndex / itemsPerLine);
 		let currentRow: JSX.Element[] = [];
 
 		const finalizeRow = () => {
@@ -210,18 +210,7 @@ const NoteList = (props: Props) => {
 				return;
 			}
 
-			// Rows are 1-indexed
-			const rowIndex = firstRowIndex + rows.length + 1;
-			rows.push(
-				<div
-					key={`row-${rowIndex}`}
-					role='row'
-					className='row'
-					aria-rowindex={rowIndex}
-				>
-					{currentRow}
-				</div>,
-			);
+			rows.push(...currentRow);
 			currentRow = [];
 		};
 
@@ -300,9 +289,9 @@ const NoteList = (props: Props) => {
 
 	return (
 		<div
-			role='grid'
-			aria-colcount={itemsPerLine}
-			aria-rowcount={totalLineCount}
+			role='listbox'
+			aria-label={_('Notes')}
+			aria-setsize={notes.length}
 			aria-multiselectable={true}
 			// Ensure that the note list can be focused, even if no selected
 			// items are visible.
@@ -317,7 +306,7 @@ const NoteList = (props: Props) => {
 		>
 			{renderEmptyList()}
 			{renderFiller('top', topFillerStyle)}
-			<div className='notes note-list-grid' role='rowgroup' style={notesStyle}>
+			<div className='notes note-list-grid' role='presentation' style={notesStyle}>
 				{notes}
 			</div>
 			{renderFiller('bottom', bottomFillerStyle)}
diff --git a/packages/app-desktop/gui/NoteList/style.scss b/packages/app-desktop/gui/NoteList/style.scss
index 6a75193adfd..921725f84f8 100644
--- a/packages/app-desktop/gui/NoteList/style.scss
+++ b/packages/app-desktop/gui/NoteList/style.scss
@@ -20,13 +20,6 @@
 	}
 }
 
-.note-list-grid {
-	> .row {
-		display: flex;
-		flex-direction: row;
-	}
-}
-
 .note-list-item {
  	display: flex;
 }
diff --git a/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx b/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx
index 724bf7f09b4..b50c086bebf 100644
--- a/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx
+++ b/packages/app-desktop/gui/NoteListItem/NoteListItem.tsx
@@ -157,7 +157,8 @@ const NoteListItem = (props: NoteItemProps, ref: LegacyRef<HTMLDivElement>) => {
 		onDragOver={props.onDragOver}
 
 		aria-selected={props.isSelected}
-		role='gridcell'
+		aria-posinset={1 + props.index}
+		role='option'
 	>
 		<div className="dragcursor" style={dragCursorStyle}></div>
 	</div>;