General fixing

[DiogoRDuarte]

In this PR:

• The context prop was moved inside the autoDescriptions.
• The role="application" was added, allowing arrow navigation without the need to switch to focus mode.
• Added arrow navigation was added to the shortcut guide, making it easier to navigate.
• Arrow icons were replaced with text strings on the ShortcutGuide, ensuring they are read.
• The <dl> structure of the ShortcutGuide was redone.
• An unused CustomTranslations type import was fixed.

[DiogoRDuarte]

The addition of the role="application" requires further validation with NVDA

[DiogoRDuarte]

The correct way to work with <dl> tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dl
How its ok to use <div>s without breaking the <dl> logic: https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element

[joaopalmeiro]

I would move this two to the ### Changed section.

[joaopalmeiro]

Personal opinion: I find a ternary operator more readable for this case (and for the next function as well). For example:

const nextIndex = currentRowIndex === -1 ? 0 : currentRowIndex + 1;

[DiogoRDuarte]

agreed!

[joaopalmeiro]

I think there's no need to cast document.activeElement. If there's no specific reason to do so, I would remove as HTMLElement | null.

Same for the previous function.

[joaopalmeiro]

While testing the shortcut guide, I noticed that VoiceOver doesn't read question marks (?) and reads Esc as if it were an acronym. I've been reading a bit about this but can't find any definitive best practices. I would consider adding aria-labels for these symbols, for example:

<span aria-label="Question mark">?</span>
<span aria-label="Escape key">Esc</span>

I'm not sure what the best practice is here, but I'd say we should at least consider these changes for future work.

[DiogoRDuarte]

While testing the shortcut guide, I noticed that VoiceOver doesn't read question marks (?) and reads Esc as if it were an acronym. I've been reading a bit about this but can't find any definitive best practices. I would consider adding aria-labels for these symbols, for example:

<span aria-label="Question mark">?</span>
<span aria-label="Escape key">Esc</span>

I'm not sure what the best practice is here, but I'd say we should at least consider these changes for future work.

While testing the shortcut guide, I noticed that VoiceOver doesn't read question marks (?) and reads Esc as if it were an acronym. I've been reading a bit about this but can't find any definitive best practices. I would consider adding aria-labels for these symbols, for example:

<span aria-label="Question mark">?</span>
<span aria-label="Escape key">Esc</span>

I'm not sure what the best practice is here, but I'd say we should at least consider these changes for future work.

The approach needs to be slightly different. The shortcuts are built from an object, so adding aria labels different from the shortcut displayed required extra steps for the dev. Instead, I will just replace it directly just like I did with the arrow symbols. WDYT?

[joaopalmeiro]

While testing the shortcut guide, I noticed that VoiceOver doesn't read question marks (?) and reads Esc as if it were an acronym. I've been reading a bit about this but can't find any definitive best practices. I would consider adding aria-labels for these symbols, for example:

<span aria-label="Question mark">?</span>
<span aria-label="Escape key">Esc</span>

I'm not sure what the best practice is here, but I'd say we should at least consider these changes for future work.

While testing the shortcut guide, I noticed that VoiceOver doesn't read question marks (?) and reads Esc as if it were an acronym. I've been reading a bit about this but can't find any definitive best practices. I would consider adding aria-labels for these symbols, for example:

<span aria-label="Question mark">?</span>
<span aria-label="Escape key">Esc</span>

I'm not sure what the best practice is here, but I'd say we should at least consider these changes for future work.

The approach needs to be slightly different. The shortcuts are built from an object, so adding aria labels different from the shortcut displayed required extra steps for the dev. Instead, I will just replace it directly just like I did with the arrow symbols. WDYT?

As long as the labels don't get too big, that seems like a good approach!