Fix cannot focus mail more button on mobile screen readers

The issue was caused by the more button having a parent element with a `role="button"` resulting in the more button having a role of "presentation". To fix this, click handling was moved to a more button's sibling element (mail sender text). Close #8183
tutao · Jan 2, 2025 · ca6b42f · ca6b42f
1 parent 1961f5b
commit ca6b42f
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 54 deletions.
diff --git a/src/mail-app/mail/view/CollapsedMailView.ts b/src/mail-app/mail/view/CollapsedMailView.ts
@@ -27,6 +27,8 @@ export class CollapsedMailView implements Component<CollapsedMailViewAttrs> {
 			".flex.items-center.pt.pb.click.no-wrap",
 			{
 				class: responsiveCardHPadding(),
+				role: "button",
+				"aria-expanded": "false",
 				style: {
 					color: theme.content_button,
 				},

diff --git a/src/mail-app/mail/view/MailViewerHeader.ts b/src/mail-app/mail/view/MailViewerHeader.ts
@@ -193,63 +193,59 @@ export class MailViewerHeader implements Component<MailViewerHeaderAttrs> {
 		const { viewModel } = attrs
 		const classes = this.makeSubjectActionsLineClasses()
 
-		return m(
-			classes,
-			{
-				role: "button",
-				"mail-expander": "true",
-				"aria-expanded": !viewModel.isCollapsed(),
-				tabindex: TabIndex.Default,
-				onclick: (e: MouseEvent) => {
-					viewModel.collapseMail()
-					e.stopPropagation()
-				},
-				onkeydown: (e: KeyboardEvent) => {
-					if (isKeyPressed(e.key, Keys.SPACE, Keys.RETURN) && (e.target as HTMLElement).hasAttribute("mail-expander")) {
+		return m(classes, [
+			m(
+				".flex.flex-grow.align-self-start.items-start",
+				{
+					class: styles.isSingleColumnLayout() ? "mt-m" : "mt",
+					role: "button",
+					"mail-expander": "true",
+					// "aria-expanded" is always true because this component is only used in expanded view
+					"aria-expanded": "true",
+					tabindex: TabIndex.Default,
+					onclick: (e: MouseEvent) => {
 						viewModel.collapseMail()
-						e.preventDefault()
-					}
-				},
-			},
-			[
-				m(
-					".flex.flex-grow.align-self-start.items-start",
-					{
-						class: styles.isSingleColumnLayout() ? "mt-m" : "mt",
+						e.stopPropagation()
 					},
-					[
-						viewModel.isUnread() ? this.renderUnreadDot() : null,
-						viewModel.isDraftMail()
-							? m(
-									".mr-xs.align-self-center",
-									m(Icon, {
-										icon: Icons.Edit,
-										container: "div",
-										style: {
-											fill: theme.content_button,
-										},
-										hoverText: lang.get("draft_label"),
-									}),
-							  )
-							: null,
-						this.tutaoBadge(viewModel),
-						m("span.text-break" + (viewModel.isUnread() ? ".font-weight-600" : ""), viewModel.getDisplayedSender()?.name ?? ""),
-					],
-				),
-				m(
-					".flex-end.items-start.ml-between-s",
-					{
-						class: styles.isSingleColumnLayout() ? "" : "mt-xs",
-						style: {
-							// align "more" button with the datetime text
-							marginRight: styles.isSingleColumnLayout() ? "-3px" : "6px",
-						},
-						onclick: (e: MouseEvent) => e.stopPropagation(),
+					onkeydown: (e: KeyboardEvent) => {
+						if (isKeyPressed(e.key, Keys.SPACE, Keys.RETURN) && (e.target as HTMLElement).hasAttribute("mail-expander")) {
+							viewModel.collapseMail()
+							e.preventDefault()
+						}
 					},
-					this.moreButton(attrs),
-				),
-			],
-		)
+				},
+				[
+					viewModel.isUnread() ? this.renderUnreadDot() : null,
+					viewModel.isDraftMail()
+						? m(
+								".mr-xs.align-self-center",
+								m(Icon, {
+									icon: Icons.Edit,
+									container: "div",
+									style: {
+										fill: theme.content_button,
+									},
+									hoverText: lang.get("draft_label"),
+								}),
+						  )
+						: null,
+					this.tutaoBadge(viewModel),
+					m("span.text-break" + (viewModel.isUnread() ? ".font-weight-600" : ""), viewModel.getDisplayedSender()?.name ?? ""),
+				],
+			),
+			m(
+				".flex-end.items-start.ml-between-s",
+				{
+					class: styles.isSingleColumnLayout() ? "" : "mt-xs",
+					style: {
+						// align "more" button with the datetime text
+						marginRight: styles.isSingleColumnLayout() ? "-3px" : "6px",
+					},
+					onclick: (e: MouseEvent) => e.stopPropagation(),
+				},
+				this.moreButton(attrs),
+			),
+		])
 	}
 
 	private renderUnreadDot(): Children {