Fix Accessibility for themes - Lighthouse Integration

[pourmand1376]

Using https://pagespeed.web.dev/

Closes

• Improve Accessibility score (at LightHouse) #50
• Add Lighthouse integration #29

[netlify]

✅ Deploy Preview for academic-folio ready!

Name	Link
🔨 Latest commit	c09af71
🔍 Latest deploy log	https://app.netlify.com/sites/academic-folio/deploys/63e64d2df69b1000086e8ac5
😎 Deploy Preview	https://deploy-preview-64--academic-folio.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 settings.

[pourmand1376]

This is the report from lighthouse.

• Background and foreground colors do not have a sufficient contrast ratio
  Low-contrast text is difficult or impossible for many users to read. Learn more.

• Buttons do not have an accessible name
  These are opportunities to improve the semantics of the controls in your application. This may enhance the experience for users of assistive technology, like a screen reader.
  

[pourmand1376]

Second issue is easily resolved. For the first issue, I think we have to use a different background color for codes and shortcodes (just like al-folio).

What are your ideas? @rohandebsarkar

[pourmand1376]

Also, I added lighthouse integration. To see the results, you should go to Lighthouse CI for Netlify Details > Summary > Artifacts.

we should define our metrics in budget.json like here.

[pourmand1376]

Also, we are not using our primary color in any way. I think we should add our primary color to links like al-folio. This way it would be more alive.

[rohandebsarkar]

I feel we should use different theme colors for light and dark theme. A single color does not look good on both the themes.

[rohandebsarkar]

Second issue is easily resolved. For the first issue, I think we have to use a different background color for codes and shortcodes (just like al-folio).

What are your ideas? @rohandebsarkar

I will be open to add background color to codes. But the problem is we would have to add another color variable.

[pourmand1376]

Second issue is easily resolved. For the first issue, I think we have to use a different background color for codes and shortcodes (just like al-folio).
What are your ideas? @rohandebsarkar

I will be open to add background color to codes. But the problem is we would have to add another color variable.

I think that's okay. I mean, there is no other choice.

[pourmand1376]

I feel we should use different theme colors for light and dark theme. A single color does not look good on both the themes.

I agree. However, I am not an expert in color theory and this stuff. I need to consult a UI designer to help me get good codes.