3.0.0 Release

.gitignore

@@ -27,3 +27,7 @@ dist-ssr
 cypress/results
 cypress/screenshots
 cypress/downloads
+
+# Test coverage
+.nyc_output
+coverage

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org

CHANGELOG.md

@@ -6,6 +6,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 3.0.0 - 2025-09-15
+### Added
+- Implemented i18n alternatives as the new "internationalization" property
+- Fixed tests / github pipeline errors
+- Adapted the ShortcutGuide to vary between "Alt" and "option" depending on the OS
+- Added support for OpenAI API-compatible providers via the new `baseUrl` prop
+- Added new i18n Cypress tests
+- Added Arrow Navigation to the ShortcutGuide
+
+### Changed
+- Replaced arrow symbols with text on the ShortcutGuide
+- Re-did ShortcutGuide `<dl>` structure
+- Moved the context prop to inside autoDescriptions
+
+## 2.0.4 - 2025-01-06
+### Added
+- Fixed an issue where series values having spaces would invalidate class names
+
 ## 2.0.3 - 2024-11-04
 ### Added
 - Adds missing types

cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "cypress";
-import codeCoverageTask from "@cypress/code-coverage/task";
+import codeCoverageTask from "@cypress/code-coverage/task.js";
 
 export default defineConfig({
 	e2e: {

cypress/e2e/compare-to-chart.cy.js

@@ -11,7 +11,7 @@ describe("(Alt + Z) Compare to Rest of the Chart Test", () => {
 			.should("have.text", "This shortcut only works inside a chart");
 		cy.get("@chartDescription").type("{downArrow}");
 		cy.findAllByTestId("a11y-chart-element").first().type("{alt}z");
-		cy.get("@chartAlert").should("have.text", "This is the highest value.");
+		cy.get("@chartAlert").should("have.text", "This is the highest value");
 		cy.checkA11y();
 	});
 });

cypress/e2e/compare-to-maximum.cy.js

@@ -8,7 +8,7 @@ describe("(Alt + Shift + L) Compare to Maximum of the Chart Test", () => {
 		cy.findAllByTestId("a11y-chart-element").first().type("{alt}{shift}l");
 		cy.findAllByTestId("a11y-chart-alert")
 			.first()
-			.should("have.text", "The value is the same as the maximum value");
+			.should("have.text", "The value is the same as the Maximum value");
 		cy.checkA11y();
 	});
 });

cypress/e2e/internationalization.cy.js

@@ -0,0 +1,43 @@
+/* eslint-disable no-undef */
+describe("Internationalization Tests", () => {
+	it("should use default English (en-GB) language when internationalization property is empty", () => {
+		cy.visit("/");
+		cy.injectAxe();
+		cy.findByTestId("manual-descriptions-option").click();
+		cy.wait(500);
+		cy.findAllByTestId("a11y_desc").first().focus();
+		cy.focused().type("{alt}k");
+		cy.findAllByTestId("a11y-chart-alert").first().should("contain.text", "The average is");
+		cy.focused().type("?");
+		cy.get("dialog").should("be.visible");
+		cy.get("dialog h2").should("contain.text", "Shortcut guide");
+		cy.focused().type("{esc}");
+		cy.checkA11y();
+	});
+
+	it("should use default Portuguese (pt-PT) language when language property is pt-PT", () => {
+		cy.visit("/");
+		cy.injectAxe();
+		cy.findByTestId("manual-descriptions-option").click();
+		cy.wait(500);
+		cy.findAllByTestId("a11y_desc").first().focus().tab().tab();
+		cy.focused().type("{alt}k");
+		cy.findAllByTestId("a11y-chart-alert").eq(2).should("contain.text", "A média é");
+		cy.focused().type("?");
+		cy.get("dialog").should("be.visible");
+		cy.get("dialog h2").should("contain.text", "Guia de atalhos");
+		cy.checkA11y();
+	});
+
+	it("should use an overriten en-GB string", () => {
+		cy.visit("/");
+		cy.injectAxe();
+		cy.findByTestId("manual-descriptions-option").click();
+		cy.wait(500);
+		cy.findAllByTestId("a11y_desc").first().focus().tab().tab();
+		cy.focused().type("?");
+		cy.get("dialog").should("be.visible");
+		cy.get("dialog h2").should("contain.text", "Overwritten Shortcut guide title");
+		cy.checkA11y();
+	});
+});

cypress/support/e2e.ts

@@ -16,7 +16,8 @@
 // Import commands.js using ES2015 syntax:
 import "./commands";
 import "cypress-axe";
-require("cypress-plugin-tab");
+import "cypress-plugin-tab";
+import "@cypress/code-coverage/support";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

examples/src/Homepage.jsx

@@ -7,6 +7,8 @@ import CardGridManual from "./components/manual/ChartGridManual";
 
 function Homepage() {
 	const [apiKey, setApiKey] = useState("");
+	const [model, setModel] = useState("gpt-3.5-turbo");
+	const [baseUrl, setBaseUrl] = useState("https://api.openai.com/v1/");
 	const [isValid, setIsValid] = useState(false);
 	const [automatic, setAutomatic] = useState(false);
 	const [manual, setManual] = useState(false);
@@ -38,7 +40,7 @@ function Homepage() {
 			{isValid && apiKey !== "" ? (
 				<>
 					<div style={{ marginTop: 20 }}>
-						<CardGrid apiKey={apiKey} setHome={setHome} />
+						<CardGrid apiKey={apiKey} model={model} baseUrl={baseUrl} setHome={setHome} />
 					</div>
 					<p>
 						Data from{" "}
@@ -64,6 +66,10 @@ function Homepage() {
 					<KeyRequest
 						apiKey={apiKey}
 						setApiKey={setApiKey}
+						model={model}
+						setModel={setModel}
+						baseUrl={baseUrl}
+						setBaseUrl={setBaseUrl}
 						isValid={isValid}
 						setIsValid={setIsValid}
 						home={home}
@@ -72,16 +78,7 @@ function Homepage() {
 					/>
 				</div>
 			) : home ? (
-				<Options
-					apiKey={apiKey}
-					setApiKey={setApiKey}
-					isValid={isValid}
-					setIsValid={setIsValid}
-					automatic={automatic}
-					setAutomatic={setAutomatic}
-					manual={manual}
-					setManual={setManual}
-				/>
+				<Options setAutomatic={setAutomatic} setManual={setManual} />
 			) : (
 				<p></p>
 			)}

examples/src/KeyRequest.jsx

@@ -3,30 +3,55 @@ import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
 import "./assets/style/Options.css";
 
-const KeyRequest = ({ apiKey, setApiKey, setIsValid, setHome }) => {
+const KeyRequest = ({
+	apiKey,
+	setApiKey,
+	model,
+	setModel,
+	baseUrl,
+	setBaseUrl,
+	setIsValid,
+	setHome,
+}) => {
 	setHome(false);
 
-	const handleChanges = (e) => {
+	const isValidOpenAiApiKey = (key) => {
+		return key.startsWith("sk-proj-");
+	};
+
+	const isOpenAiApi = (baseUrl) => {
+		const parsedBaseUrl = URL.parse(baseUrl);
+
+		if (parsedBaseUrl) {
+			return parsedBaseUrl.host === "api.openai.com";
+		}
+
+		return false;
+	};
+
+	const handleApiKeyChange = (e) => {
 		setApiKey(e.target.value);
 	};
 
+	const handleModelChange = (e) => {
+		setModel(e.target.value);
+	};
+
+	const handleBaseUrl = (e) => {
+		setBaseUrl(e.target.value);
+	};
+
 	const handleSubmit = (e) => {
 		e.preventDefault();
-		if (isValidApiKey(apiKey)) {
-			setIsValid(true);
-		} else {
-			alert(
-				"The API key should start with 'sk-' and be followed by a string of exactly 48 alphanumeric characters.",
-			);
+
+		if (isOpenAiApi(baseUrl) && !isValidOpenAiApiKey(apiKey)) {
+			alert("The OpenAI API key should start with 'sk-proj-'.");
 			setIsValid(false);
+		} else {
+			setIsValid(true);
 		}
 	};
 
-	const isValidApiKey = (key) => {
-		const apiKeyPattern = /^sk-(proj-)?[a-zA-Z0-9]{48}$/;
-		return apiKeyPattern.test(key);
-	};
-
 	return (
 		<>
 			<div id="cardContainer">
@@ -38,28 +63,45 @@ const KeyRequest = ({ apiKey, setApiKey, setIsValid, setHome }) => {
 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
 								Please provide an{" "}
 								<a href="https://platform.openai.com/account/api-keys" target="_blank">
-									OpenAI API key
+									OpenAI
 								</a>{" "}
-								(the key is not saved). <br></br>The API key should start with 'sk-' and be followed
-								by a string of exactly 48 alphanumeric characters.
+								or OpenAI-compatible API key (the key is not saved). <br></br>The OpenAI API key
+								should start with 'sk-proj-'.
 							</Typography>
 							<br />
 							<label>
-								API Key:{" "}
+								API key:{" "}
 								<input
 									type="text"
-									placeholder="sk-... OR sk-proj-..."
+									required
+									placeholder="sk-proj-... OR ..."
 									value={apiKey}
-									onChange={handleChanges}
+									onChange={handleApiKeyChange}
 								/>
 							</label>
+							<br />
+							<label>
+								Model: <input type="text" required value={model} onChange={handleModelChange} />
+							</label>
+							<br />
+							<label>
+								Base URL:{" "}
+								<input
+									type="url"
+									required
+									pattern="^https://.*|^http://localhost:\d+.*"
+									value={baseUrl}
+									onChange={handleBaseUrl}
+								/>
+							</label>
+							<br />
 							<button type="submit" tabIndex={0}>
 								Submit
 							</button>
 						</form>
-						{apiKey.length > 0 && !isValidApiKey(apiKey) && (
+						{apiKey.length > 0 && !isValidOpenAiApiKey(apiKey) && isOpenAiApi(baseUrl) && (
 							<p style={{ color: "red" }} role="alert">
-								Invalid API key format.
+								Invalid OpenAI API key format.
 							</p>
 						)}
 					</CardContent>

examples/src/Options.jsx

@@ -20,8 +20,9 @@ const Options = ({ setAutomatic, setManual }) => {
 						<CardContent>
 							<h2>Option A</h2> <h3>Automatic Descriptions</h3>
 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
-								The descriptions for each chart are generated in the moment using a GPT model.
-								Because of that, <b> an OpenAI API key is needed.</b>
+								The descriptions for each chart are generated by an OpenAI model or one accessible
+								via an OpenAI-compatible API. Because of that,{" "}
+								<b>an OpenAI or OpenAI-compatible API key is needed.</b>
 							</Typography>
 						</CardContent>
 					</CardActionArea>
@@ -32,8 +33,9 @@ const Options = ({ setAutomatic, setManual }) => {
 							<h2>Option B</h2>
 							<h3>Manual Descriptions</h3>
 							<Typography variant="body2" color="text.secondary" style={{ whiteSpace: "pre-wrap" }}>
-								The descriptions for each chart were previously generated using a GPT model. They
-								were then manually added to each chart. <b>No OpenAI API key is needed.</b>
+								The descriptions for each chart were previously generated using an OpenAI model.
+								They were then manually added to each chart.{" "}
+								<b>No OpenAI or OpenAI-compatible API key is needed.</b>
 							</Typography>
 						</CardContent>
 					</CardActionArea>

examples/src/components/automatic/BarChartAutomatic.jsx

@@ -9,7 +9,7 @@ import { chartDimensions } from "./chart.constants.js";
 import { AutoVizuA11y } from "@feedzai/autovizua11y";
 import transformJSON from "../../data/transformJSON.js";
 
-function BarChart({ apiKey }) {
+function BarChart({ apiKey, model, baseUrl }) {
 	const intValuesCountryData = countryData.map((country) => {
 		return {
 			...country, //copies all countrys first...
@@ -110,7 +110,8 @@ function BarChart({ apiKey }) {
 				autoDescriptions={{
 					dynamicDescriptions: false,
 					apiKey: apiKey,
-					model: "gpt-3.5-turbo",
+					model: model,
+					baseUrl: baseUrl,
 					temperature: 0.1,
 				}}
 			>