arrow key navigation widgets don't work well with NVDA

[WofWca]

• Operating System (Linux/Mac/Windows/iOS/Android): Windows
• Delta Chat Version: 1.50.1
• Expected behavior: Focus switches to the next chat list item, as would happen if NVDA was not active, as designed in improvement: arrow-key navigation for chat list #4224.
• Actual behavior: NVDA announces an item inside the next chat list item, and document.activeElement doesn't change. Pressing ArrowDown again makes NVDA announce the next item within the same chat list item. You have to press NVDA + Space to get the behavior intended by us, developers.
• Steps to reproduce the problem:
  1. Launch NVDA.
  2. Open Delta Chat.
  3. Tab-navigate to an item in the list of chats.
  4. Press ArrowDown.
• Screenshots:
• Logs:

As I stated in #4294, we probably need to utilize role="listbox" or role="application" or similar. Adding role="application" on the items wrapper solves the problem that this issue describes, but I am not sure whether this is correct otherwise.
A good resource would be https://www.w3.org/WAI/ARIA/apg/patterns/listbox/ or https://www.w3.org/WAI/ARIA/apg/patterns/grid/. Also see this thread https://mastodon.social/@WofWca/113857401211886594.

[WofWca]

On the accessibility audit call, the reviewers said that it's probably an issue with NVDA in particular.
But IDK maybe adding role, as mentioned above, won't hurt.

[WofWca]

Update: OK indeed, converting the list of chats and the list of accounts to role="tablist" helped, now the behavior there is almost the same as without NVDA. However, it's still a little problematic, because of the presence of non- role="tab" items in the list, namely the "Archived Chats" button and the "Add Account" button.

deltachat-desktop/packages/frontend/src/components/AccountListSidebar/AccountListSidebar.tsx

Lines 154 to 203 in 0a1172a

	<ul
	ref={accountsListRef}
	className={styles.accountList}
	onScroll={updateHoverInfoPosition}
	role='tablist'
	aria-orientation='vertical'
	>
	<RovingTabindexProvider wrapperElementRef={accountsListRef}>
	{accountsFetch.lingeringResult?.ok === false ? (
	<button
	onClick={() => {
	if (
	!accountsFetch.lingeringResult ||
	accountsFetch.lingeringResult.ok
	) {
	// This should not happen, TypeScript.
	throw new Error('expected non-ok value')
	}
	openDialog(AlertDialog, {
	message: tx(
	'error_x',
	'Failed to load account IDs:\n' +
	unknownErrorToString(accountsFetch.lingeringResult.err)
	),
	})
	}}
	aria-label={tx('error')}
	title={tx('error')}
	>
	⚠️
	</button>
	) : (
	accountsFetch.lingeringResult?.value.map(id => (
	<AccountItem
	key={id}
	accountId={id}
	isSelected={selectedAccountId === id}
	onSelectAccount={selectAccount}
	openAccountDeletionScreen={openAccountDeletionScreen}
	updateAccountForHoverInfo={updateAccountForHoverInfo}
	syncAllAccounts={syncAllAccounts}
	muted={noficationSettings[id]?.muted || false}
	/>
	))
	)}
	<li>
	<AddAccountButton onClick={onAddAccount} />
	</li>
	</RovingTabindexProvider>
	</ul>

deltachat-desktop/packages/frontend/src/components/chat/ChatListItem.tsx

Lines 202 to 217 in 6ceaeaf

	<button
	ref={ref}
	{...rest}
	tabIndex={tabIndex}
	onClick={onClick}
	onKeyDown={tabindexOnKeydown}
	onFocus={e => {
	tabindexSetAsActiveElement()
	onFocus?.(e)
	}}
	onContextMenu={onContextMenu}
	aria-haspopup='menu'
	className={`chat-list-item archive-link-item ${tabindexClassName} ${
	isContextMenuActive ? 'context-menu-active' : ''
	}`}
	>

And the list of messages is still problematic, as well as the "Gallery" dialog items.

[pvagner]

I apologise I haven't looked at this issue earlier. I think the chat list is now working fine.
As for the list of messages this is really tricky but I don't see this as a huge issue.
When NVDA is switched into focus mode using nvda+space the navigation is working as intended.
When NVDA is switched into browse mode it uses arrow keys for reading the message content including ability to select parts of the text. I think this is a feature rather than a bug.
Most electron apps are behaving like this for example microsoft teams.
Visually disabled people who are proficient while using their screen reader are expected to know they have to switch their screen reader into focus / browse mode when needed.

[WofWca]

Thanks for taking a look!

Ok, let's calm down with this a bit then.