From 14d4761e89cf7b672db5804edb0cbf150d5bc4e2 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 9 Mar 2026 05:05:23 +0000
Subject: [PATCH] fix(a11y): hide Location label from Voice Access to prevent
 number overlay

The Location text label was being treated as an interactive element by
Voice Access, causing it to display a number for the non-interactive control.
This fix adds aria-hidden="true" to the optionLabel div and changes the
label element to a span, since screen reader accessibility is already
provided by the addSrOnlyLocationDiv function.

Fixes #634

Co-authored-by: KethanaReddy7 <KethanaReddy7@users.noreply.github.com>
---
 src/scripts/clipperUI/components/sectionPicker.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/scripts/clipperUI/components/sectionPicker.tsx b/src/scripts/clipperUI/components/sectionPicker.tsx
index 43339d23..01eccd64 100644
--- a/src/scripts/clipperUI/components/sectionPicker.tsx
+++ b/src/scripts/clipperUI/components/sectionPicker.tsx
@@ -296,10 +296,10 @@ export class SectionPickerClass extends ComponentBase<SectionPickerState, Sectio
 
 		return (
 			<div id={Constants.Ids.locationPickerContainer} {...this.onElementFirstDraw(this.addSrOnlyLocationDiv)}>
-				<div id={Constants.Ids.optionLabel} className="optionLabel">
-					<label htmlFor={Constants.Ids.sectionLocationContainer} aria-label={locationString} className="buttonLabelFont" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
-						<span aria-hidden="true">{locationString}</span>
-					</label>
+				<div id={Constants.Ids.optionLabel} className="optionLabel" aria-hidden="true">
+					<span className="buttonLabelFont" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
+						{locationString}
+					</span>
 				</div>
 				<OneNotePicker.OneNotePickerComponent
 					id={Constants.Ids.sectionLocationContainer}