Refractored Footer

[amrit1004]

feat(footer): enhance CustomFooter with TypeScript, accessibility, and performance improvements

Closes #284

This pull request enhances the CustomFooter component by introducing TypeScript interfaces, improving accessibility with aria-label attributes, optimizing performance with useMemo, and centralizing styles into a reusable object. The changes improve code maintainability, user experience, and consistency while addressing previous issues with duplicated styles and lack of type safety.

Changes

• Added TypeScript interfaces (FooterLink and FooterSection) for type safety and better code organization.
• Extracted styles into a styles object to eliminate duplication (e.g., Join button styles) and ensure consistency.
• Implemented useMemo for memoizing footerSections to optimize performance.
• Added aria-label attributes to social media links for improved accessibility.
• Maintained responsive design and keyboard accessibility for mobile expandable sections.

Flags

• Ensure the FOOTER_SECTION JSON file aligns with the new TypeScript interfaces; minor adjustments might be needed if the structure differs.
• Test the mobile expandable section with a keyboard to confirm accessibility is fully preserved.

Screenshots or Video

Related Issues

• Issue perf opt: code optimization for readability modularity with memoization and reducing redundancy #123

Author Checklist

• Ensure you provide a DCO sign-off for your commits using the --signoff option of git commit.
• Vital features and changes captured in unit and/or integration tests (Note: Add tests if required by the project).
• Commits messages follow AP format.
• Extend the documentation, if necessary (Note: Update if documentation exists).
• Merging to main from fork:foot.

[netlify]

✅ Deploy Preview for ap-template-playground ready!

Name	Link
🔨 Latest commit	2ee632f
🔍 Latest deploy log	https://app.netlify.com/sites/ap-template-playground/deploys/67d9a67de6e9530008aea95f
😎 Deploy Preview	https://deploy-preview-289--ap-template-playground.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[amrit1004]

Hey @DianaLease
I have closed the issue #284 that was created by me only. So pls look into it and if it is feasible pls look into this

[amrit1004]

Hey @DianaLease Pls look into this as it closes #291 issue and let me know is any problem Persists.
Thank you