<commit_before>import {Constants} from "../../constants";
import {AugmentationHelper} from "../../contentCapture/augmentationHelper";
import {ExtensionUtils} from "../../extensions/extensionUtils";
import {InvokeMode} from "../../extensions/invokeOptions";
import {Localization} from "../../localization/localization";
import {ClipMode} from "../clipMode";
import {ClipperStateProp} from "../clipperState";
import {ComponentBase} from "../componentBase";
import {ModeButton} from "./modeButton";

export interface ModeButtonSelectorState {
	mouseKeyOnButton?: number;
}

class ModeButtonSelectorClass extends ComponentBase<ModeButtonSelectorState, ClipperStateProp> {
	constructor(props) {
		super(props);
		this.setState({
			mouseKeyOnButton: 1
		});
	}

	private handleKeydown = (event) => {
		if (event.keyCode === Constants.KeyCodes.down) {
			this.handleDownArrow();
		}
		if (event.keyCode === Constants.KeyCodes.up) {
			this.handleUpArrow();
		}
	};

	private handleUpArrow() {
		let selectedID = this.state.mouseKeyOnButton - 1;
		if (selectedID === 0) {
			selectedID = 4;
		}
		this.setState({ mouseKeyOnButton: selectedID});
		this.focusOnAButton(selectedID);
	};

	private handleDownArrow() {
		let selectedID = this.state.mouseKeyOnButton + 1;
		if (selectedID === 5) {
			selectedID = 1;
		}
		this.setState({ mouseKeyOnButton: selectedID});
		this.focusOnAButton(selectedID);
	};

	private focusOnAButton(selectedID) {
		const buttons = document.querySelectorAll("a[aria-setsize]");
		if (buttons.length > 0) {
			for (let i = 0; i < buttons.length; i++) {
				let selectable = buttons[i] as HTMLElement;
				let ariaIntForEach = parseInt(selectable.getAttribute("aria-posinset"), 10);
				if ( ariaIntForEach === selectedID) {
					selectable.focus();
				}
			}
		}
	};

	onModeSelected(newMode: ClipMode) {
		this.props.clipperState.setState({
			currentMode: this.props.clipperState.currentMode.set(newMode)
		});
	};
<commit_msg>fix outline styles for elements using keyboard<commit_after>import {Constants} from "../../constants";
import {AugmentationHelper} from "../../contentCapture/augmentationHelper";
import {ExtensionUtils} from "../../extensions/extensionUtils";
import {InvokeMode} from "../../extensions/invokeOptions";
import {Localization} from "../../localization/localization";
import {ClipMode} from "../clipMode";
import {ClipperStateProp} from "../clipperState";
import {ComponentBase} from "../componentBase";
import {ModeButton} from "./modeButton";

export interface ModeButtonSelectorState {
	mouseKeyOnButton?: number;
}

class ModeButtonSelectorClass extends ComponentBase<ModeButtonSelectorState, ClipperStateProp> {
	constructor(props) {
		super(props);
		this.setState({
			mouseKeyOnButton: 1
		});
	}

	private handleKeydown = (event) => {
		if (event.keyCode === Constants.KeyCodes.down) {
			this.handleDownArrow();
		}
		if (event.keyCode === Constants.KeyCodes.up) {
			this.handleUpArrow();
		}
	};

	private handleUpArrow() {
		let selectedID = this.state.mouseKeyOnButton - 1;
		if (selectedID === 0) {
			selectedID = 4;
		}
		this.setState({ mouseKeyOnButton: selectedID});
		ModeButtonSelectorClass.focusOnAButton(selectedID);
	};

	private handleDownArrow() {
		let selectedID = this.state.mouseKeyOnButton + 1;
		if (selectedID === 5) {
			selectedID = 1;
		}
		this.setState({ mouseKeyOnButton: selectedID});
		ModeButtonSelectorClass.focusOnAButton(selectedID);
	};

	private static focusOnAButton(selectedID) {
		const buttons = document.querySelectorAll("a[aria-setsize]");
		if (buttons.length > 0) {
			for (let i = 0; i < buttons.length; i++) {
				let selectable = buttons[i] as HTMLElement;
				selectable.style.outlineStyle = "";
				let ariaIntForEach = parseInt(selectable.getAttribute("aria-posinset"), 10);
				if ( ariaIntForEach === selectedID) {
					selectable.focus();
				}
			}
		}
	};

	onModeSelected(newMode: ClipMode) {
		this.props.clipperState.setState({
			currentMode: this.props.clipperState.currentMode.set(newMode)
		});
	};

{'fraction_non_alphanumeric': 0.14626865671641792, 'fraction_numerical': 0.005472636815920398, 'mean_word_length': 4.426450742240216, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4150076', 'n_tokens_mistral': 1369, 'n_tokens_neox': 1259, 'n_words': 258}