react-simple-chatbot icon indicating copy to clipboard operation
react-simple-chatbot copied to clipboard

Lighthouse audit improvements

Open BranonConor opened this issue 3 years ago • 3 comments

Hey there - huge fan of this package and wanted to make it better in a very small but mighty way. I'm using react-simple-chatbot in a work project and in doing Lighthouse Audits in Google Chrome nearing the end of the project, I noticed that there were some performance and accessibility issues flagged that were deep within the layers of the react-simple-chatbot package. Here are some of the suggestions that Google provided for the package:

  • Buttons need accessible description
  • Inputs lack labels for accessibility
  • Images lack explicit width and height attributes

Nothing crazy, BUT - in my project, the accessibility score is at 86. Removing this package in its current state bumps my score to a 97! So a pretty big jump. I know Lighthouse Audits aren't something to obsess over but these specific suggestions seemed both technically quite easy to fix and necessary from an accessibility standpoint (we are in the healthcare industry).

So I made the following changes:

  • Added a Label.jsx component (that is set to not appear in the UI) that wraps the input in the Chatbox.jsx rendering. Input was given an ID of "message", and the label has an attribute of "htmlFor: message".
  • Button was given a simple attribute of "aria-label: Send message" so that screen readers can give a more descriptive idea of the button and its purpose in an application.
  • The image of the Robot was giving the "does not have explicit width and height attributes" warning, so I simply went in an added width and height attributes for the intrinsic WxH of the image (150 x 150). It shouldn't change the UI but it should allow the browser to render enough space for it initially to minimize layout shifting.

I hope that is helpful and I hope my implementation is quality! I am new to styled components so hopefully I didn't mess that up. Thanks again for the awesome project and I'm looking forward to seeing if my contribution is worth merging.

Blessings, Branon

BranonConor avatar Jan 05 '21 23:01 BranonConor

Hey @LucasBassetti - do you still maintain this package? Looking forward to seeing if this pull request can help improve the accessibility of this package. Thanks man and cheers!

Branon

CharterXavi avatar May 12 '21 23:05 CharterXavi

Hey guys. Sorry but I'm not able to give attention to this project at the moment. Is someone interesting in maintaining it?

LucasBassetti avatar May 14 '21 15:05 LucasBassetti

@LucasBassetti no problem man I know you're probably quite busy! I'm very interested in maintaining it for you. Admittedly I'd need to do more digging around in the code to get a grasp on how you've built it but I'd be stoked to help out however you'd need it.

BranonConor avatar May 14 '21 21:05 BranonConor