fix: update accessibility issues - lighthouse #6838

[thnaylor]

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes Improvements to landing page accessibility #6838
• Requires deployment <snek/rubick/worker>

Did your issue had any of the "$" label on it?

• My DOT address: Payout

Solutions

[aria-*] attributes do not match their roles

Added roles that are missing to the areas which been flagged by lighthouse.

Links do not have a discernible name

Added "slide n of n" as a aria-label to carousel media links. (Researched and found to be a good way)

Heading elements are not in a sequentially-descending order
Added semantic updates "section" and "h2" to sections & headings in footer.

Lighthouse

New:

Desktop	Mobile

Previous:

Desktop	Mobile

Other

• For desktop there is a low contrast issue which is preventing 100% accessibility. Might need design intervention if we want to tackle this in future.
  

• I noticed on a few components the usage of "aria-role" attribute instead of just "role". I think this may have been a mistake and should be updated to "role"...

Suggestion

Investigate ways to manage the score whilst developing new components so that it does not continuously creep down.

Copilot Summary

🤖 Generated by Copilot at 709a249

Improved the accessibility of the carousel and the footer components by adding aria-label attributes, role attributes, and semantic HTML elements. Added props to the <CarouselMedia> component to display the current slide index and the total number of slides.

🤖 Generated by Copilot at 709a249

We're making the web more accessible
For every user and device
We add aria-label and role attributes
And we check our props and tags twice

[kodabot]

SUCCESS @thnaylor PR for issue #6838 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	709a249
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/64e27121ee1daf00088d5495
😎 Deploy Preview	https://deploy-preview-6843--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[codeclimate]

Code Climate has analyzed commit 709a249 and detected 0 issues on this pull request.

View more on Code Climate.

[reviewpad]

AI-Generated Summary: This pull request includes two separate patches, each addressing different issues in the project's codebase.

The first patch mainly deals with Accessibility enhancements to improve User Experience(UX). The patched files include: TheFooter.vue, CarouselAgnostic.vue, CarouselMedia.vue, and ProfileDropdown.vue. From the changes, it's clear that the author has updated certain element tags and added relevant aria-labels for better accessibility. For instance, div tags have been replaced with section tags and aria-labels have been added to navigational elements where they were missing.

In addition, there have been some changes in the social media icons' SVG path in the footer.

The second patch focuses on a fix to an SVG path within TheFooter.vue. A minor modification is made to the SVG path's coordinates to amend the behavior or appearance of that graphic element.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[yangwao]

pay 50 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $50 @ 4.5 USD/DOT ~ 11.111 $DOT
🧗 123PCJXhjb15i6JwVVRGd7KvN2sSNZrtPjr5doJq9oWctoTt
🔗 0xec6386b393c9f1a1c8b6cbc1dc8e442e252670b57ad04ab8b1e57b06c9a6fba5

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

[yangwao]

For desktop there is a low contrast issue which is preventing 100% accessibility. Might need design intervention if we want to tackle this in future.
image

I noticed on a few components the usage of "aria-role" attribute instead of just "role". I think this may have been a mistake and should be updated to "role"...

we might completely change landing page :)