Issue #11 🎫: Accessibility issues

[ITurres]

Pull Request Summary for Issue #11 Completion

---

Overview:

• Issue [5pt] Accessibility issues found in portfolio #11.

Issue 11 is all about accessibility. Prior these changes the portfolio was not as accessible as it should be. The goal of these new changes is to make the portfolio more accesible to all users.
Things taken into account were:

• Semantics.
• Text Contrast.
• Links.
• Labels.
• Navbar toggle state, role and aria labels.
• Image alt attributes.
• Focus states.
• Keyboard navigation.
• Screen reader skipping unnecessary content/components.
• and more.

Apart from the accessibility improvements, some other changes were made to improve the code readability and maintainability.

Changes Made:

Added:

• n/a.

---

Modified:

• .gitignore

  • Added pr.md to the .gitignore file.

• .vscode/terminals.json

  • Removed auto commands at startup. This because it was causing an relatiely long startup time.

• /package.json and /package-lock.json

  • Updated @babel/core to ^7.24.0.

• /src/components/UI/ContactForm.tsx

  • Several changes were made to the ContactForm component to make it more accessible, provide a better user experience and to make the code more readable and maintainable.

    • Added labels to the form inputs.

    • The setSubmitButtonStyle function was removed and replaced with a useEffect hook to update the new local state showSubmitButton at the validateInput function, which is used to conditionally render the submit button as well as to update the submit button's style class.

    • The validateInput function was updated to now add the show class to the element (input) after this element label, i.e. next sibling x2.

      Before the layout was like this:
      input => input => input...
      
      Now the layout is like this:
      label => input => label => input...

      • So, the show class is still added to the next input but first it needs to skip the label of the following input.
      • It is indeed a bit more complex but it is a better approach to make the form more accessible and to provide the same user experience as before.

• /src/components/UI/FileTabsNavbar.tsx

  • Added aria label and role to the nav element.
  • All Links and anchor tags were updated to includen an aria-label attribute, and a title attribute. (Note: This title attribute was before in every React icon component.).

• /src/components/UI/LineCount.tsx

  • Moved the initialization of the lines constant after it's comments.
  • Made sure to clean up the window resize event listener when the component is unmounted.
  • Finally the whole component has an aria hidden attribute set to true to make sure it is not read by screen readers as it is not relevant, since it is merely a visual effect.

• /src/components/UI/Navbar.tsx

  • Added aria-label and role to the nav element.
  • A new local state isOpen was added to provide information to the aria expanded and aria label attributes.
  • All the aria label and title attribute values were updated to be more descriptive and to provide more information to the user.

• /src/components/animations/Drone.tsx and /src/components/animations/FloatingAstronaut.tsx

  • Added aria hidden attribute set to true to make sure it is not read by screen readers as it is not relevant, since it is merely a visual effect.

• /src/components/pages/AboutPage.tsx

  • Renamed the old AnimatedButton component to ExpertiseLinks and updated the reference to it.

• /src/styles/UI/ContactForm.scss

  • labels will have a display of none by default since it should only be visible to the screen reader.
  • Now the .send-email-icon i.e. the waving alien at form submit, will have a fade in effect.

• /src/styles/UI/Navbar.scss

  • Updated the navbar position to fixed to make sure it is always visible and accessible to the user.

• /src/styles/variables/_colors.scss

  • Updated the $light-gray color from #515151 to #7d7d7d to provide a better contrast with the off-black background.

Deleted/Renamed

• /src/components/UI/AnimatedButton.tsx => /src/components/UI/ExpertiseLinks.tsx

• /src/styles/UI/AnimatedButton.scss => /src/styles/UI/ExpertiseLinks.scss

  • Renamed the component file and component name to better reflect its purpose and content.
  • Renamed the stylesheet file to match the new component name and all its classes.

---

Impact:

The portfolio is now more accessible to all users. It is now more semantic, has better contrast, better labels, better focus states, better keyboard navigation, better screen reader support and more.
These changes will significantly improve the user experience for all users, especially for those who rely on assistive technologies.

Testing:

• n/a.

Related Issues:

• Closes [5pt] Accessibility issues found in portfolio #11.

Dependencies:

• n/a.

Additional Notes:

• The changes made in this branch have just been deployed, check the new SemVer Test|Deploy to gh-pages - v2.2.0 - Enhance and Fix global Accessibility issues.

---

[ITurres]

✅ Good for merge.