Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: add alt tags to landing page images - lighthouse #6803

Merged
merged 1 commit into from
Aug 19, 2023

Conversation

thnaylor
Copy link
Contributor

@thnaylor thnaylor commented Aug 18, 2023

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

Before submitting pull request, please make sure:

  • My contribution builds clean without any errors or warnings
  • I've merged recent default branch -- main and I've no conflicts
  • I've tried to respect high code quality standards
  • I've didn't break any original functionality

Optional

  • I've tested it at </ksm/collection>
  • I've tested PR on mobile
  • I've written unit tests 🧪
  • I've found edge cases

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

  • Fill up your DOT address: Payout

Community participation

Screenshot 📸

  • Added alt tags for required by lighthouse and empty alt tags for decorative images.
  • Alt tags on functional images have functional descriptions for screen readers.
  • Desktop & Mobile have been checked.

Lighthouse report

image

Tags used

Images Alt tag Comment
image open shopping cart
image press k to focus search input
image press enter to start search
image / decorative
image / decorative
  • My fix has changed something on UI; a screenshot is best to understand changes for others.

Copilot Summary

🤖 Generated by Copilot at a883a52

Added or improved alt attributes for img elements in various components to enhance accessibility and provide meaningful information for screen readers.

🤖 Generated by Copilot at a883a52

Oh we're the alt attribute crew
We make the web more friendly and true
For every img we have a task
We heave away and haul on the alt

@thnaylor thnaylor requested a review from a team as a code owner August 18, 2023 21:26
@thnaylor thnaylor requested review from vikiival and Jarsen136 and removed request for a team August 18, 2023 21:26
@kodabot
Copy link
Collaborator

kodabot commented Aug 18, 2023

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

@netlify
Copy link

netlify bot commented Aug 18, 2023

Deploy Preview for koda-canary ready!

Name Link
🔨 Latest commit a883a52
🔍 Latest deploy log https://app.netlify.com/sites/koda-canary/deploys/64dfe200f1544e0008ee9af0
😎 Deploy Preview https://deploy-preview-6803--koda-canary.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@reviewpad
Copy link
Contributor

reviewpad bot commented Aug 18, 2023

AI-Generated Summary: This pull request includes a fix for the images on the landing page that were missing alt tags. These alt tags have been added in order to improve the accessibility of the site and align it with SEO and web standards best practices. The changes have been made in four files: TheFooter.vue, SearchLanding.vue, ShoppingCartButton.vue, and SearchBar.vue. In summary, all the images have been provided with appropriate alt descriptions. The alt tags are empty where the images are decorative and do not convey content or their absence does not disable users from accessing information.

@reviewpad reviewpad bot added small Pull request is small waiting-for-review labels Aug 18, 2023
@codeclimate
Copy link

codeclimate bot commented Aug 18, 2023

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

View more on Code Climate.

@sonarcloud
Copy link

sonarcloud bot commented Aug 18, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@yangwao
Copy link
Member

yangwao commented Aug 19, 2023

@thnaylor what's the score now in Lighthouse?

@thnaylor
Copy link
Contributor Author

@yangwao

Accessibility is now in the green mobile&desktop with 91.

New:

image

Previous:

image

Comments:

I did some quick experiments on the landing page for the other accessibility issues and got 98. So definately some room for improvements.

image

@yangwao
Copy link
Member

yangwao commented Aug 19, 2023

pay 50 usd

@thnaylor if you can have look on other issues to improve lighthouse!

@yangwao
Copy link
Member

yangwao commented Aug 19, 2023

😍 Perfect, I’ve sent the payout
💵 $50 @ 4.49 USD/DOT ~ 11.136 $DOT
🧗 123PCJXhjb15i6JwVVRGd7KvN2sSNZrtPjr5doJq9oWctoTt
🔗 0x876c47a9a599a3e0323e6a19d56f5d61e5199387d76feb3ff24c7ab910aa57b2

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

@yangwao yangwao added the paid pull-request has been paid label Aug 19, 2023
@yangwao yangwao merged commit 51e378d into kodadot:main Aug 19, 2023
15 checks passed
@yangwao
Copy link
Member

yangwao commented Aug 19, 2023

I did some quick experiments on the landing page for the other accessibility issues and got 98. So definately some room for improvements.

sure, make separate issue on that if so!

This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
paid pull-request has been paid small Pull request is small waiting-for-review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add alt attriburtes to pictures on landing
3 participants