feat(client): improve card accessibility (#49566)

Co-authored-by: Bruce B <bbsmooth@gmail.com>
Co-authored-by: Co-authored-by: Bruce B <bbsmooth@gmail.com>

client/src/components/profile/components/portfolio.css

@@ -23,6 +23,10 @@
   margin-block: 1em;
 }
 
+#link-icon {
+  margin-inline-start: 1em;
+}
+
 .portfolio-container a {
   display: flex;
   align-items: center;
@@ -57,22 +61,13 @@
 
 .portfolio-container p {
   display: -webkit-box;
-  -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
   grid-column: 1/ -1;
   grid-row: 3;
 }
 
-#link-icon {
-  margin-left: 1rem;
-}
-
 @media (max-width: 994px) {
-  .portfolio-container p {
-    -webkit-line-clamp: 10;
-  }
-
   .portfolio-screen-shot {
     max-height: 300px;
   }

client/src/components/profile/components/portfolio.tsx

@@ -22,16 +22,18 @@ function Portfolio({ portfolio = [] }: PortfolioProps): JSX.Element | null {
       {portfolio.map(({ title, url, image, description, id }) => (
         <div className='portfolio-container' key={id}>
           <h3>{title}</h3>
-          <a href={url} rel='nofollow noopener noreferrer'>
+          <p>{description}</p>
+          <a href={url} rel='nofollow noopener noreferrer' target='_blank'>
             {t('buttons.view')}
-            <span className='sr-only'>{title}</span>
+            <span className='sr-only'>
+              {title}, {t('aria.opens-new-window')}
+            </span>
             <FontAwesomeIcon id='link-icon' icon={faArrowUpRightFromSquare} />
           </a>
 
           {image && (
             <img alt='' className='portfolio-screen-shot' src={image} />
           )}
-          <p>{description}</p>
         </div>
       ))}
       <hr />