fixing a11y bug

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

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

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"

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")}

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;