Hacktoberfest #5: Mozilla Add-ons Front-end

My fifth contribution for Hacktoberfest was done in Mozilla add-ons front-end project.

Addons.mozilla.org (AMO), is Mozilla’s official site for discovering and installing add-ons for the Firefox browser. Add-ons help you modify and personalize your browsing experience by adding new features to Firefox, enhancing your interactions with Web content, and changing the way your browser looks. (Retrieved AMO website)

Add-ons, also called extensions, have their own page with a description, rating, downloads stats, screenshots:

I came across an issue that required to remove outline from Rating stars when selected on Chrome.

Here is a screenshot of how it used to work before I came to the project:

It is a default behaviour for Chrome. As I worked with front-end a lot, I fixed this problem so many times by adding the following line to CSS:

outline: none;

So I added this line to the RatingStar component’s styles inside the project, created a Pull Request, but the collaborator kindly let me know that the solution is supposed to be a little bit different:

&:not(.focus-visible) {
  outline: none;
}

This should be fixed in this way because the outline should be applied when the focus is given by the mouse, but not when it is given by the keyboard;

So I edited my code again, and my Pull Request was merged 🎉

It was such a great experience contributing to this project because community is very nice there. I felt welcomed there, and I think it’s very important for “outside” contributors. Also, I was listed on Mozilla’s Recognition page, and I was vouched a Mozillian account 🦊👍