fix accessibility issues shown in chrome lighthouse audit

[lawrence-dass]

Before:

After:

Wrapping div:

Note: We are using react below React v16.2.0, or else I would prefer to use React Fragment. Still div does not cause any side effect in the application layout.
Reference:
https://reactjs.org/docs/fragments.html
https://getstream.io/blog/react-fragments/
https://stackoverflow.com/questions/33766085/how-to-avoid-extra-wrapping-div-in-react

Button discernible text:

References:
https://dequeuniversity.com/rules/axe/3.1/button-name?application=lighthouse
https://www.w3schools.com/tags/att_global_title.asp

A minor change in the colors:
Before:

After:

Let me know if find you any concern, I'll update the PR accordingly.

[nakulrathore]

Perfect. and great explanation

[nakulrathore]

@all-contributors please add @Lawrence4code for code

[allcontributors]

@nakulrathore

I've put up a pull request to add @Lawrence4code! 🎉

[nakulrathore]

@Lawrence4code , let me know if you want to work on the performance of the app

[lawrence-dass]

@nakulrathore Thank you for the opportunity.

I dug into site perf, as of this moment there's not much scope for improvement as the site scores 100% on performance in chrome lighthouse. The site load on 1.213s (which is great, anything below 2s is awesome) as per https://www.webpagetest.org, https://www.webpagetest.org/result/191012_V9_909f40f66916dad95626bafa69eb0132/

At the moment, focus on code splitting and prefetch would be an overkill, please refer https://dassur.ma/things/less-snakeoil/

Just one recommendation would be to load the render-blocking CSS before the script file in the app js file. ( Refer: https://gtmetrix.com/reports/boxshadows.nakulrathore.com/6pkBfbeA )

By the way, I love the way you maintain your codebase.

Few recommendations:

• Some kind of CSS naming conventions like BEM (my favorite)(if upgraded to sass)
• Using rem instead of px unit to make the site more responsive and CSS variables.
• Typescript with React.