Improve accessibility support

Closes #104

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

ui/common/src/components/AcquisitionsTable.tsx

@@ -120,6 +120,7 @@ export const AcquisitionsTable = (props: Props) => {
             <button
               class={`btn btn-link btn-sm text-muted text-decoration-underline pe-0 ${CollapsedBtn}`}
               onClick={() => setCollapsed(!collapsed())}
+              aria-label={`Show ${collapsed() ? 'more' : 'less'} acquisitions`}
             >
               Show {collapsed() ? 'more' : 'less'}
             </button>

ui/common/src/components/BadgeModal.tsx

@@ -36,6 +36,7 @@ export const BadgeModal = (props: Props) => {
 
   return (
     <Modal
+      title="Badge"
       header="Item badge"
       onClose={props.onCloseModal}
       open={openStatus()}

ui/common/src/components/Box.tsx

@@ -6,6 +6,7 @@ interface Props {
   legend: string;
   class?: string;
   fillBgPercentage?: number;
+  description?: string;
 }
 
 const Highlighted = css`
@@ -64,7 +65,7 @@ export const Box = (props: Props) => {
         </style>
       </Show>
 
-      <div class={props.class || 'col'}>
+      <div class={props.class || 'col'} aria-description={props.description}>
         <div
           class={`position-relative text-center p-2 p-md-3 h-100 d-flex flex-column justify-content-center filledBox ${Highlighted}`}
           classList={{ [`filledBox filledBox-${randomId}`]: fillPercentage() > 0 }}

ui/common/src/components/ButtonCopyToClipboard.tsx

@@ -97,7 +97,7 @@ export const ButtonCopyToClipboard = (props: Props) => {
           }
         }}
         disabled={props.disabled}
-        aria-label={props.label || 'Copy to clipboard'}
+        aria-label={props.contentBtn || props.label || 'Copy to clipboard'}
       >
         <div class="d-flex flex-row align-items-center" aria-hidden="true">
           <Show when={!isUndefined(props.visibleBtnText) && props.visibleBtnText && props.contentBtn}>

ui/common/src/components/CollapsableText.tsx

@@ -67,7 +67,11 @@ export const CollapsableText = (props: Props) => {
         classList={{ [Truncate]: !collapsable() }}
         style={
           !collapsable()
-            ? { '-webkit-line-clamp': linesNumber(), 'max-height': `${LINE_HEIGHT * linesNumber()}px` }
+            ? {
+                '-webkit-line-clamp': linesNumber(),
+                'line-clamp': linesNumber(),
+                'max-height': `${LINE_HEIGHT * linesNumber()}px`,
+              }
             : {}
         }
       >
@@ -78,6 +82,7 @@ export const CollapsableText = (props: Props) => {
           <button
             class={`btn btn-sm btn-link fst-italic text-muted ${Btn}`}
             onClick={() => setCollapsable((prev) => !prev)}
+            aria-label="Show more"
           >
             Show more
           </button>

ui/common/src/components/ExternalLink.tsx

@@ -59,7 +59,7 @@ export const ExternalLink = (props: Props) => {
           }}
           aria-label={props.label || 'Open external link'}
           aria-hidden={props.ariaHidden}
-          tabIndex={-1}
+          tabIndex={0}
         >
           {getData()}
         </button>
@@ -77,7 +77,7 @@ export const ExternalLink = (props: Props) => {
           }}
           aria-label={props.label || 'Open external link'}
           aria-hidden={props.ariaHidden}
-          tabIndex={-1}
+          tabIndex={0}
         >
           {getData()}
         </a>

ui/common/src/components/FundingRoundsTable.tsx

@@ -123,6 +123,7 @@ export const FundingRoundsTable = (props: Props) => {
             <button
               class={`btn btn-link btn-sm text-muted text-decoration-underline pe-0 ${CollapsedBtn}`}
               onClick={() => setCollapsed(!collapsed())}
+              aria-label={`Show ${collapsed() ? 'more' : 'less'} funding rounds`}
             >
               Show {collapsed() ? 'more' : 'less'}
             </button>

ui/common/src/components/Image.tsx

@@ -6,12 +6,13 @@ import { SVGIconKind } from '../types/types';
 import { SVGIcon } from './SVGIcon';
 
 interface Props {
-  name: string;
+  name?: string;
   logo: string;
   class?: string;
   enableLazyLoad?: boolean;
   width?: string | number;
   height?: string | number;
+  ariaHidden?: boolean;
 }
 
 export const Image = (props: Props) => {
@@ -32,13 +33,14 @@ export const Image = (props: Props) => {
         <SVGIcon kind={SVGIconKind.NotImage} class={`opacity-25 ${props.class}`} />
       ) : (
         <img
-          alt={`${props.name} logo`}
+          alt={!isUndefined(props.name) ? `${props.name} logo` : ''}
           class={props.class}
           src={url()}
           onError={() => setError(true)}
           loading={!isUndefined(props.enableLazyLoad) && props.enableLazyLoad ? 'lazy' : undefined}
           width={props.width || 'auto'}
           height={props.height || 'auto'}
+          aria-hidden={props.ariaHidden || undefined}
         />
       )}
     </Show>

ui/common/src/components/ItemDropdown.tsx

@@ -58,6 +58,7 @@ export const ItemDropdown = (props: Props) => {
             e.stopPropagation();
             setVisibleDropdown(!visibleDropdown());
           }}
+          aria-label="Open dropdown"
         >
           <SVGIcon kind={SVGIconKind.ThreeBars} />
         </button>
@@ -73,6 +74,7 @@ export const ItemDropdown = (props: Props) => {
                 setVisibleDropdown(false);
                 setOpenStatus(true);
               }}
+              aria-label="Get badge"
             >
               Get badge
             </button>

ui/common/src/components/ItemModalContent.tsx

@@ -262,7 +262,7 @@ export const ItemModalContent = (props: Props) => {
       <div class="d-flex flex-column p-3">
         <div class="d-flex flex-row align-items-center">
           <div class={`d-flex align-items-center justify-content-center ${LogoWrapper}`}>
-            <Image name={itemInfo()!.name} class={`m-auto ${Logo}`} logo={itemInfo()!.logo} />
+            <Image class={`m-auto ${Logo}`} logo={itemInfo()!.logo} />
           </div>
 
           <div class={`d-flex flex-column justify-content-between ms-3 ${ItemInfo}`}>
@@ -624,6 +624,7 @@ export const ItemModalContent = (props: Props) => {
                     : '-'
                 }
                 legend="Funding"
+                description="Funding"
               />
 
               <Box
@@ -667,11 +668,16 @@ export const ItemModalContent = (props: Props) => {
                   </Switch>
                 }
                 legend="Employees"
+                description="Employees number"
               />
 
-              <Box value={itemInfo()!.crunchbase_data!.stock_exchange! || '-'} legend="Stock exchange" />
+              <Box
+                value={itemInfo()!.crunchbase_data!.stock_exchange! || '-'}
+                legend="Stock exchange"
+                description="Stock exchange"
+              />
 
-              <Box value={itemInfo()!.crunchbase_data!.ticker || '-'} legend="Ticker" />
+              <Box value={itemInfo()!.crunchbase_data!.ticker || '-'} legend="Ticker" description="Ticker" />
             </div>
 
             {/* Funding rounds */}

ui/common/src/components/ItemModalMobileContent.tsx

@@ -201,7 +201,7 @@ export const ItemModalMobileContent = (props: Props) => {
         <div class="d-flex flex-column">
           <div class="d-flex flex-row align-items-center justify-content-between">
             <div class={`d-flex align-items-center justify-content-center ${LogoWrapper}`}>
-              <Image name={itemInfo()!.name} class={`m-auto ${Logo}`} logo={itemInfo()!.logo} enableLazyLoad />
+              <Image class={`m-auto ${Logo}`} logo={itemInfo()!.logo} enableLazyLoad />
             </div>
 
             <div class={`p-3 ${ItemInfo}`}>
@@ -404,6 +404,7 @@ export const ItemModalMobileContent = (props: Props) => {
                   : '-'
               }
               legend="Funding"
+              description="Funding"
             />
 
             <Box
@@ -448,11 +449,22 @@ export const ItemModalMobileContent = (props: Props) => {
                 </Switch>
               }
               legend="Employees"
+              description="Employees number"
             />
 
-            <Box class="col-6" value={itemInfo()!.crunchbase_data!.stock_exchange! || '-'} legend="Stock exchange" />
+            <Box
+              class="col-6"
+              value={itemInfo()!.crunchbase_data!.stock_exchange! || '-'}
+              legend="Stock exchange"
+              description="Stock exchange"
+            />
 
-            <Box class="col-6" value={itemInfo()!.crunchbase_data!.ticker || '-'} legend="Ticker" />
+            <Box
+              class="col-6"
+              value={itemInfo()!.crunchbase_data!.ticker || '-'}
+              legend="Ticker"
+              description="Ticker"
+            />
           </div>
 
           {/* Funding rounds */}

ui/common/src/components/LanguagesStats.tsx

@@ -39,6 +39,7 @@ export const LanguagesStats = (props: Props) => {
               value={`${Number.isInteger(value()) ? value() : value().toFixed(2)}%`}
               legend={lang}
               fillBgPercentage={value()}
+              description={`${lang} language percentage`}
             />
           );
         }}

ui/common/src/components/Modal.tsx

@@ -8,6 +8,7 @@ import { SVGIconKind } from '../types/types';
 import { SVGIcon } from './SVGIcon';
 
 interface Props {
+  title: string;
   open: boolean;
   header?: string | JSXElement;
   headerClass?: string;
@@ -141,9 +142,17 @@ export const Modal = (props: Props) => {
         <div class={`modal-backdrop ${ActiveBackdrop}`} />
       </Show>
 
-      <div class={`modal d-block ${ModalClass} ${Active}`} role="dialog" aria-modal={true}>
+      <div
+        class={`modal d-block ${ModalClass} ${Active}`}
+        role="dialog"
+        tabIndex={-1}
+        aria-label={`${props.title} modal`}
+        aria-modal={true}
+        aria-hidden={true}
+      >
         <div
           ref={setRef}
+          role="document"
           class={`modal-dialog modal-${props.size || 'lg'} ${ModalDialog}`}
           classList={{
             'modal-dialog-centered modal-dialog-scrollable': isUndefined(props.noScrollable) || !props.noScrollable,

ui/common/src/components/ParentProject.tsx

@@ -49,12 +49,14 @@ const Legend = css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   word-wrap: normal;
   max-height: 38px;
   line-height: 1.15rem;
 
   @media only screen and (max-width: 991.98px) {
     -webkit-line-clamp: 3;
+    line-clamp: 3;
     max-height: 57px;
   }
 `;

ui/common/src/components/RepositoriesSection.tsx

@@ -142,24 +142,32 @@ const RepositoryInfo = (props: RepoProps) => {
       </div>
       <Show when={!isUndefined(props.repository.github_data)}>
         <div class="row g-4 my-0 mb-2 justify-content-center justify-md-content-start">
-          <Box class={props.boxClass} value={prettifyNumber(props.repository.github_data!.stars, 1)} legend="Stars" />
+          <Box
+            class={props.boxClass}
+            value={prettifyNumber(props.repository.github_data!.stars, 1)}
+            legend="Stars"
+            description="Stars number"
+          />
 
           <Box
             class={props.boxClass}
             value={prettifyNumber(props.repository.github_data!.contributors.count)}
             legend="Contributors"
+            description="Contributors number"
           />
 
           <Box
             class={props.boxClass}
             value={formatDate(props.repository.github_data!.first_commit.ts)}
             legend="First commit"
+            description="First commit date"
           />
 
           <Box
             class={props.boxClass}
             value={formatDate(props.repository.github_data!.latest_commit.ts)}
             legend="Latest commit"
+            description="Latest commit date"
           />
 
           <Box
@@ -170,6 +178,7 @@ const RepositoryInfo = (props: RepoProps) => {
                 : '-'
             }
             legend="Latest release"
+            description="Latest release date"
           />
         </div>
 
@@ -217,12 +226,11 @@ export const RepositoriesSection = (props: Props) => {
     <Show when={repositoriesList().length > 0}>
       <div class={`position-relative ${props.class}`}>
         <div class={` ${props.titleClass}`}>Repositories</div>
-
         <select
           id="repo-select"
           class={`form-select form-select-md border-0 rounded-0 my-3 ${Select}`}
           value={selectedRepo() ? selectedRepo()!.url : undefined}
-          aria-label="Repository select"
+          aria-label="Repositories select"
           onChange={(e) => {
             const repo = repositoriesList().find((r) => r.url === e.currentTarget.value);
             setSelectedRepo(repo);