From edd34b25233ef94dec42b1ec6ba324befc8eea52 Mon Sep 17 00:00:00 2001
From: Vaibhav Raizada <varaizad@microsoft.com>
Date: Thu, 10 Nov 2022 04:35:39 -0800
Subject: [PATCH] fixing a11y bug

---
 src/images/editorOptions/highlight_tool_off.svg      |  4 ++--
 src/scripts/clipperUI/components/modeButton.tsx      |  2 +-
 src/scripts/clipperUI/components/regionSelection.tsx |  2 +-
 src/scripts/clipperUI/components/spriteAnimation.tsx |  5 +++--
 src/scripts/clipperUI/panels/successPanel.tsx        |  2 +-
 src/styles/clipper.less                              | 12 ++++++++++++
 6 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/images/editorOptions/highlight_tool_off.svg b/src/images/editorOptions/highlight_tool_off.svg
index 749f7da2..4f7a9d89 100644
--- a/src/images/editorOptions/highlight_tool_off.svg
+++ b/src/images/editorOptions/highlight_tool_off.svg
@@ -1,5 +1,5 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M25.0303 2.96967C26.4278 4.36713 26.4278 6.63286 25.0303 8.03033L13.062 19.9987C12.7851 20.2755 12.4408 20.4754 12.063 20.5784L6.94731 21.9736C6.38744 22.1263 5.87371 21.6125 6.0264 21.0527L7.42159 15.937C7.52462 15.5592 7.72444 15.2149 8.00132 14.938L19.9696 2.96967C21.3671 1.5722 23.6328 1.5722 25.0303 2.96967ZM19.0001 6.06057L9.06198 15.9987C8.96969 16.0909 8.90308 16.2057 8.86874 16.3316L7.81889 20.1811L11.6683 19.1312C11.7942 19.0969 11.909 19.0303 12.0013 18.938L21.9391 8.99957L19.0001 6.06057ZM21.0303 4.03033L20.0601 4.99957L22.9991 7.93957L23.9696 6.96967C24.7813 6.15799 24.7813 4.842 23.9696 4.03033C23.158 3.21865 21.842 3.21865 21.0303 4.03033Z" fill="#212121"/>
-<path d="M8.5 16C9.5 16 12 16.5 12 19.5001" stroke="#212121" stroke-width="1.5"/>
+<path d="M25.0303 2.96967C26.4278 4.36713 26.4278 6.63286 25.0303 8.03033L13.062 19.9987C12.7851 20.2755 12.4408 20.4754 12.063 20.5784L6.94731 21.9736C6.38744 22.1263 5.87371 21.6125 6.0264 21.0527L7.42159 15.937C7.52462 15.5592 7.72444 15.2149 8.00132 14.938L19.9696 2.96967C21.3671 1.5722 23.6328 1.5722 25.0303 2.96967ZM19.0001 6.06057L9.06198 15.9987C8.96969 16.0909 8.90308 16.2057 8.86874 16.3316L7.81889 20.1811L11.6683 19.1312C11.7942 19.0969 11.909 19.0303 12.0013 18.938L21.9391 8.99957L19.0001 6.06057ZM21.0303 4.03033L20.0601 4.99957L22.9991 7.93957L23.9696 6.96967C24.7813 6.15799 24.7813 4.842 23.9696 4.03033C23.158 3.21865 21.842 3.21865 21.0303 4.03033Z" fill="white"/>
+<path d="M8.5 16C9.5 16 12 16.5 12 19.5001" stroke="white" stroke-width="1.5"/>
 <rect x="1" y="24" width="26" height="4" rx="1" fill="#FEFE56"/>
 </svg>
diff --git a/src/scripts/clipperUI/components/modeButton.tsx b/src/scripts/clipperUI/components/modeButton.tsx
index baeefbe9..ff2c5316 100644
--- a/src/scripts/clipperUI/components/modeButton.tsx
+++ b/src/scripts/clipperUI/components/modeButton.tsx
@@ -37,7 +37,7 @@ class ModeButtonClass extends ComponentBase<{}, PropsForModeButton> {
 		let idName: string = clipMode + "Button";
 
 		return (
-			<a className={className} role="option" aria-selected={this.props.selected}
+			<a className={className} role="button" aria-selected={this.props.selected}
 				id={idName} title={this.props.tooltipText ? this.props.tooltipText : ""}
 				aria-setsize={this.props["aria-setsize"]} aria-posinset={this.props["aria-posinset"]}
 				{...this.onElementFirstDraw(this.initiallySetFocus)}
diff --git a/src/scripts/clipperUI/components/regionSelection.tsx b/src/scripts/clipperUI/components/regionSelection.tsx
index 4dc08364..226b58fc 100644
--- a/src/scripts/clipperUI/components/regionSelection.tsx
+++ b/src/scripts/clipperUI/components/regionSelection.tsx
@@ -22,7 +22,7 @@ class RegionSelectionClass extends ComponentBase<{}, RegionSelectionProps> {
 		// No remove button is rendered if there's no callback specified
 		return (
 			this.props.onRemove
-				? <a className="region-selection-remove-button" role="button"
+				? <a className="region-selection-remove-button" role="button" style="z-index: 100;"
 					{...this.enableInvoke({callback: this.buttonHandler, tabIndex: 300, idOverride: Log.Click.Label.regionSelectionRemoveButton})}>
 					<img src={ExtensionUtils.getImageResourceUrl("editorOptions/delete_button.svg")} alt={Localization.getLocalizedString("WebClipper.Preview.RemoveSelectedRegion")} /></a>
 				: undefined
diff --git a/src/scripts/clipperUI/components/spriteAnimation.tsx b/src/scripts/clipperUI/components/spriteAnimation.tsx
index 3f0c6b55..bc377049 100644
--- a/src/scripts/clipperUI/components/spriteAnimation.tsx
+++ b/src/scripts/clipperUI/components/spriteAnimation.tsx
@@ -14,6 +14,7 @@ export interface SpriteAnimationProps {
 	totalFrameCount: number;
 	loop?: boolean;
 	ariaLabel?: string;
+	tabIndex?: number;
 }
 
 export interface SpriteAnimationState {
@@ -114,7 +115,7 @@ class SpriteAnimationClass extends ComponentBase<SpriteAnimationState, SpriteAni
 		let imageWidth = this.props.imageWidth ? this.props.imageWidth : 32;
 
 		let ariaLabel = this.props.ariaLabel ? this.props.ariaLabel : Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.Loading");
-
+		let tabIndex = this.props.tabIndex ? this.props.tabIndex : 290;
 		let style = {
 			backgroundImage: "url(" + this.props.spriteUrl + ")",
 			backgroundRepeat: "no-repeat",
@@ -127,7 +128,7 @@ class SpriteAnimationClass extends ComponentBase<SpriteAnimationState, SpriteAni
 				className={Constants.Classes.spinner}
 				config={this.configForSpinner.bind(this)}
 				style={style}
-				tabIndex="290"
+				tabIndex={tabIndex}
 				aria-label={ariaLabel}
 				role="progressbar"
 				aria-valuemin="0"
diff --git a/src/scripts/clipperUI/panels/successPanel.tsx b/src/scripts/clipperUI/panels/successPanel.tsx
index c1027f25..99d13906 100644
--- a/src/scripts/clipperUI/panels/successPanel.tsx
+++ b/src/scripts/clipperUI/panels/successPanel.tsx
@@ -30,7 +30,7 @@ class SuccessPanelClass extends ComponentBase<{ }, ClipperStateProp> {
 		return (
 			<div id={Constants.Ids.clipperSuccessContainer}>
 				<div className="messageLabelContainer successPagePadding">
-					<SpriteAnimation spriteUrl={ExtensionUtils.getImageResourceUrl("checkmark.png")} imageHeight={28} totalFrameCount={30} loop={false}/>
+					<SpriteAnimation spriteUrl={ExtensionUtils.getImageResourceUrl("checkmark.png")} imageHeight={28} totalFrameCount={30} loop={false} tabIndex={-1} />
 					<span className="actionLabelFont messageLabel" role="alert"
 						style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Light)}>
 						{Localization.getLocalizedString("WebClipper.Label.ClipSuccessful")}
diff --git a/src/styles/clipper.less b/src/styles/clipper.less
index 44bdd608..dec4ac18 100644
--- a/src/styles/clipper.less
+++ b/src/styles/clipper.less
@@ -232,6 +232,18 @@
 	padding-left: 5px;
 }
 
+.Notebook:focus {
+	border: 1px solid black !important;
+}
+
+.Section:focus {
+	border: 1px solid black !important;
+}
+
+.region-selection-remove-button:focus {
+	border: 1px solid black !important;
+}
+
 @media (forced-colors: active) {
 	.buttonTextInHighContrast{
 		forced-color-adjust: none;