Fixing anchor title for consistent behaviour (OWASP#1428)

* fixing anchor title for consistent behaviour

* Update code

---------

Co-authored-by: Arkadii Yakovets <[email protected]>

Author: shining-bluemoon-11

frontend/__tests__/unit/pages/About.test.tsx

@@ -252,7 +252,7 @@ describe('About Component', () => {
   test('renders roadmap correctly', async () => {
     render(<About />)
 
-    const roadmapSection = screen.getByText('Roadmap').closest('div')
+    const roadmapSection = screen.getByRole('heading', { name: 'Roadmap' }).closest('div')
     expect(roadmapSection).toBeInTheDocument()
 
     const roadmapItems = within(roadmapSection).getAllByRole('listitem')
@@ -262,7 +262,9 @@ describe('About Component', () => {
     expect(screen.getByText('Feature 2')).toBeInTheDocument()
     expect(screen.getByText('Feature 3')).toBeInTheDocument()
 
-    const links = within(roadmapSection).getAllByRole('link')
+    const links = within(roadmapSection)
+      .getAllByRole('link')
+      .filter((link) => link.getAttribute('href') !== '#roadmap')
     expect(links[0].getAttribute('href')).toBe('https://github.com/owasp/test/issues/1')
   })
 

frontend/src/app/about/page.tsx

@@ -16,6 +16,7 @@ import { GET_LEADER_DATA } from 'server/queries/userQueries'
 import { ProjectTypeGraphql } from 'types/project'
 import { aboutText, roadmap, technologies } from 'utils/aboutData'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
+import AnchorTitle from 'components/AnchorTitle'
 import AnimatedCounter from 'components/AnimatedCounter'
 import LoadingSpinner from 'components/LoadingSpinner'
 import Markdown from 'components/MarkdownWrapper'
@@ -75,7 +76,7 @@ const About = () => {
     <div className="min-h-screen p-8 text-gray-600 dark:bg-[#212529] dark:text-gray-300">
       <div className="mx-auto max-w-6xl">
         <h1 className="mb-6 mt-4 text-4xl font-bold">About</h1>
-        <SecondaryCard icon={faScroll} title="History">
+        <SecondaryCard icon={faScroll} title={<AnchorTitle title="History" />}>
           {aboutText.map((text) => (
             <div key={text} className="mb-4">
               <div key={text}>
@@ -85,7 +86,7 @@ const About = () => {
           ))}
         </SecondaryCard>
 
-        <SecondaryCard icon={faArrowUpRightFromSquare} title="Leaders">
+        <SecondaryCard icon={faArrowUpRightFromSquare} title={<AnchorTitle title="Leaders" />}>
           <div className="flex w-full flex-col items-center justify-around overflow-hidden md:flex-row">
             {Object.keys(leaders).map((username) => (
               <div key={username}>
@@ -104,7 +105,7 @@ const About = () => {
           />
         )}
 
-        <SecondaryCard icon={faTools} title="Technologies & Tools">
+        <SecondaryCard icon={faTools} title={<AnchorTitle title="Technologies & Tools" />}>
           <div className="w-full">
             <div className="grid w-full grid-cols-1 justify-center sm:grid-cols-2 lg:grid-cols-4 lg:pl-8">
               {technologies.map((tech) => (
@@ -137,7 +138,7 @@ const About = () => {
           </div>
         </SecondaryCard>
 
-        <SecondaryCard icon={faMapSigns} title="Roadmap">
+        <SecondaryCard icon={faMapSigns} title={<AnchorTitle title="Roadmap" />}>
           <ul>
             {roadmap.map((item) => (
               <li key={item.title} className="mb-4 flex flex-row items-center gap-2 pl-4 md:pl-6">

frontend/src/components/ToggleableList.tsx

@@ -26,8 +26,12 @@ const ToggleableList = ({
   return (
     <div className="rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800">
       <h2 className="mb-4 text-2xl font-semibold">
-        {icon && <FontAwesomeIcon icon={icon} className="mr-2 h-5 w-5" />}
-        {label}
+        <div className="flex items-center">
+          <div className="flex items-center space-x-2">
+            {icon && <FontAwesomeIcon icon={icon} className="mr-2 h-5 w-5" />}
+          </div>
+          <span>{label}</span>
+        </div>
       </h2>
       <div className="flex flex-wrap gap-2">
         {(showAll ? items : items.slice(0, limit)).map((item, index) => (