Keyboard and Screenreader a11y improvements

[bgareth]

This PR is about implementing keyboard and screenreader a11y improvements.

Notable changes:

• Added screen reader only elements
  • Shortcut list element (before the toolbar / workbook in DOM)
  • Alert element to read out selection coordinates clearly when navigating the grid
  • Alert element to read when sheet focus lock is toggled
• Added ability to toggle sheet focus lock as some screen readers, such as NVDA, conflict with the sheet keyboard controls and cannot access the toolbar and other elements easily. Most sheet specific shortcuts and keyboard navigation is ignored when toggle off, allowing for regular keyboard navigation to take place
• Added more aria-label depth to toolbar items and other intractable elements to improve reading
• Added shortcuts for keyboard support for "drag and drop auto-fill"
• Removed default Canvas "image" aria reading as it was unhelpful
• Added strings and translations to account for the above
• On sheet mount focus on cell A1 allows for keyboard initial navigation to the sheet, as before the navigation controls were nullified without any selection in focus.
• eslint fixes and update to delete test in order to account for changes and runner errors
• Addressed some A11y DOM standards flagged by Axe Dev tools

Notes:

• This is not intended to change the experience for non screen reader and keyboard users, but only to improve the clarity and available functionality for screen reader and keyboard users.
• New shortcuts were chosen to avoid popular Mac, Windows and Chrome actions as best as possible while keeping in Google Sheet and standard practices.
• Tested using NVDA, MacVO and Chrome screen reader.

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1207501536719819

[sanchit3008]

thanks for this @bgareth , please let me know when this is ready for review!

[bgareth]

thanks for this @bgareth , please let me know when this is ready for review!

Thank you so much, @sanchit3008. This is ready for review. Please let me know if you have any questions or requests.
I will also get another set of eyes from my team.

Separate note: once we are happy with the state of a11y for this project, we intend to add significant translation support as discussed last year.

[sanchit3008]

thanks @bgareth , i will start reviewing this tomorrow

@Corbe30 you can review this as well

[bgareth]

I noticed another weakness in keyboard functionality around accessing the cell range context menu. I will get working on a commit, but if this review is complete by the time I am done, then I will separate it out to a new PR.

[sanchit3008]

You can include this in the pr itself, however it's going to take me some time to review due to personal commitments

…

On Fri, 14 Feb, 2025, 20:15 Gareth B., ***@***.***> wrote: I noticed another weakness in keyboard functionality around accessing the cell range context menu. I will get working on a commit, but if this review is complete by the time I am done, then I will separate it out to a new PR. — Reply to this email directly, view it on GitHub <#666 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFJLLTDGULKAZ67E4RMOPD32PX6PDAVCNFSM6AAAAABWUEHIJKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJZGUYTKNRXGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: bgareth]*bgareth* left a comment (ruilisi/fortune-sheet#666) <#666 (comment)> I noticed another weakness in keyboard functionality around accessing the cell range context menu. I will get working on a commit, but if this review is complete by the time I am done, then I will separate it out to a new PR. — Reply to this email directly, view it on GitHub <#666 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFJLLTDGULKAZ67E4RMOPD32PX6PDAVCNFSM6AAAAABWUEHIJKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNJZGUYTKNRXGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[bgareth]

You can include this in the pr itself, however it's going to take me some time to review due to personal commitments

Thanks, @sanchit3008. No rush.

[Corbe30]

Thanks @bgareth. I'll review the PR today ✨

[Corbe30]

In this PR, adding new sheets pushes the new sheet tabs vertically instead of horizontally. Can you please fix it @bgareth

[bgareth]

In this PR, adding new sheets pushes the new sheet tabs vertically instead of horizontally. Can you please fix it @bgareth

Thanks for catching this, @Corbe30. I have pushed a commit that addresses this.

[bgareth]

Thanks for all the assistance, @Corbe30 and @sanchit3008.

I will address the context menu keyboard improvements in another PR. So this can be merged if you are happy.

[Corbe30]

this should also occur in e.metaKey + e.shiftKey + F, right @sanchit3008?

[Corbe30]

if so, we can move this inside handleWithCtrlOrMetaKey() itself.

[bgareth]

I'm happy to explore improvements here if needed. However, I left this action in a different scope so it can happen despite ctx.sheetFocused and the if (!ctx.sheetFocused) {return} could catch everything else.

[Corbe30]

Thanks for fixing the sheet tabs bug @bgareth! I've left some new comments, can you please fix those too

[bgareth]

Thanks for fixing the sheet tabs bug @bgareth! I've left some new comments, can you please fix those too

Thanks again, @Corbe30. I have addressed the feedback. I have left responses on a couple individual comments.