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?)

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,26 +203,14 @@ const NoteList = (props: Props) => {
 
 		if (!props.notes.length) return { notes: rows, renderedSelectedItem };
 
-		const firstRowIndex = Math.floor(startNoteIndex / itemsPerLine);
 		let currentRow: JSX.Element[] = [];
 
 		const finalizeRow = () => {
 			if (currentRow.length === 0) {
 				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)}

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;
 }

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>;