#315 Improve Lighthouse scores #322
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ishable without relying on color " aria error - https://dequeuniversity.com/rules/axe/4.10/link-in-text-block
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
nevendyulgerov
changed the title
nevendyulgerov
changed the title
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I made tweaks in order to improve the Lighthouse scores. Those changes are mostly focused around the accessibility score. I made several other tweaks in order to mitigate a couple of hydration errors and an edge case for the empty state of specifications. Summary:
aria-labelfor theAddresscopy button.aria-labelfor the applications/inputs table action buttons. Increased the size of the buttons to mitigate an accessibility issue related with minimal touch target size of those buttons.aria-labelfor elements from theShellcomponent that required it.aria-labelfor the pagination and items-per-page select.aria-labelfor the specifications actions (download/upload).mantine.walletproviders.InitialPageLogocomponent that will display the Cartesi logo during the initial load of the app. For a split second (or more time, depending on internet connection) initially the app displays an empty page. I wanted to mitigate that withInitialPageLogo. I did this with the goal to improve the initial UI of the app:Screen.Recording.2025-01-30.at.14.26.29.mov
After the changes, the accessibility score across all pages should be around ~95%:
2 main issues related to accessibility remain:
aria-labelis missing for the wallet connect modal. There's an issue about that in their repo.The first one is not something that can be addressed on our side. The second one requires changes in the UI theme so I decided to leave those out for the time being.