feat: change the file structure

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Replaced jest with vitest
 - Converted Javascript to Typescript
 - Added documentation
+- Revised the file structure
 
 ## 1.0.3 - 2024-01-09
 

src/AutoVizuA11y.tsx

@@ -8,15 +8,20 @@
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom/client";
 
-import { addsAriaLabels, keyHandler, levelChart, levelNav } from "./components";
+import {
+	addAriaLabels,
+	insightsKeyHandler,
+	switchToChartLevel,
+	navigationKeyHandler,
+} from "./components";
 import { arrayConverter, newId } from "./utils";
 
 import ShortcutGuide from "./ShortcutGuide";
 import { generateDescriptions } from "./components/descriptions/DescriptionsGenerator";
 import { insightsCalculator } from "./utils/insightsCalculator";
-import { descriptionsChanger } from "./components/descriptions/Descriptions";
+import { descriptionsChanger } from "./components/descriptions/DescriptionsChanger";
 
-import "./style/AutoVizuA11y.css";
+import "./assets/style/AutoVizuA11y.css";
 
 type AutoDescriptionsProps = {
 	dynamicDescriptions?: boolean;
@@ -30,9 +35,14 @@ type ManualDescriptionsProps = {
 	shorter: string;
 };
 
+type SelectorType = {
+	element?: string;
+	className?: string;
+};
+
 type AutoVizuA11yProps = {
 	data: object[];
-	selectorType: object;
+	selectorType: SelectorType;
 	type: string;
 	title: string;
 	context: string;
@@ -60,7 +70,7 @@ type AutoVizuA11yProps = {
  * 	autoDescriptions, - object with properties to automatically write the chart descriptions;
  * 	children, - wrapped chart.
  * }
- * @return {JSX.Element} Rendered chart with AutoVizuA11y features.
+ * @return Rendered chart with AutoVizuA11y features.
  *
  * @example
  * // SingleSeries with automatic descriptions
@@ -99,9 +109,6 @@ const AutoVizuA11y = ({
 	let chart = React.Children.map(children, (child) => <div>{child}</div>);
 	const ref = React.useRef<HTMLDivElement>(null);
 
-	//could be converted to prop
-	let alertDiv: HTMLElement | null;
-
 	let storedLonger: string | null;
 	let storedSmaller: string | null;
 
@@ -118,6 +125,22 @@ const AutoVizuA11y = ({
 	const [number, setNumber] = useState<number>(1);
 	const [descs, setDescs] = useState<string[]>([]);
 
+	let elements: HTMLElement[] = [];
+	let alertDiv: HTMLDivElement;
+
+	if (ref.current) {
+		if (selectorType.element !== undefined) {
+			elements = Array.from(ref.current.querySelectorAll(selectorType.element));
+		} else {
+			elements = Array.from(
+				ref.current.getElementsByClassName(selectorType.className || ""),
+			) as HTMLElement[];
+		}
+		alertDiv = ref.current.getElementsByClassName("a11y_alert")[0] as HTMLDivElement;
+	} else {
+		alertDiv = document.createElement("div"); // Dummy alert div
+	}
+
 	if (autoDescriptions) {
 		apiKey = autoDescriptions.apiKey;
 		model = autoDescriptions.model;
@@ -134,12 +157,11 @@ const AutoVizuA11y = ({
 	const storedLongerKey = `oldLonger_${componentId}`;
 	const storedSmallerKey = `oldSmaller_${componentId}`;
 
-	const handleFocus = () => {
+	const handleFocus = (alertDiv: HTMLDivElement | null) => {
 		//css
 		ref.current!.classList.add("focused");
-		toolTutorial = localStorage.getItem("toolTutorial");
+		let toolTutorial = localStorage.getItem("toolTutorial");
 		if (toolTutorial === "true") {
-			alertDiv = ref.current!.getElementsByClassName("a11y_alert")[0] as HTMLElement | null;
 			if (alertDiv) {
 				alertDiv.textContent =
 					"You just entered an AutoVizually chart." +
@@ -229,8 +251,8 @@ const AutoVizuA11y = ({
 			//converts the data into a dictionary
 			arrayConverter(data, insights).then(function (result) {
 				//result = [2,3,5] or []
-				let insightsArrayAux;
-				let averageAux;
+				let insightsArrayAux = [];
+				let averageAux = 0;
 				setArrayConverted(result);
 				if (insights !== "") {
 					insightsArrayAux = insightsCalculator(result);
@@ -239,63 +261,88 @@ const AutoVizuA11y = ({
 					averageAux = insightsArrayAux[1];
 				}
 
-				addsAriaLabels(ref, descriptor, selectorType, data, multiSeries);
+				addAriaLabels({ ref, descriptor, selectorType, data, multiSeries });
 
 				if (storedLonger !== null && storedSmaller !== null) {
 					descsAux = [storedLonger, storedSmaller];
 					setDescs([storedLonger, storedSmaller]);
-					descriptionsChanger(ref, type, descsAux, title, autoDescriptions);
+					descriptionsChanger({ ref, type, descs: descsAux, title, autoDescriptions });
 				} else {
-					generateDescriptions(title, data, averageAux, context, apiKey, model, temperature).then(
-						function (result) {
-							descsAux = result; // Output: [longerDescValue, smallerDescValue]
-							setDescs(result); // Output: [longerDescValue, smallerDescValue]
-							descriptionsChanger(ref, type, descsAux, title, autoDescriptions);
-
-							if (autoDescriptions && autoDescriptions.dynamicDescriptions === false) {
-								localStorage.setItem(storedLongerKey, descsAux[0]);
-								localStorage.setItem(storedSmallerKey, descsAux[1]);
-							}
-						},
-					);
+					generateDescriptions({
+						title,
+						data,
+						average: averageAux,
+						context,
+						apiKey,
+						model,
+						temperature,
+					}).then(function (result) {
+						descsAux = result; // Output: [longerDescValue, smallerDescValue]
+						setDescs(result); // Output: [longerDescValue, smallerDescValue]
+						descriptionsChanger({ ref, type, descs: descsAux, title, autoDescriptions });
+
+						if (autoDescriptions && autoDescriptions.dynamicDescriptions === false) {
+							localStorage.setItem(storedLongerKey, descsAux[0]);
+							localStorage.setItem(storedSmallerKey, descsAux[1]);
+						}
+					});
 				}
 			});
 
 			//wipes the old tabindex present in the child components
-			levelChart(ref, true);
+			switchToChartLevel(ref, true);
 		}, 500);
 
 		//creates the ShortcutGuide
 		createShortcutGuide();
 	}, [ref]);
 
-	//sets the appropriate navigation keys in the ShortcutGuide
+	// sets the appropriate navigation keys in the ShortcutGuide
 	function handleNav(event: React.KeyboardEvent<HTMLDivElement>) {
-		levelNav(event, ref);
+		navigationKeyHandler({
+			type,
+			event,
+			number,
+			ref,
+			elements,
+			alertDiv,
+			selectedSeries,
+			series,
+			selectorType,
+			multiSeries,
+			nextSeries,
+		});
 	}
 
 	//sets the appropriate navigation keys and shortcuts in the charts and data
-	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
-		let alertDiv: HTMLElement | null = ref.current?.getElementsByClassName(
-			"a11y_alert",
-		)[0] as HTMLElement;
-		levelNav(event, ref, alertDiv, selectorType, multiSeries, nextSeries, series, selectedSeries);
-		let numberAux = keyHandler(
+	function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>, alertDiv: HTMLDivElement) {
+		let numberAux = navigationKeyHandler({
 			type,
 			event,
 			number,
 			ref,
+			elements,
+			alertDiv,
+			selectedSeries,
+			series,
 			selectorType,
+			multiSeries,
+			nextSeries,
+		});
+		setNumber(numberAux);
+		insightsKeyHandler({
+			type,
+			event,
+			elements,
+			alertDiv,
+			ref,
 			insights,
 			insightsArray,
 			arrayConverted,
 			title,
 			descs,
-			series,
-			selectedSeries,
 			autoDescriptions,
-		);
-		setNumber(numberAux);
+		});
 	}
 
 	// features exclusive to bar charts (might be able to turn this more modular)
@@ -305,7 +352,10 @@ const AutoVizuA11y = ({
 	return (
 		<div
 			ref={ref}
-			onKeyDown={handleKeyDown}
+			onKeyDown={(event) => {
+				const alertDiv = ref.current?.getElementsByClassName("a11y_alert")[0] as HTMLDivElement;
+				handleKeyDown(event, alertDiv);
+			}}
 			className="a11y_chart"
 			data-testid="a11y_chart"
 			role="form"
@@ -314,7 +364,9 @@ const AutoVizuA11y = ({
 				style={{ textIndent: "-10000px" }}
 				className="a11y_desc visually-hidden"
 				data-testid="a11y_desc"
-				onFocus={handleFocus}
+				onFocus={() => {
+					handleFocus(alertDiv);
+				}}
 				onBlur={handleBlur}
 			>
 				Generating description...

src/ShortcutGuide.tsx

@@ -6,12 +6,12 @@
  */
 
 import React, { useRef, useEffect } from "react";
-import "./style/ShortcutGuideStyle.css";
+import "./assets/style/ShortcutGuideStyle.css";
 
 /**
  * Component that renders the list of all AutoVizuA11y shortcuts.
  *
- * @return {JSX.Element} Shortcut guide.
+ * @return Shortcut guide.
  */
 const ShortcutGuide: React.FC = () => {
 	const refNav = useRef(null);
@@ -22,7 +22,7 @@ const ShortcutGuide: React.FC = () => {
 
 	return (
 		<>
-			<div className="a11y_modal" data-testid="a11y_modal" role="button">
+			<div className="a11y_modal" data-testId="a11y_modal" role="button">
 				<div
 					className="a11y_modal_content"
 					aria-label="AutoVizually shortcut guide. AutoVizually lets you navigate between
@@ -43,7 +43,7 @@ const ShortcutGuide: React.FC = () => {
 						<div className="flex_column">
 							<table role={"group"}>
 								<tbody>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 									<tr className="a11y_row">
 										<th></th>
 										<th
@@ -70,7 +70,7 @@ const ShortcutGuide: React.FC = () => {
 										<th className="a11y_shortcut">? or Esc</th>
 										<th className="a11y_explanation">Leave shortcut guide</th>
 									</tr>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 
 									<tr className="a11y_row">
 										<th></th>
@@ -124,7 +124,7 @@ const ShortcutGuide: React.FC = () => {
 											Move between series of data inside the chart
 										</th>
 									</tr>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 									<tr className="a11y_row">
 										<th></th>
 										<th
@@ -182,14 +182,14 @@ const ShortcutGuide: React.FC = () => {
 											Subtract one number to the data points to be jumped at a time
 										</th>
 									</tr>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 								</tbody>
 							</table>
 						</div>
 						<div className="flex_column">
 							<table role={"group"}>
 								<tbody>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 									<tr className="a11y_row">
 										<th></th>
 										<th
@@ -212,7 +212,7 @@ const ShortcutGuide: React.FC = () => {
 										<th className="a11y_shortcut">Alt (option) + L</th>
 										<th className="a11y_explanation">Maximum</th>
 									</tr>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 									<tr className="a11y_row">
 										<th></th>
 										<th
@@ -264,7 +264,7 @@ const ShortcutGuide: React.FC = () => {
 											Compare current data element to the rest of the chart
 										</th>
 									</tr>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 									<tr className="a11y_row">
 										<th></th>
 										<th
@@ -293,7 +293,7 @@ const ShortcutGuide: React.FC = () => {
 											Set shorter description of the chart (default)
 										</th>
 									</tr>
-									<tr className="a11y_empty_row"></tr>
+									<div className="a11y_empty_row"></div>
 								</tbody>
 							</table>
 						</div>

src/components/descriptions/Descriptions.ts → src/components/descriptions/DescriptionsChanger.ts

@@ -16,22 +16,22 @@ type AutoDescriptionsProps = {
  * Handles the longer and shorter description change when Alt (option) + B or Alt (option) + S are pressed, respectively.
  *
  * @export
- * @param {React.RefObject<HTMLElement>} ref
- * @param {string} type
- * @param {string[]} descs
- * @param {string} title
- * @param {AutoDescriptionsProps} [autoDescriptions]
- * @param {React.KeyboardEvent} [event]
- * @return {void}
  */
-export function descriptionsChanger(
-	ref: React.RefObject<HTMLElement>,
-	type: string,
-	descs: string[],
-	title: string,
-	autoDescriptions?: AutoDescriptionsProps,
-	event?: React.KeyboardEvent,
-): void {
+export function descriptionsChanger({
+	ref,
+	type,
+	descs,
+	title,
+	autoDescriptions,
+	event,
+}: {
+	ref: React.RefObject<HTMLElement>;
+	type: string;
+	descs: string[];
+	title: string;
+	autoDescriptions?: AutoDescriptionsProps;
+	event?: React.KeyboardEvent;
+}): void {
 	title =
 		title + ", " + type + ". " + (autoDescriptions !== undefined ? "Automatic description: " : "");