Bugfix/issue 435

[AhmedHHamdy]

Description

Issue: When navigating the page using the keyboard, users are unable to easily distinguish whether a link is highlighted in the header section.

I fixed this issue by updating the focus ring on the links in the header section. Previously, the focus ring had a small width and was not easily visible. I increased the width of the focus ring and changed the color to black, making it more prominent and noticeable. I thoroughly tested the changes on multiple browsers, and the new focus ring now works effectively.

Chrome

Edge

Type of change

Please select everything applicable. Please, do not delete any lines.

• [x] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update
• [ ] This change requires an update to testing

Issue

• [x] Is this related to a specific issue? If so, please specify: fixes #435

Checklist:

• [x] This PR is up to date with the main branch, and merge conflicts have been resolved
• [x] I have executed npm run test and all tests have passed successfully or I have included details within my PR on the failure.
• [x] I have executed npm run lint and resolved any outstanding errors. Most issues can be solved by executing npm run format
• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings