Skip to content

Commit 8532c80

Browse files
authored
Merge pull request #62 from feedzai/dd-general-fixing
General fixing
2 parents 7ccebb1 + 4e083d6 commit 8532c80

File tree

12 files changed

+124
-53
lines changed

12 files changed

+124
-53
lines changed

CHANGELOG.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1313
- Fixed tests / github pipeline errors
1414
- Adapted the ShortcutGuide to vary between "Alt" and "option" depending on the OS
1515
- Added support for OpenAI API-compatible providers via the new `baseUrl` prop
16-
- Added new Cypress tests
16+
- Added new i18n Cypress tests
17+
- Added Arrow Navigation to the ShortcutGuide
18+
19+
### Changed
20+
21+
- Replaced arrow symbols with text on the ShortcutGuide
22+
- Re-did ShortcutGuide `<dl>` structure
23+
- Moved the context prop to inside autoDescriptions
1724

1825
## 2.0.4 - 2025-01-06
1926

README.md

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ cd autovizua11y
5555
| `type` | Required | string | The type of data visualization. It is announced once a data visualization gets focused, after the title and before the descriptions. |
5656
| `title` | Required | string | The title of the visualization, which should be short and concise, showcasing the purpose of the content inside the data visualization. It is announced once a data visualization gets focused, before the type and the longer or shorter descriptions. |
5757
| `insights` | Required | string | Expects a `string` that corresponds to the key in the data object from which values will be used to derive statistical insights. For example, If the insights should be derived from the `amount` in the data, then that's what should be passed in this property. If an empty string `""` is passed, the user will receive an alert stating 'This shortcut does not work in this chart.' This applies to shortcuts related to minimum, average, and maximum values, as well as those involving comparisons to these insights and other data points. **Note: the values used for insights need to be of type `Number`.** |
58-
| `context` | Required | string | The context in which the data visualization is present. It is passed in the prompt, when generating automatic the descriptions, resulting in contextualized outputs. |
5958
| `descriptor` | Optional | string | By receiving a `string`, this descriptor helps better contextualize what data elements are. It is added at the end of each data element. If no descriptor is provided, blank text ("") is set instead. |
6059
| `multiSeries` | Optional | string | When working with multi-series data, provide a `string` that corresponds to the key in the data object that defines each series, allowing users to navigate between different series/clusters in addition to regular navigation. If an empty string `""` is passed, the tool interprets the data as single series. |
6160
| `shortcutGuide` <a id="shortcutGuideProp"></a> | Optional | JSX.Element | AutoVizuA11y has its default `NativeShortcutGuide` but you may create your own. The ShortcutGuide is wrapped in a `<dialog>`, and its reference can be obtained trought the property `dialogRef`, which you can add to your `shortcutGuide`. The `dialogRef` is a `RefObject<HTMLDialogElement>`, which you can use to create, for example, a button that handles the logic of closing this dialog. |
@@ -74,8 +73,9 @@ cd autovizua11y
7473

7574
| Keys | Required/Optional | Type | Description |
7675
| --------------------- | ----------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
77-
| `dynamicDescriptions` | Optional | boolean | Setting this to `false` stops the component from generating the two descriptions for that chart after the first render (the descriptions get saved in localstorage). This should be useful for static visualizations. |
7876
| `apiKey` | Required | string | The OpenAI or OpenAI-compatible API key, enabling an LLM to generate human-like descriptions of the data visualization. [You can get yours here](https://platform.openai.com/account/api-keys), It is recommended for the developer to take the necessary precautions in order to hide the API key. |
77+
| `context` | Required | string | The context in which the data visualization is present. It is passed in the prompt, when generating automatic the descriptions, resulting in contextualized outputs. |
78+
| `dynamicDescriptions` | Optional | boolean | Setting this to `false` stops the component from generating the two descriptions for that chart after the first render (the descriptions get saved in localstorage). This should be useful for static visualizations. |
7979
| `model` | Optional | string | The LLM responsible for generating both descriptions. [You can check the models available here](https://platform.openai.com/docs/models). If no model is provided, `gpt-3.5-turbo` will be chosen by `default`. |
8080
| `baseUrl` | Optional | string | The base URL for the API compatible with the OpenAI [Chat Completions API](https://platform.openai.com/docs/api-reference/chat) endpoint. If no base URL is provided, `https://api.openai.com/v1/` (OpenAI) will be chosen by `default`. |
8181
| `temperature` | Optional | number | A temperature, from `0` to `1`, used in the model responsible for generating both descriptions. Descriptions with temperatures closer to 0 should be more deterministic between API calls while those being closer to 1 should be more random between API calls. [You can check the models available here](https://platform.openai.com/docs/models). If no model is provided, `0` will be chosen by `default`. |
@@ -142,12 +142,12 @@ function App() {
142142
selectorType={{ element: "rect" }}
143143
type="bar chart"
144144
title="Number of hours spent looking at a screen per day of the week."
145-
context="Screen time dashboard"
146145
insights="value"
147146
descriptor="hours"
148147
autoDescriptions={{
149-
dynamicDescriptions: false,
150148
apiKey: API_KEY,
149+
context="Screen time dashboard"
150+
dynamicDescriptions: false,
151151
model: "gpt-3.5-turbo",
152152
temperature: 0.1,
153153
}}
@@ -161,7 +161,6 @@ function App() {
161161
selectorType={{ element: "circle" }}
162162
type="Multi line chart"
163163
title="Latvia, Lithuania, and Croatia are among the countries where population is decreasing"
164-
context="Interface with World data"
165164
insights="y"
166165
descriptor="millions"
167166
multiSeries="series"
@@ -179,7 +178,6 @@ function App() {
179178
selectorType={{ element: "rect" }}
180179
type="graphique à barres"
181180
title="Temps d'écran par jour de la semaine"
182-
context="Tableau de bord du temps d'écran"
183181
insights="value"
184182
descriptor="heures"
185183
internationalization={{
@@ -237,12 +235,12 @@ The Shortcut Guide can be acessed by the user, using the <kbd>?</kbd> key, while
237235

238236
| Activation Key(s) | Description |
239237
| --------------------------------------------------------: | ------------------------------------------------------------- |
240-
| <kbd>?</kbd> | Enter shortcut guide |
241-
| <kbd>?</kbd> or <kbd>Esc</kbd> | Leave shortcut guide |
242-
| <kbd></kbd> | Get into a chart |
243-
| <kbd></kbd> | Get out of a chart |
244-
| <kbd></kbd> | Move forward in a page element |
245-
| <kbd></kbd> | Move backward in a page element |
238+
| <kbd>Question Mark</kbd> | Enter shortcut guide |
239+
| <kbd>?</kbd> or <kbd>Escape</kbd> | Leave shortcut guide |
240+
| <kbd>Down arrow</kbd> | Get into a chart |
241+
| <kbd>Up arrow</kbd> | Get out of a chart |
242+
| <kbd>Right arrow</kbd> | Move forward in a page element |
243+
| <kbd>Left arrow</kbd> | Move backward in a page element |
246244
| <kbd>Alt (option)</kbd> + <kbd>M</kbd> | Move between series of data inside the chart |
247245
| <kbd>Home</kbd> or <kbd>Alt (option)</kbd> + <kbd>Q</kbd> | Jump to the beginning of a chart |
248246
| <kbd>End</kbd> or <kbd>Alt (option)</kbd> + <kbd>W</kbd> | Jump to the end of a chart |

examples/src/components/custom_shortcut_guide/components/CustomGuideData.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@ export const CUSTOM_GUIDE_DATA: Section[] = [
1919
{
2020
title: "Access the guide",
2121
shortcuts: [
22-
{ keys: "?", description: "Enter shortcut guide" },
23-
{ keys: "? or Esc", description: "Leave shortcut guide" },
22+
{ keys: "Question Mark", description: "Enter shortcut guide" },
23+
{ keys: "Question Mark or Escape", description: "Leave shortcut guide" },
2424
],
2525
},
2626
{
2727
title: "Move between page elements",
2828
shortcuts: [
29-
{ keys: "", description: "Get into a chart" },
30-
{ keys: "", description: "Get out of a chart" },
31-
{ keys: "", description: "Move forward in a page element" },
32-
{ keys: "", description: "Move backward in a page element" },
29+
{ keys: "Down Arrow", description: "Get into a chart" },
30+
{ keys: "Up Arrow", description: "Get out of a chart" },
31+
{ keys: "Right Arrow", description: "Move forward in a page element" },
32+
{ keys: "Left Arrow", description: "Move backward in a page element" },
3333
{
3434
keys: "Alt + M",
3535
description: "Move between series of data inside the chart",

examples/src/components/custom_shortcut_guide/components/CustomGuideHeader.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ export const CustomShortcutGuideHeader = ({ onClose }: { onClose: () => void })
1616
>
1717
Custom Shortcut Guide
1818
</h2>
19-
<p className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideActionLabel}>? or Esc</p>
19+
<p className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideActionLabel}>
20+
Question Mark or Escape
21+
</p>
2022
<button
2123
className={constants.SHORTCUTGUIDE_CLASSES.shortcutGuideButtonClose}
2224
aria-label="Close shortcut guide"

src/AutoVizuA11y.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { initToolTutorial } from "./utils/initToolTutorial";
2626
import { processData } from "./utils/processData";
2727
import { ShortcutGuideContainer } from "./components/shortcut_guide/index";
2828
import { toSafeClassName } from "./utils/toSafeClassname";
29-
import { CustomTranslations } from "./utils/customTranslations";
29+
import { CustomTranslations } from "./hooks/useIsolatedI18n";
3030
import { useIsolatedI18n } from "./hooks/useIsolatedI18n";
3131

3232
type AutoDescriptionsProps = {
@@ -35,6 +35,7 @@ type AutoDescriptionsProps = {
3535
model?: string;
3636
baseUrl?: string;
3737
temperature?: number;
38+
context: string;
3839
};
3940

4041
type ManualDescriptionsProps = {
@@ -69,10 +70,6 @@ export type AutoVizuA11yProps = {
6970
* Title of the chart.
7071
*/
7172
title: string;
72-
/**
73-
* Context in which the visualization is present.
74-
*/
75-
context: string;
7673
/**
7774
* Key in the data objects from which values will be used to calculate insights.
7875
*/
@@ -130,14 +127,14 @@ export type AutoVizuA11yProps = {
130127
* selectorType={ element: "rect" }
131128
* type="bar chart"
132129
* title="Number of hours spent looking at a screen per day of the week."
133-
* context="Screen time dashboard"
134130
* insights="value"
135131
* descriptor="hours"
136132
* autoDescriptions={
137133
* dynamicDescriptions: false,
138134
* apiKey: API_KEY,
139135
* model: "gpt-3.5-turbo",
140136
* temperature: 0.1,
137+
* context: "Screen time dashboard",
141138
* }
142139
* internationalization={
143140
* language: "en-GB",
@@ -165,7 +162,6 @@ export const AutoVizuA11y = ({
165162
data,
166163
multiSeries,
167164
insights,
168-
context,
169165
shortcutGuide,
170166
manualDescriptions,
171167
autoDescriptions,
@@ -308,7 +304,7 @@ export const AutoVizuA11y = ({
308304
title,
309305
dataString,
310306
average: averageAux,
311-
context,
307+
context: autoDescriptions!.context,
312308
apiKey: autoDescriptions!.apiKey,
313309
model: autoDescriptions!.model,
314310
baseUrl: autoDescriptions!.baseUrl,
@@ -395,7 +391,7 @@ export const AutoVizuA11y = ({
395391
);
396392

397393
return (
398-
<>
394+
<div className={constants.AUTOVIZUA11Y_CLASSES.a11yWrapper} role="application">
399395
<div
400396
ref={chartRef}
401397
onKeyDown={handleOnKeyDown}
@@ -413,6 +409,6 @@ export const AutoVizuA11y = ({
413409
setIsShortcutGuideOpen={setIsShortcutGuideOpen}
414410
t={t}
415411
/>
416-
</>
412+
</div>
417413
);
418414
};

src/assets/data/GuideData.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,17 @@ export function getGuideData(): Section[] {
2828
{
2929
title: "sg_access_title",
3030
shortcuts: [
31-
{ keys: "?", description: "sg_enter_description" },
32-
{ keys: "? or Esc", description: "sg_leave_description" },
31+
{ keys: "Question Mark", description: "sg_enter_description" },
32+
{ keys: "Question Mark or Escape", description: "sg_leave_description" },
3333
],
3434
},
3535
{
3636
title: "sg_move_elements_title",
3737
shortcuts: [
38-
{ keys: "", description: "sg_get_into_chart" },
39-
{ keys: "", description: "sg_get_out_of_chart" },
40-
{ keys: "", description: "sg_move_forward" },
41-
{ keys: "", description: "sg_move_backward" },
38+
{ keys: "Down Arrow", description: "sg_get_into_chart" },
39+
{ keys: "Up Arrow", description: "sg_get_out_of_chart" },
40+
{ keys: "Right Arrow", description: "sg_move_forward" },
41+
{ keys: "Left Arrow", description: "sg_move_backward" },
4242
{
4343
keys: `${modifierKey} + M`,
4444
description: "sg_move_series",

src/assets/style/NativeShortcutGuide.css

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,15 @@
122122
background-color: var(--shortcut-guide-cell-shortcut-background);
123123
font-weight: var(--shortcut-guide-title-font-weight);
124124
border-radius: 2px;
125-
height: var(--shortcut-guide-cell-shortcut-height);
125+
min-height: var(--shortcut-guide-cell-shortcut-height);
126126
width: var(--shortcut-guide-cell-shortcut-width);
127127
color: var(--shortcut-guide-text-blue);
128+
word-wrap: break-word;
129+
overflow-wrap: break-word;
130+
hyphens: auto;
131+
text-align: center;
132+
padding: 0.25rem;
133+
box-sizing: border-box;
128134
}
129135

130136
.shortcut-guide__cell--explanation {
@@ -153,7 +159,7 @@
153159
flex-direction: column;
154160
flex-wrap: wrap;
155161
align-content: safe space-around;
156-
height: 340px;
162+
height: 360px;
157163
overflow-y: auto;
158164
gap: 1rem;
159165
margin: 0.5rem 1rem 1rem 1rem;

0 commit comments

Comments
 (0)