From 10be062a2c00ed80935f5a255adebd38a617a2a3 Mon Sep 17 00:00:00 2001
From: Cintia Sanchez Garcia <cynthiasg@icloud.com>
Date: Fri, 26 Jul 2024 08:55:24 +0200
Subject: [PATCH] Improve accessibility support

Closes #104

Signed-off-by: Cintia Sanchez Garcia <cynthiasg@icloud.com>
---
 .../src/components/AcquisitionsTable.tsx      |  1 +
 ui/common/src/components/BadgeModal.tsx       |  1 +
 ui/common/src/components/Box.tsx              |  3 +-
 .../src/components/ButtonCopyToClipboard.tsx  |  2 +-
 ui/common/src/components/CollapsableText.tsx  |  7 +-
 ui/common/src/components/ExternalLink.tsx     |  4 +-
 .../src/components/FundingRoundsTable.tsx     |  1 +
 ui/common/src/components/Image.tsx            |  6 +-
 ui/common/src/components/ItemDropdown.tsx     |  2 +
 ui/common/src/components/ItemModalContent.tsx | 12 +++-
 .../src/components/ItemModalMobileContent.tsx | 18 ++++-
 ui/common/src/components/LanguagesStats.tsx   |  1 +
 ui/common/src/components/Modal.tsx            | 11 ++-
 ui/common/src/components/ParentProject.tsx    |  2 +
 .../src/components/RepositoriesSection.tsx    | 14 +++-
 ui/common/src/components/SVGIcon.tsx          | 69 +++++++++++++++++++
 ui/common/src/components/Tabs.tsx             |  2 +-
 ui/embed-item/src/common/ItemModal.tsx        |  2 +-
 ui/embed/src/common/CardItem.tsx              |  1 +
 ui/embed/src/common/ExternalLink.tsx          |  2 +-
 ui/embed/src/common/GridItem.tsx              |  1 +
 ui/embed/src/common/Loading.tsx               |  2 +-
 ui/embed/src/common/SVGIcon.tsx               |  2 +
 .../src/layout/common/ActiveFiltersList.tsx   |  1 +
 .../src/layout/common/ButtonToTopScroll.tsx   |  1 +
 ui/webapp/src/layout/common/Checkbox.tsx      | 67 +++++++++---------
 .../src/layout/common/DownloadDropdown.tsx    |  5 ++
 ui/webapp/src/layout/common/FiltersInLine.tsx |  2 +-
 .../src/layout/common/FullScreenModal.tsx     | 10 ++-
 ui/webapp/src/layout/common/Searchbar.tsx     |  8 ++-
 ui/webapp/src/layout/common/Section.tsx       |  1 +
 ui/webapp/src/layout/common/Sidebar.tsx       |  2 +-
 .../src/layout/common/itemModal/index.tsx     |  1 +
 .../src/layout/common/zoomModal/index.tsx     |  1 +
 .../src/layout/explore/card/Card.module.css   |  3 +-
 ui/webapp/src/layout/explore/card/Card.tsx    |  5 +-
 ui/webapp/src/layout/explore/card/Content.tsx |  6 +-
 ui/webapp/src/layout/explore/card/Menu.tsx    |  1 +
 .../explore/filters/SearchbarSection.tsx      |  2 +
 .../src/layout/explore/filters/index.tsx      | 34 +++++----
 ui/webapp/src/layout/explore/grid/Grid.tsx    |  6 +-
 .../src/layout/explore/grid/GridItem.tsx      |  6 +-
 ui/webapp/src/layout/explore/index.tsx        | 14 ++--
 .../src/layout/explore/mobile/Card.module.css |  3 +-
 ui/webapp/src/layout/explore/mobile/Card.tsx  |  4 +-
 .../src/layout/explore/mobile/MobileGrid.tsx  | 48 +++++++------
 .../src/layout/finances/MobileFilters.tsx     |  1 +
 ui/webapp/src/layout/finances/index.tsx       |  3 +-
 ui/webapp/src/layout/games/Content.tsx        | 33 +++++++--
 ui/webapp/src/layout/guide/Guide.module.css   |  7 +-
 .../src/layout/guide/SubcategoryGrid.tsx      |  6 +-
 ui/webapp/src/layout/guide/ToC.tsx            |  1 +
 ui/webapp/src/layout/logos/index.tsx          |  5 +-
 .../src/layout/navigation/EmbedModal.tsx      | 26 ++++---
 ui/webapp/src/layout/navigation/Footer.tsx    |  1 +
 ui/webapp/src/layout/navigation/Header.tsx    |  7 +-
 .../src/layout/navigation/MobileDropdown.tsx  |  1 +
 .../src/layout/navigation/MobileHeader.tsx    |  7 +-
 ui/webapp/src/layout/notFound/index.tsx       |  6 +-
 .../src/layout/projects/MobileFilters.tsx     |  1 +
 ui/webapp/src/layout/projects/index.tsx       |  3 +-
 ui/webapp/src/layout/stats/Box.module.css     |  4 +-
 ui/webapp/src/layout/stats/Box.tsx            |  6 +-
 ui/webapp/src/layout/stats/ChartsGroup.tsx    |  2 +-
 .../src/layout/stats/CollapsableTable.tsx     |  7 +-
 ui/webapp/src/layout/stats/Content.tsx        | 52 ++++++++++----
 ui/webapp/src/layout/stats/HeatMapChart.tsx   |  2 +-
 .../src/layout/stats/HorizontalBarChart.tsx   |  2 +-
 .../src/layout/stats/TimestampLineChart.tsx   |  2 +-
 .../src/layout/stats/VerticalBarChart.tsx     |  2 +-
 .../upcomingEvents/UpcomingEvents.module.css  |  9 +--
 ui/webapp/src/layout/upcomingEvents/index.tsx |  7 +-
 ui/webapp/yarn.lock                           | 16 ++---
 73 files changed, 439 insertions(+), 177 deletions(-)

diff --git a/ui/common/src/components/AcquisitionsTable.tsx b/ui/common/src/components/AcquisitionsTable.tsx
index 6d9c47e3..e147c822 100644
--- a/ui/common/src/components/AcquisitionsTable.tsx
+++ b/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>
diff --git a/ui/common/src/components/BadgeModal.tsx b/ui/common/src/components/BadgeModal.tsx
index c9f09c0d..966e6b7d 100644
--- a/ui/common/src/components/BadgeModal.tsx
+++ b/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()}
diff --git a/ui/common/src/components/Box.tsx b/ui/common/src/components/Box.tsx
index 19b5b172..7ca63873 100644
--- a/ui/common/src/components/Box.tsx
+++ b/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 }}
diff --git a/ui/common/src/components/ButtonCopyToClipboard.tsx b/ui/common/src/components/ButtonCopyToClipboard.tsx
index df253cd5..4ecc7655 100644
--- a/ui/common/src/components/ButtonCopyToClipboard.tsx
+++ b/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}>
diff --git a/ui/common/src/components/CollapsableText.tsx b/ui/common/src/components/CollapsableText.tsx
index 7409fc11..c45e9753 100644
--- a/ui/common/src/components/CollapsableText.tsx
+++ b/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>
diff --git a/ui/common/src/components/ExternalLink.tsx b/ui/common/src/components/ExternalLink.tsx
index 917e9d7b..e95def22 100644
--- a/ui/common/src/components/ExternalLink.tsx
+++ b/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>
diff --git a/ui/common/src/components/FundingRoundsTable.tsx b/ui/common/src/components/FundingRoundsTable.tsx
index cf953f0a..0c417075 100644
--- a/ui/common/src/components/FundingRoundsTable.tsx
+++ b/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>
diff --git a/ui/common/src/components/Image.tsx b/ui/common/src/components/Image.tsx
index 3260ec92..2e0f9116 100644
--- a/ui/common/src/components/Image.tsx
+++ b/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>
diff --git a/ui/common/src/components/ItemDropdown.tsx b/ui/common/src/components/ItemDropdown.tsx
index 116abad6..01ebaeeb 100644
--- a/ui/common/src/components/ItemDropdown.tsx
+++ b/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>
diff --git a/ui/common/src/components/ItemModalContent.tsx b/ui/common/src/components/ItemModalContent.tsx
index 864337e2..5cab87a6 100644
--- a/ui/common/src/components/ItemModalContent.tsx
+++ b/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 */}
diff --git a/ui/common/src/components/ItemModalMobileContent.tsx b/ui/common/src/components/ItemModalMobileContent.tsx
index a27694ba..694c79c9 100644
--- a/ui/common/src/components/ItemModalMobileContent.tsx
+++ b/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 */}
diff --git a/ui/common/src/components/LanguagesStats.tsx b/ui/common/src/components/LanguagesStats.tsx
index 561b1ea5..e64dea14 100644
--- a/ui/common/src/components/LanguagesStats.tsx
+++ b/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`}
             />
           );
         }}
diff --git a/ui/common/src/components/Modal.tsx b/ui/common/src/components/Modal.tsx
index 91901ce8..57bb3e83 100644
--- a/ui/common/src/components/Modal.tsx
+++ b/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,
diff --git a/ui/common/src/components/ParentProject.tsx b/ui/common/src/components/ParentProject.tsx
index 0cb1c5e9..4ead6f0e 100644
--- a/ui/common/src/components/ParentProject.tsx
+++ b/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;
   }
 `;
diff --git a/ui/common/src/components/RepositoriesSection.tsx b/ui/common/src/components/RepositoriesSection.tsx
index e729be32..9dfeeda0 100644
--- a/ui/common/src/components/RepositoriesSection.tsx
+++ b/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);
diff --git a/ui/common/src/components/SVGIcon.tsx b/ui/common/src/components/SVGIcon.tsx
index 611a8144..59b893ec 100644
--- a/ui/common/src/components/SVGIcon.tsx
+++ b/ui/common/src/components/SVGIcon.tsx
@@ -23,6 +23,7 @@ const ArrowRight = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Arrow right icon</title>
     <path d="M10.707 17.707 16.414 12l-5.707-5.707-1.414 1.414L13.586 12l-4.293 4.293z" />
   </svg>
 );
@@ -38,6 +39,7 @@ const ArrowTop = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Arrow top icon</title>
     <path d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z" />
   </svg>
 );
@@ -53,6 +55,7 @@ const Artwork = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Artwork icon</title>
     <path
       fill="none"
       stroke="inherit"
@@ -73,6 +76,7 @@ const Blog = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Blog icon</title>
     <path d="M192 32c0 17.7 14.3 32 32 32c123.7 0 224 100.3 224 224c0 17.7 14.3 32 32 32s32-14.3 32-32C512 128.9 383.1 0 224 0c-17.7 0-32 14.3-32 32zm0 96c0 17.7 14.3 32 32 32c70.7 0 128 57.3 128 128c0 17.7 14.3 32 32 32s32-14.3 32-32c0-106-86-192-192-192c-17.7 0-32 14.3-32 32zM96 144c0-26.5-21.5-48-48-48S0 117.5 0 144V368c0 79.5 64.5 144 144 144s144-64.5 144-144s-64.5-144-144-144H128v96h16c26.5 0 48 21.5 48 48s-21.5 48-48 48s-48-21.5-48-48V144z" />
   </svg>
 );
@@ -88,6 +92,7 @@ const Book = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Book icon</title>
     <path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z" />
   </svg>
 );
@@ -103,6 +108,7 @@ const Calendar = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Calendar icon</title>
     <path d="M6.75 0a.75.75 0 0 1 .75.75V3h9V.75a.75.75 0 0 1 1.5 0V3h2.75c.966 0 1.75.784 1.75 1.75v16a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75v-16C1.5 3.784 2.284 3 3.25 3H6V.75A.75.75 0 0 1 6.75 0ZM21 9.5H3v11.25c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25Zm-17.75-5a.25.25 0 0 0-.25.25V8h18V4.75a.25.25 0 0 0-.25-.25Z" />
   </svg>
 );
@@ -118,6 +124,7 @@ const CaretDown = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Caret down icon</title>
     <path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z" />
   </svg>
 );
@@ -133,6 +140,7 @@ const CaretLeft = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Caret left icon</title>
     <path d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z" />
   </svg>
 );
@@ -148,6 +156,7 @@ const CaretRight = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Caret right icon</title>
     <path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z" />
   </svg>
 );
@@ -163,6 +172,7 @@ const CaretUp = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Caret up icon</title>
     <path d="M216.49,168.49a12,12,0,0,1-17,0L128,97,56.49,168.49a12,12,0,0,1-17-17l80-80a12,12,0,0,1,17,0l80,80A12,12,0,0,1,216.49,168.49Z" />
   </svg>
 );
@@ -178,6 +188,7 @@ const Check = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Check icon</title>
     <path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" />
   </svg>
 );
@@ -193,6 +204,7 @@ const Clear = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Clear icon</title>
     <path d="M400 145.49L366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49z" />
   </svg>
 );
@@ -208,6 +220,7 @@ const ClearCircle = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Clear icon</title>
     <path d="M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" />
     <path d="M360 330.9L330.9 360 256 285.1 181.1 360 152 330.9l74.9-74.9-74.9-74.9 29.1-29.1 74.9 74.9 74.9-74.9 29.1 29.1-74.9 74.9z" />
   </svg>
@@ -225,6 +238,7 @@ const Close = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Close icon</title>
     <path d="M799.855 166.312c.023.007.043.018.084.059l57.69 57.69c.041.041.052.06.059.084a.118.118 0 0 1 0 .069c-.007.023-.018.042-.059.083L569.926 512l287.703 287.703c.041.04.052.06.059.083a.118.118 0 0 1 0 .07c-.007.022-.018.042-.059.083l-57.69 57.69c-.041.041-.06.052-.084.059a.118.118 0 0 1-.069 0c-.023-.007-.042-.018-.083-.059L512 569.926 224.297 857.629c-.04.041-.06.052-.083.059a.118.118 0 0 1-.07 0c-.022-.007-.042-.018-.083-.059l-57.69-57.69c-.041-.041-.052-.06-.059-.084a.118.118 0 0 1 0-.069c.007-.023.018-.042.059-.083L454.073 512 166.371 224.297c-.041-.04-.052-.06-.059-.083a.118.118 0 0 1 0-.07c.007-.022.018-.042.059-.083l57.69-57.69c.041-.041.06-.052.084-.059a.118.118 0 0 1 .069 0c.023.007.042.018.083.059L512 454.073l287.703-287.702c.04-.041.06-.052.083-.059a.118.118 0 0 1 .07 0Z" />
   </svg>
 );
@@ -240,6 +254,7 @@ const Cocoapods = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Cocoapods icon</title>
     <path d="M8.812 17.176c-2.968 0-4.956-2.308-4.956-5.176 0-2.705 1.776-5.176 4.91-5.176 2.407 0 3.856 1.445 4.207 3.357h3.95C16.479 6.427 13.51 3.42 8.718 3.42 3.131 3.42 0 7.523 0 12c0 4.57 3.295 8.58 8.766 8.58 4.58 0 7.549-2.822 8.18-6.272h-4.02c-.467 1.609-1.916 2.868-4.114 2.868zM24 12.068l-3.466 8.055-2.38-1.022 2.992-7.055-3.01-7.096 2.433-1.042Z" />
   </svg>
 );
@@ -257,6 +272,7 @@ const Copy = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Copy icon</title>
     <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
   </svg>
@@ -275,6 +291,7 @@ const Crunchbase = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Crunchbase icon</title>
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
     <path d="M10.414 11.586a2 2 0 1 0 0 2.828" />
@@ -294,6 +311,7 @@ const CSV = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>CSV icon</title>
     <path d="M208,88H152V32Z" opacity="0.2" />
     <path d="M48,180c0,11,7.18,20,16,20a14.24,14.24,0,0,0,10.22-4.66A8,8,0,0,1,85.78,206.4,30.06,30.06,0,0,1,64,216c-17.65,0-32-16.15-32-36s14.35-36,32-36a30.06,30.06,0,0,1,21.78,9.6,8,8,0,0,1-11.56,11.06A14.24,14.24,0,0,0,64,160C55.18,160,48,169,48,180Zm79.6-8.69c-4-1.16-8.14-2.35-10.45-3.84-1.25-.81-1.23-1-1.12-1.9a4.57,4.57,0,0,1,2-3.67c4.6-3.12,15.34-1.73,19.83-.56A8,8,0,0,0,142,145.86c-2.12-.55-21-5.22-32.84,2.76a20.58,20.58,0,0,0-9,14.95c-2,15.88,13.65,20.41,23,23.11,12.06,3.49,13.12,4.92,12.78,7.59-.31,2.41-1.26,3.34-2.14,3.93-4.6,3.06-15.17,1.56-19.55.36A8,8,0,0,0,109.94,214a61.34,61.34,0,0,0,15.19,2c5.82,0,12.3-1,17.49-4.46a20.82,20.82,0,0,0,9.19-15.23C154,179,137.49,174.17,127.6,171.31Zm83.09-26.84a8,8,0,0,0-10.23,4.84L188,184.21l-12.47-34.9a8,8,0,0,0-15.07,5.38l20,56a8,8,0,0,0,15.07,0l20-56A8,8,0,0,0,210.69,144.47ZM216,88v24a8,8,0,0,1-16,0V96H152a8,8,0,0,1-8-8V40H56v72a8,8,0,0,1-16,0V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88Zm-27.31-8L160,51.31V80Z" />
   </svg>
@@ -310,6 +328,7 @@ const Discord = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Discord icon</title>
     <path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z" />
   </svg>
 );
@@ -325,6 +344,7 @@ const Discussions = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Discussions icon</title>
     <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 14.25 14H8.061l-2.574 2.573A1.458 1.458 0 0 1 3 15.543V14H1.75A1.75 1.75 0 0 1 0 12.25v-9.5C0 1.784.784 1 1.75 1ZM1.5 2.75v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25H1.75a.25.25 0 0 0-.25.25Z" />
     <path d="M22.5 8.75a.25.25 0 0 0-.25-.25h-3.5a.75.75 0 0 1 0-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0 1 22.25 20H21v1.543a1.457 1.457 0 0 1-2.487 1.03L15.939 20H10.75A1.75 1.75 0 0 1 9 18.25v-1.465a.75.75 0 0 1 1.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 0 1 .53.22l2.72 2.72v-2.19a.75.75 0 0 1 .75-.75h2a.25.25 0 0 0 .25-.25v-9.5Z" />
   </svg>
@@ -341,6 +361,7 @@ const Docker = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Docker icon</title>
     <path d="M349.9 236.3h-66.1v-59.4h66.1v59.4zm0-204.3h-66.1v60.7h66.1V32zm78.2 144.8H362v59.4h66.1v-59.4zm-156.3-72.1h-66.1v60.1h66.1v-60.1zm78.1 0h-66.1v60.1h66.1v-60.1zm276.8 100c-14.4-9.7-47.6-13.2-73.1-8.4-3.3-24-16.7-44.9-41.1-63.7l-14-9.3-9.3 14c-18.4 27.8-23.4 73.6-3.7 103.8-8.7 4.7-25.8 11.1-48.4 10.7H2.4c-8.7 50.8 5.8 116.8 44 162.1 37.1 43.9 92.7 66.2 165.4 66.2 157.4 0 273.9-72.5 328.4-204.2 21.4.4 67.6.1 91.3-45.2 1.5-2.5 6.6-13.2 8.5-17.1l-13.3-8.9zm-511.1-27.9h-66v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm78.1 0h-66.1v59.4h66.1v-59.4zm-78.1-72.1h-66.1v60.1h66.1v-60.1z" />
   </svg>
 );
@@ -356,6 +377,7 @@ const Documentation = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Documentation icon</title>
     <path d="M84 480H28a12 12 0 01-12-12V92a12 12 0 0112-12h56a12 12 0 0112 12v376a12 12 0 01-12 12zm156-272v-52a12 12 0 00-12-12H124a12 12 0 00-12 12v52zM112 416v52a12 12 0 0012 12h104a12 12 0 0012-12v-52zm0-176h128v144H112zm228 240h-72a12 12 0 01-12-12V44a12 12 0 0112-12h72a12 12 0 0112 12v424a12 12 0 01-12 12zm29-379.3l30 367.83a12 12 0 0013.45 10.92l72.16-9a12 12 0 0010.47-12.9L465 91.21a12 12 0 00-13.2-10.94l-72.13 7.51A12 12 0 00369 100.7z" />
   </svg>
 );
@@ -373,6 +395,7 @@ const Download = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Download icon</title>
     <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
     <polyline points="7 10 12 15 17 10" />
     <line x1="12" y1="15" x2="12" y2="3" />
@@ -391,6 +414,7 @@ const Embed = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Embed icon</title>
     <path
       stroke-linecap="round"
       stroke-linejoin="round"
@@ -410,6 +434,7 @@ const Erlang = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Erlang icon</title>
     <path d="M8.859 7.889c.154-1.863 1.623-3.115 3.344-3.119 1.734.004 2.986 1.256 3.029 3.119zm12.11 11.707c.802-.86 1.52-1.872 2.172-3.03l-3.616-1.807c-1.27 2.064-3.127 3.965-5.694 3.977-3.738-.012-5.206-3.208-5.198-7.322h13.966c.019-.464.019-.68 0-.904.091-2.447-.558-4.504-1.737-6.106l-.007.005H24v15.186h-3.039zm-17.206-.001C1.901 17.62.811 14.894.813 11.64c-.002-2.877.902-5.35 2.456-7.232H0v15.187h3.761Z" />
   </svg>
 );
@@ -427,6 +452,7 @@ const ExternalLink = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>External link icon</title>
     <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
     <polyline points="15 3 21 3 21 9" />
     <line x1="10" y1="14" x2="21" y2="3" />
@@ -444,6 +470,7 @@ const Facebook = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>X icon</title>
     <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-92.4 233.5h-63.9c-50.1 0-59.8 23.8-59.8 58.8v77.1h119.6l-15.6 120.7h-104V912H539.2V602.2H434.9V481.4h104.3v-89c0-103.3 63.1-159.6 155.3-159.6 44.2 0 82.1 3.3 93.2 4.8v107.9z" />
   </svg>
 );
@@ -459,6 +486,7 @@ const Filters = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Filters icon</title>
     <path d="M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z" />
   </svg>
 );
@@ -474,6 +502,7 @@ const Flickr = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Flickr icon</title>
     <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM144.5 319c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5zm159 0c-35.1 0-63.5-28.4-63.5-63.5s28.4-63.5 63.5-63.5 63.5 28.4 63.5 63.5-28.4 63.5-63.5 63.5z" />
   </svg>
 );
@@ -489,6 +518,7 @@ const Flutter = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Flutter icon</title>
     <path d="M14.314 0L2.3 12 6 15.7 21.684.013h-7.357zm.014 11.072L7.857 17.53l6.47 6.47H21.7l-6.46-6.468 6.46-6.46h-7.37z" />
   </svg>
 );
@@ -504,6 +534,7 @@ const Games = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Games icon</title>
     <path
       fill="none"
       stroke-width="2"
@@ -523,6 +554,7 @@ const GitHub = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>GitHub icon</title>
     <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
   </svg>
 );
@@ -538,6 +570,7 @@ const GitHubCircle = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>GitHub icon</title>
     <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm3.163 21.783h-.093a.513.513 0 0 1-.382-.14.513.513 0 0 1-.14-.372v-1.406c.006-.467.01-.94.01-1.416a3.693 3.693 0 0 0-.151-1.028 1.832 1.832 0 0 0-.542-.875 8.014 8.014 0 0 0 2.038-.471 4.051 4.051 0 0 0 1.466-.964c.407-.427.71-.943.885-1.506a6.77 6.77 0 0 0 .3-2.13 4.138 4.138 0 0 0-.26-1.476 3.892 3.892 0 0 0-.795-1.284 2.81 2.81 0 0 0 .162-.582c.033-.2.05-.402.05-.604 0-.26-.03-.52-.09-.773a5.309 5.309 0 0 0-.221-.763.293.293 0 0 0-.111-.02h-.11c-.23.002-.456.04-.674.111a5.34 5.34 0 0 0-.703.26 6.503 6.503 0 0 0-.661.343c-.215.127-.405.249-.573.362a9.578 9.578 0 0 0-5.143 0 13.507 13.507 0 0 0-.572-.362 6.022 6.022 0 0 0-.672-.342 4.516 4.516 0 0 0-.705-.261 2.203 2.203 0 0 0-.662-.111h-.11a.29.29 0 0 0-.11.02 5.844 5.844 0 0 0-.23.763c-.054.254-.08.513-.081.773 0 .202.017.404.051.604.033.199.086.394.16.582A3.888 3.888 0 0 0 5.702 10a4.142 4.142 0 0 0-.263 1.476 6.871 6.871 0 0 0 .292 2.12c.181.563.483 1.08.884 1.516.415.422.915.75 1.466.964.653.25 1.337.41 2.033.476a1.828 1.828 0 0 0-.452.633 2.99 2.99 0 0 0-.2.744 2.754 2.754 0 0 1-1.175.27 1.788 1.788 0 0 1-1.065-.3 2.904 2.904 0 0 1-.752-.824 3.1 3.1 0 0 0-.292-.382 2.693 2.693 0 0 0-.372-.343 1.841 1.841 0 0 0-.432-.24 1.2 1.2 0 0 0-.481-.101c-.04.001-.08.005-.12.01a.649.649 0 0 0-.162.02.408.408 0 0 0-.13.06.116.116 0 0 0-.06.1.33.33 0 0 0 .14.242c.093.074.17.131.232.171l.03.021c.133.103.261.214.382.333.112.098.213.209.3.33.09.119.168.246.231.381.073.134.15.288.231.463.188.474.522.875.954 1.145.453.243.961.364 1.476.351.174 0 .349-.01.522-.03.172-.028.343-.057.515-.091v1.743a.5.5 0 0 1-.533.521h-.062a10.286 10.286 0 1 1 6.324 0v.005z" />
   </svg>
 );
@@ -553,6 +586,7 @@ const Guide = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Guide icon</title>
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -572,6 +606,7 @@ const Instagram = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Instagram icon</title>
     <path d="M512 378.7c-73.4 0-133.3 59.9-133.3 133.3S438.6 645.3 512 645.3 645.3 585.4 645.3 512 585.4 378.7 512 378.7zM911.8 512c0-55.2.5-109.9-2.6-165-3.1-64-17.7-120.8-64.5-167.6-46.9-46.9-103.6-61.4-167.6-64.5-55.2-3.1-109.9-2.6-165-2.6-55.2 0-109.9-.5-165 2.6-64 3.1-120.8 17.7-167.6 64.5C132.6 226.3 118.1 283 115 347c-3.1 55.2-2.6 109.9-2.6 165s-.5 109.9 2.6 165c3.1 64 17.7 120.8 64.5 167.6 46.9 46.9 103.6 61.4 167.6 64.5 55.2 3.1 109.9 2.6 165 2.6 55.2 0 109.9.5 165-2.6 64-3.1 120.8-17.7 167.6-64.5 46.9-46.9 61.4-103.6 64.5-167.6 3.2-55.1 2.6-109.8 2.6-165zM512 717.1c-113.5 0-205.1-91.6-205.1-205.1S398.5 306.9 512 306.9 717.1 398.5 717.1 512 625.5 717.1 512 717.1zm213.5-370.7c-26.5 0-47.9-21.4-47.9-47.9s21.4-47.9 47.9-47.9 47.9 21.4 47.9 47.9a47.84 47.84 0 0 1-47.9 47.9z" />
   </svg>
 );
@@ -587,6 +622,7 @@ const Link = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Link icon</title>
     <path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z" />
   </svg>
 );
@@ -602,6 +638,7 @@ const LinkedIn = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>LinkedIn icon</title>
     <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
   </svg>
 );
@@ -617,6 +654,7 @@ const MagnifyingGlass = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Magnifying glass icon</title>
     <path d="M156,112a12,12,0,0,1-12,12H124v20a12,12,0,0,1-24,0V124H80a12,12,0,0,1,0-24h20V80a12,12,0,0,1,24,0v20h20A12,12,0,0,1,156,112Zm76.49,120.49a12,12,0,0,1-17,0L168,185a92.12,92.12,0,1,1,17-17l47.54,47.53A12,12,0,0,1,232.49,232.49ZM112,180a68,68,0,1,0-68-68A68.08,68.08,0,0,0,112,180Z" />
   </svg>
 );
@@ -632,6 +670,7 @@ const MailingList = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Mailing list icon</title>
     <path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0 0 68.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z" />
   </svg>
 );
@@ -647,6 +686,7 @@ const MavenApache = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Maven Apache icon</title>
     <path d="M4.237.001c-.312-.013-.665.072-.828.457-.158.374-.283 1.188-.34 2.276l1.223.591c-.02-.737.007-1.43.076-2.066-.026.299-.056.96.006 2.039.019.342.049.725.088 1.15.002.024.002.047.007.069a45.485 45.485 0 0 0 .309 2.412c.057.368.126.752.195 1.16l-.01.01c.014.01.015.018.014.023l.03.16c.03.162.06.328.093.494l.108.553.056.289a61.72 61.72 0 0 0 .457 2.068c.09.382.186.78.287 1.186.098.386.199.783.309 1.193.096.362.199.735.303 1.117.003.018.012.036.015.055a145.826 145.826 0 0 0 .34 1.185l.049.174c.078.261.158.533.242.805a4.2 4.2 0 0 1-.293-.135l-.19-.654c-.02-.077-.042-.148-.062-.225l-.002-.004-.004-.002c-.087-.3-.17-.607-.257-.916-.023-.087-.044-.173-.069-.263l-.314-1.178c-.1-.381-.194-.765-.29-1.154-.094-.39-.185-.78-.277-1.172-.093-.401-.181-.8-.265-1.203-.085-.396-.161-.798-.24-1.193a50.315 50.315 0 0 1-.211-1.17c-.004-.013-.006-.03-.01-.041l.004-.002c-.057-.386-.116-.77-.174-1.15a60.905 60.905 0 0 1-.154-1.204 27.447 27.447 0 0 1-.172-2.41l-1.22-.59c-.004.074-.01.15-.013.23-.012.294-.02.605-.023.93a45.3 45.3 0 0 0 .006 1.157c.009.37.025.755.045 1.148.02.336.042.675.07 1.022l.002.039.006.004c.003.023.007.05.006.076.033.368.064.739.107 1.115a34.493 34.493 0 0 0 .303 2.125c.01.064.024.131.035.195a23.418 23.418 0 0 0 .547 2.32c.07.237.14.464.21.68.063.182.13.365.194.545.155.422.327.832.512 1.232l.006.004a.318.318 0 0 0 .02.05c.225.485.475.95.755 1.395.01.013.02.033.03.047-.455-.183-1.259-.098-1.253-.097.83.288 1.557.64 2.016 1.175-.183.2-.523.352-.953.477.594.064.924-.039 1.045-.092-.31.26-.483.732-.635 1.24.35-.57.696-.949 1.033-1.094.078.258.162.524.244.788A147.532 147.532 0 0 0 5.157 24a.56.56 0 0 0 .43-.312c.13-.282.83-1.775 1.908-3.875.413 1.303.88 2.679 1.386 4.109a.494.494 0 0 0 .076-.465 103.735 103.735 0 0 1-1.308-3.945c.154-.299.316-.612.484-.932.125.04.255.094.389.155.203.186.352.491.482.84a1.515 1.515 0 0 0-.334-1.098c1.335.258 2.547.09 3.287-.81a3.97 3.97 0 0 0 .192-.258c-.325.304-.682.404-1.313.273.996-.281 1.523-.617 2.035-1.22.12-.145.244-.303.371-.48-.943.722-1.927.822-2.9.493l-.045-.018c.914.02 2.203-.474 3.092-1.189.41-.33.796-.73 1.17-1.21.28-.359.55-.76.82-1.216.234-.393.468-.824.7-1.293a2.83 2.83 0 0 1-.74.137l-.144.008c-.048.002-.093 0-.146.002.885-.198 1.5-.74 1.994-1.447-.24.117-.628.262-1.07.297-.058.006-.12.006-.182.006-.013-.002-.028 0-.047-.002.306-.078.574-.178.81-.309a3.363 3.363 0 0 0 .358-.236c.044-.037.088-.07.13-.106.099-.086.193-.18.28-.287.028-.034.056-.063.08-.098.036-.05.073-.098.104-.146a8.388 8.388 0 0 0 .51-.828c.015-.031.032-.057.046-.088.04-.084.08-.16.11-.227.042-.099.074-.179.092-.238a.515.515 0 0 1-.108.051c-.273.112-.727.187-1.086.201-.004 0-.008 0-.013.004h-.067c.72-.214 1.067-.45 1.422-.818a13.883 13.883 0 0 0 1.154-1.428c.264-.37.505-.738.692-1.072a6.5 6.5 0 0 0 .298-.592c.066-.157.122-.305.172-.45-.466.01-.986.011-1.48 0 .495.01 1.015.007 1.484-.005.5-1.485.063-2.262.063-2.262s-.526-1.212-1.4-.851c-.426.175-1.172.73-2.083 1.56l.514 1.45a17.561 17.561 0 0 1 1.703-1.602c-.257.22-.807.726-1.615 1.644-.256.29-.537.624-.844.997-.017.02-.035.038-.047.06a51.435 51.435 0 0 0-1.666 2.187c-.248.34-.498.704-.765 1.088h-.016c.002.02-.004.028-.01.032l-.101.152c-.104.155-.213.31-.318.47l-.352.534c-.061.09-.124.181-.186.277-.184.282-.367.573-.558.873a97.351 97.351 0 0 0-1.428 2.338 96.866 96.866 0 0 0-1.341 2.343c-.012.017-.02.04-.034.057a197.256 197.256 0 0 0-.668 1.223l-.097.181c-.17.318-.346.642-.52.979 0 .004-.005.008-.006.013-.026.048-.05.093-.072.141-.117.222-.218.424-.45.87a1.352 1.352 0 0 0-.233-.182l.345-.65c.047-.089.096-.177.143-.27l.04-.077.546-1.001.13-.233v-.006l-.001-.006c.169-.31.345-.62.52-.94.051-.087.102-.173.153-.265.224-.395.454-.794.684-1.197a91.685 91.685 0 0 1 2.135-3.504c.247-.386.503-.77.754-1.152.092-.138.182-.272.279-.41a72.9 72.9 0 0 1 .48-.701c.007-.012.019-.024.026-.037h.006c.26-.356.517-.713.773-1.065.278-.373.554-.735.83-1.09a31.075 31.075 0 0 1 1.777-2.075l-.515-1.446c-.06.057-.126.116-.192.178a32.37 32.37 0 0 0-.758.729c-.295.294-.597.606-.912.935a46.032 46.032 0 0 0-1.632 1.838l-.03.033.002.008c-.017.02-.033.044-.054.064-.266.323-.538.649-.801.985a39.105 39.105 0 0 0-1.445 1.95c-.043.06-.085.126-.127.186a26.458 26.458 0 0 0-1.403 2.303c-.13.247-.256.485-.37.715-.096.195-.187.395-.278.591-.21.463-.398.93-.566 1.399l.002.006a.36.36 0 0 0-.026.058c-.108.303-.203.608-.29.914-.14.174-.302.325-.483.46a3.505 3.505 0 0 0-.131-.153 5.148 5.148 0 0 0 .824-2.211 6.4 6.4 0 0 0-.016-1.488c-.046-.4-.126-.82-.238-1.274-.097-.393-.217-.81-.363-1.248-.091.185-.22.367-.379.545l-.086.094c-.029.032-.06.06-.092.094.434-.674.486-1.397.358-2.148a2.722 2.722 0 0 1-.49.85c-.033.038-.072.077-.11.116-.01.007-.019.018-.033.028.144-.24.25-.467.318-.698a1.29 1.29 0 0 0 .04-.146 2.85 2.85 0 0 0 .038-.225l.018-.146a2.11 2.11 0 0 0-.002-.354c-.003-.04-.004-.076-.01-.113-.01-.055-.016-.105-.027-.154a7.416 7.416 0 0 0-.193-.84c-.01-.028-.015-.056-.026-.084-.027-.079-.048-.149-.072-.209a2.1 2.1 0 0 0-.09-.209.455.455 0 0 1-.035.1c-.102.24-.34.57-.557.8-.003.003-.007.005-.007.01l-.04.043c.318-.58.39-.946.385-1.398a12.274 12.274 0 0 0-.16-1.615 10.68 10.68 0 0 0-.232-1.104 5.853 5.853 0 0 0-.18-.558 6.337 6.337 0 0 0-.172-.391 26.18 26.18 0 0 0 .002-.004C5.576.341 4.82.124 4.82.124s-.27-.11-.582-.123zm3.38 15.783l.032.082v.002c-.06.033-.116.067-.178.097-.012.004-.024.012-.039.018a2.41 2.41 0 0 0 .186-.2zm-.603 1.626c.13.136.25.242.354.32l.07.227a1.866 1.866 0 0 0-.246.053l-.03-.098c-.024-.084-.048-.17-.076-.257l-.021-.073zm.26.875a2.34 2.34 0 0 1 .271.01l.07.229a.778.778 0 0 1 .247-.004l-.326.627a127.643 127.643 0 0 1-.262-.862z" />
   </svg>
 );
@@ -662,6 +702,7 @@ const Menu = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Menu icon</title>
     <path
       d="M8 6C8 7.10457 7.10457 8 6 8C4.89543 8 4 7.10457 4 6C4 4.89543 4.89543 4 6 4C7.10457 4 8 4.89543 8 6Z"
       fill="currentColor"
@@ -712,6 +753,7 @@ const NotImage = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Not image icon</title>
     <path fill="none" d="M0 0h24v24H0z" />
     <path d="M21.9 21.9l-6.1-6.1-2.69-2.69L5 5 3.59 3.59 2.1 2.1.69 3.51 3 5.83V19c0 1.1.9 2 2 2h13.17l2.31 2.31 1.42-1.41zM5 19V7.83l6.84 6.84-.84 1.05L9 13l-3 4h8.17l2 2H5zM7.83 5l-2-2H19c1.1 0 2 .9 2 2v13.17l-2-2V5H7.83z" />
   </svg>
@@ -728,6 +770,7 @@ const NPM = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>NPM icon</title>
     <path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z" />
   </svg>
 );
@@ -743,6 +786,7 @@ const Nuget = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Nuget icon</title>
     <path d="M1.998.342a1.997 1.997 0 1 0 0 3.995 1.997 1.997 0 0 0 0-3.995zm9.18 4.34a6.156 6.156 0 0 0-6.153 6.155v6.667c0 3.4 2.756 6.154 6.154 6.154h6.667c3.4 0 6.154-2.755 6.154-6.154v-6.667a6.154 6.154 0 0 0-6.154-6.155zm-1.477 2.8a2.496 2.496 0 1 1 0 4.993 2.496 2.496 0 0 1 0-4.993zm7.968 6.16a3.996 3.996 0 1 1-.002 7.992 3.996 3.996 0 0 1 .002-7.992z" />
   </svg>
 );
@@ -758,6 +802,7 @@ const OpenssfBestPractices = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>OpenSSF best practices icon</title>
     <path
       fill-rule="evenodd"
       d="M10 1c-1.828 0-3.623.149-5.371.435a.75.75 0 00-.629.74v.387c-.827.157-1.642.345-2.445.564a.75.75 0 00-.552.698 5 5 0 004.503 5.152 6 6 0 002.946 1.822A6.451 6.451 0 017.768 13H7.5A1.5 1.5 0 006 14.5V17h-.75C4.56 17 4 17.56 4 18.25c0 .414.336.75.75.75h10.5a.75.75 0 00.75-.75c0-.69-.56-1.25-1.25-1.25H14v-2.5a1.5 1.5 0 00-1.5-1.5h-.268a6.453 6.453 0 01-.684-2.202 6 6 0 002.946-1.822 5 5 0 004.503-5.152.75.75 0 00-.552-.698A31.804 31.804 0 0016 2.562v-.387a.75.75 0 00-.629-.74A33.227 33.227 0 0010 1zM2.525 4.422C3.012 4.3 3.504 4.19 4 4.09V5c0 .74.134 1.448.38 2.103a3.503 3.503 0 01-1.855-2.68zm14.95 0a3.503 3.503 0 01-1.854 2.68C15.866 6.449 16 5.74 16 5v-.91c.496.099.988.21 1.475.332z"
@@ -768,6 +813,7 @@ const OpenssfBestPractices = (props: IconProps) => (
 
 const OsanoCookie = (props: IconProps) => (
   <svg class={props.class} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 71.85 72.23">
+    <title>Osano cookie icon</title>
     <path
       d="M67.6 36.73a6.26 6.26 0 0 1-3.2-2.8 5.86 5.86 0 0 0-5.2-3.1h-.3a11 11 0 0 1-11.4-9.5 6 6 0 0 1-.1-1.4 9.2 9.2 0 0 1 .4-2.9 8.65 8.65 0 0 0 .2-1.6 5.38 5.38 0 0 0-1.9-4.3 7.3 7.3 0 0 1-2.5-5.5 3.91 3.91 0 0 0-3.5-3.9 36.46 36.46 0 0 0-15 1.5A33.14 33.14 0 0 0 3 25.93a35.62 35.62 0 0 0-1.5 10.2 34.07 34.07 0 0 0 4.8 17.6.75.75 0 0 0 .07.12c.11.17 1.22 1.39 2.68 3-.36.47 5.18 6.16 5.65 6.52a34.62 34.62 0 0 0 55.6-21.9 4.38 4.38 0 0 0-2.7-4.74z"
       fill="#fff"
@@ -790,6 +836,7 @@ const PackageManager = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Package manager icon</title>
     <path d="M128,129.09V232a8,8,0,0,1-3.84-1l-88-48.18a8,8,0,0,1-4.16-7V80.18a8,8,0,0,1,.7-3.25Z" opacity="0.2" />
     <path d="M223.68,66.15,135.68,18a15.88,15.88,0,0,0-15.36,0l-88,48.17a16,16,0,0,0-8.32,14v95.64a16,16,0,0,0,8.32,14l88,48.17a15.88,15.88,0,0,0,15.36,0l88-48.17a16,16,0,0,0,8.32-14V80.18A16,16,0,0,0,223.68,66.15ZM128,32l80.34,44-29.77,16.3-80.35-44ZM128,120,47.66,76l33.9-18.56,80.34,44ZM40,90l80,43.78v85.79L40,175.82Zm176,85.78h0l-80,43.79V133.82l32-17.51V152a8,8,0,0,0,16,0V107.55L216,90v85.77Z" />
   </svg>
@@ -806,6 +853,7 @@ const Packagist = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Packagist icon</title>
     <path d="M13.214 23.975c-.098-.053-.329-.062-1.615-.062h-1.26l-.017-.088-.096-.431a3.622 3.622 0 0 1-.07-.354c.005-.007-.012-.056-.038-.107l-.048-.094-.547.085c-.301.046-.598.1-.659.116-.1.03-.11.03-.103.004.038-.14.044-.201.028-.266-.018-.07-.017-.072.238-.645.276-.622.266-.594.237-.634-.018-.025-.042-.02-.307.07-.159.05-.294.093-.301.09a16.82 16.82 0 0 1 .414-.732c.451-.773.566-.976.566-1.003 0-.01-.12-.146-.271-.304-.15-.157-.311-.329-.357-.384a.584.584 0 0 0-.112-.11c-.05-.017-.264-.231-.738-.734a16.196 16.196 0 0 0-.525-.542c-.062-.05-.077-.074-.107-.175a6.511 6.511 0 0 0-.291-.714l-.096-.201v-.178c0-.271-.056-.542-.277-1.331l-.054-.191-.087-.01c-.193-.017-.283-.123-.431-.504a6.231 6.231 0 0 0-.231-.472c-.1-.191-.221-.428-.271-.532l-.086-.185-.08-.01a.72.72 0 0 0-.361.05c-.12.05-.345.063-.618.037l-.399-.038-.199-.02-.107-.191c-.161-.284-.161-.285-.238-.324-.09-.046-.161-.046-.572 0l-.325.035-.245-.035c-.645-.094-.797-.166-.797-.375 0-.042-.045-.261-.102-.489-.13-.528-.218-1.126-.195-1.332.034-.294.273-.996.636-1.87l.142-.341.023-.547c.142-3.274.178-3.76.284-3.951.035-.062.468-.431.644-.552.335-.224 1.503-.8 2.802-1.379l.384-.171.195-.012.193-.01.522.329.521.329.423-.2.658-.308c.235-.108.236-.11.367-.253.184-.201.492-.566.592-.703.118-.161.395-.388.816-.672.147-.098.185-.116.569-.264l.231-.09h.49c.451 0 .502.003.655.037.358.078.652.193.686.267.022.05.07.08.187.12.14.048.311.168 1.224.863.489.373.472.366 1.539.719l.298.1.176.211c.201.241.358.404.404.419.07.022.485-.08 1.009-.249.266-.085.303-.093.351-.077.03.01.175.02.321.02.271.005.514.034 1.117.137.153.027.281.048.283.048.002 0 .244.419.537.933.293.512.61 1.048.705 1.192.167.249.174.264.189.375.026.191.08 1.008.09 1.309l.023.896c.02.843.036 1.04.09 1.154.093.199.276.747.572 1.719l.12.401.008.930-.14.728-.158.813-.016.083-.439.264-.441.265-.321-.016c-.179-.01-.335-.016-.349-.016-.03 0-.066.113-.135.411-.04.176-.042.178-.092.187l-.666.106c-.92.145-1.037.181-1.341.424-.264.211-.264.208-.556 1.681a16.97 16.97 0 0 1-.185.856c-.105.317-.941 1.708-1.246 2.074l-.165.199.064.228c.035.126.073.265.083.309.016.07.314 1.206.421 1.609l.038.14-.201-.084-.328-.136a.549.549 0 0 0-.13-.046c-.003.004.033.15.08.327.08.288.187.763.177.773-.003 0-.15-.008-.331-.022a6.185 6.185 0 0 0-.381-.02l-.055.005-.181.662c-.1.363-.184.664-.187.667-.01.007-.536-.02-1.005-.05-.54-.035-.7-.032-.836.017-.125.045-.241.05-.306.014l.002-.001zm1.957-.348c0-.026.023-.181.05-.345.027-.165.05-.337.05-.383 0-.056.013-.116.04-.175.02-.05.036-.09.033-.093-.002-.002-.368-.03-.813-.062-.637-.046-.86-.067-1.053-.103l-.244-.046-.58.072c-.414.05-.588.078-.607.095-.02.02-.201.042-.712.094-.376.038-.717.075-.756.083l-.072.013.004.083c.003.065.02.115.083.231.06.113.088.191.12.331.02.1.042.184.046.188.003.003.973.014 2.157.023 2.034.016 2.154.018 2.191.045.046.035.064.02.064-.05l-.001-.001zm-4.782-1.179c.873-.123 1.226-.168 1.572-.194.387-.028.897-.087 1.259-.143.057-.01.248-.02.424-.026l.321-.01.377.097.379.098.682.04c.377.023.687.04.69.036a2.93 2.93 0 0 0-.07-.229c-.042-.122-.11-.333-.155-.468l-.077-.244-.231-.072-.231-.073-.156.066-.156.065-1.776.057-1.774.058-.118-.06-.118-.057H9.8l-.269.597c-.148.328-.271.602-.276.609-.008.016-.124.03 1.134-.147zm6.127-1.036c0-.017-.431-1.435-.444-1.457-.007-.012-.05.024-.115.096l-.105.115.154.568.153.568.169.06c.181.064.191.067.191.05zm-6.788-.713l.191-.355-.057-.083c-.032-.046-.063-.08-.068-.073-.007.006-.142.238-.303.515s-.297.511-.302.517c-.004.01.072-.026.171-.075l.176-.09.192-.356zm2.957-.072c.106-.306.193-.562.193-.57a.856.856 0 0 0-.198-.075 3.495 3.495 0 0 1-.201-.066.578.578 0 0 1 .063-.11l.068-.104.405-.02c.706-.033 1.114-.155 1.51-.451.15-.11.214-.128.296-.085.07.04.12.128.106.191-.01.042-.028.056-.241.197-.201.13-.876.428-1.114.492-.136.035-.289.12-.323.181-.04.066-.159.92-.132.947.006.006 1.148-.04 1.33-.056.11-.008.117-.01.161-.067.024-.032.13-.153.238-.267.106-.113.301-.333.431-.488.13-.154.328-.381.437-.502.171-.189.263-.318.619-.857.878-1.324.937-1.441 1.003-1.969.045-.375.067-.447.214-.697.146-.249.294-.965.213-1.033-.072-.06-.153-.032-.427.15-.512.341-1.039.841-1.114 1.053-.034.095-.223.373-.285.418l-.519.369c-.582.414-.52.349-.849.879l-.11.174-.327.173-.328.171-.616.015c-1.23.028-1.288.022-1.943-.207l-.431-.153-.344-.303c-.191-.168-.53-.47-.754-.672l-.407-.368-.142-.321a28.99 28.99 0 0 1-.497-1.15c-.084-.226-.09-.231-.275-.428-.341-.361-.529-.757-.757-1.612-.045-.165-.078-.259-.1-.281-.018-.016-.028-.022-.023-.012.006.01 0 .046-.012.082-.157.441-.209.768-.249 1.559-.02.359-.02.351.096.983.225 1.226.296 1.5.409 1.565.04.024.165.146.291.286.341.376.448.485.604.61.285.231.735.71.901.961.04.06.102.14.135.177.15.163.462.6.899 1.259l.314.475.13-.007c.09-.006.329.012.74.054.336.035.635.064.665.065h.056l.191-.555zm-2.276.455a1.103 1.103 0 0 0-.122-.201c-.075-.107-.14-.195-.15-.191-.01.003-.138.268-.181.374-.01.031.341.044.453.018zm2.766-2.758c.046-.033.127-.055.376-.105.311-.06.375-.083.628-.211a.309.309 0 0 0 .092-.11.74.74 0 0 1 .11-.138c.04-.036.055-.062.055-.098 0-.078.227-.275 1.091-.946a.9.9 0 0 0 .245-.268c.074-.11.158-.211.263-.309.085-.08.291-.284.459-.451.168-.171.391-.376.497-.462a3.44 3.44 0 0 0 .241-.204c.03-.032.157-.106.335-.196.159-.08.295-.156.301-.168.018-.03.09-.06.508-.217.889-.331 1.479-.492 1.79-.492.08 0 .096-.052.067-.219-.068-.395-.296-.552-.808-.552h-.181l-.063-.067c-.06-.065-.067-.087-.124-.325-.115-.485-.185-.532-.742-.516-.435.013-.552.06-1.754.718-.602.331-1.035.702-1.543 1.33a.964.964 0 0 1-.11.123c-.311-.002-.303-.472.017-.949l.106-.157-.084-.035c-.236-.107-.532-.123-.74-.04-.291.116-1.023.525-1.117.622-.098.103-.187.106-.187.007 0-.122.114-.285.289-.411.04-.032.11-.088.153-.127a1.63 1.63 0 0 1 .435-.261c.147-.06.142-.052.09-.15-.14-.255-.525-.546-.915-.689-.05-.02-.169-.07-.263-.112-.221-.102-.331-.124-.672-.136-.244-.01-.283-.014-.267-.033.074-.09.311-.133.79-.144l.384-.01.248.11c.697.301.963.462 1.074.645.076.128.084.133.194.112.266-.05.518.032.765.249.135.12.184.13.274.063a.773.773 0 0 0 .273-.502c.035-.271-.06-1.136-.153-1.385-.07-.188-.057-.196.087-.046.171.178.171.178.326-.11.04-.076.103-.176.138-.221.291-.367.281-1.047-.017-1.347-.15-.15-.404-.291-.815-.446-.403-.155-.47-.211-.77-.628-.361-.506-.425-.567-.724-.708-.617-.293-2.101-.562-2.57-.467-.441.09-1.04.447-1.32.789-.175.213-.63.377-1.274.462-.84.108-1.254.828-1.041 1.806.04.191.038.189.165.034.405-.505 1.209-.976 1.93-1.13.575-.12 1.475-.126 2.01-.01l.096.022h-.144c-.75.01-1.904.257-2.722.584l-.176.07-.016.087c-.015.083-.022.093-.281.351-.536.539-.69.796-.775 1.286-.04.239.036.589.15.678.027.022.047.05.042.06a2.825 2.825 0 0 0-.026.225c-.076.845.323 1.866.96 2.453l.144.133.108-.09c.317-.259.859-.614.888-.582.043.05.034.09-.033.155-.085.082-.196.226-.496.642l-.259.361.007.104c.01.13.076.337.147.451.03.046.09.15.136.229.167.284.321.52.424.642.096.117.184.241.284.401.028.046.05.064.07.06.04-.01.09.026.279.204.186.171.083.122.845.408.823.309 1.131.369 1.465.286.09-.022.097-.022.168.015.09.047.09.047.163-.002v.005zm-6.348-3.82c.003-.003.02-.103.037-.225.017-.12.053-.286.08-.367l.193-.644c.177-.602.159-.55.178-.52.025.042.015-.01-.016-.074a1.69 1.69 0 0 1-.066-.171l-.034-.108.034-.588.034-.589-.055-.397a6.234 6.234 0 0 0-.064-.406c-.032-.032-.464.145-.599.245-.175.13-.401.679-.492 1.194-.12.694-.008 1.647.226 1.916.07.08.226.378.357.68l.034.077.075-.01a.347.347 0 0 0 .078-.013zm14.775-1.31c.126-.088.238-.177.246-.196.015-.037.213-1.099.281-1.507l.042-.257-.042-.447-.042-.446-.125-.48c-.124-.475-.128-.484-.264-.755-.216-.431-.194-.236-.379-3.358l-.035-.578-.053-.055c-.07-.075-.337-.458-.963-1.388a14.255 14.255 0 0 0-.546-.781 16.04 16.04 0 0 0-.821-.146c-.395-.055-.736-.025-1.055.094-.128.048-.14.05-.201.03-.138-.047-.293-.003-.569.164l-.145.087-.166-.221c-.191-.251-.194-.255-.57-.502-.64-.416-.716-.449-1.632-.692-.353-.094-.311-.062-.993-.742l-.535-.532-.585.008c-.989.015-1.482.06-1.6.142-.712.508-1.094.888-1.538 1.531l-.103.15-.386.184c-.422.203-1.034.392-1.201.369-.092-.012-.421-.18-.658-.341-.438-.291-.739-.326-1.088-.124-.284.163-.483.269-1.286.675-.861.437-.965.496-1.246.705l-.164.123-.143.288c-.311.626-.305.602-.321 1.415-.03 1.52-.035 2.008-.016 2.122.03.179.036.374.016.505-.028.171-.387 1.387-.585 1.977-.066.199-.135.52-.159.736-.01.07 0 .175.036.391.026.164.07.451.097.64.066.464.12.562.358.64.209.07.309.063.732-.045.793-.203.813-.197 1.134.378.078.137.112.184.143.193.105.03.725.01.866-.027l.194-.05.056-.015-.02-.096a2.414 2.414 0 0 1-.023-.624c.024-.268.064-.506.153-.889.004-.017-.006-.004-.022.03l-.03.06-.035-.157a1.876 1.876 0 0 0-.291-.672 6.435 6.435 0 0 1-.421-.87l-.093-.231.01-.161c.05-.718.224-1.186.597-1.595.227-.248.293-.351.325-.522.025-.13.106-.807.171-1.395l.057-.547.241-.715c.13-.394.231-.722.225-.728a9.003 9.003 0 0 0-.693-.321c-.124-.035-.412-.023-.632.027-.705.161-1.224.532-1.25.893-.007.08-.362.827-.395.828-.02 0-.074-.098-.093-.169-.02-.074-.012-.115.073-.351.032-.088.097-.307.145-.487.12-.443.14-.477.405-.599l.467-.221c.675-.325 1.657-.578 1.899-.49.143.05.359.226.552.446l.092.104-.09.246c-.458 1.266-.575 1.617-.606 1.823-.071.458-.066 1.465.008 1.695.058.188.054.195-.223.377-.477.316-.953.919-.973 1.233-.013.211.09.634.221.888.052.105.589.913.606.913.006 0 .03-.04.057-.09a1.9 1.9 0 0 1 .704-.773c.316-.204.317-.204.341-.313.161-.725.425-1.144.88-1.385l.197-.105-.095-.035c-.145-.053-.271-.143-.428-.308-.697-.733-.966-1.566-.688-2.127.02-.04.052-.122.072-.184.245-.755.931-1.164 1.842-1.101.896.063 1.294.296 1.618.94.311.624.294 1.191-.055 1.751l-.066.106.06-.058c.068-.063.766-.374.946-.421.268-.07.659-.03 1.894.193.499.09.584.125.823.341.05.048.09.076.09.064s-.01-.104-.025-.206c-.083-.617.034-1.401.269-1.786.284-.466 1.375-.883 1.974-.754.301.065.769.355 1.021.635.032.036.06.056.06.045 0-.01-.02-.325-.04-.699a11.12 11.12 0 0 1-.03-.689c.008-.006.144-.084.306-.174l.293-.161.052.04c.044.032.169.063.78.191l.763.164c.027.006.085.09.216.307.097.164.271.448.388.632.425.68.502.856.411.941-.093.087-.108.086-.169-.007-.03-.045-.201-.314-.379-.595a16.068 16.068 0 0 0-.351-.539c-.02-.02-.998-.346-1.487-.497-.239-.073-.492 1.151-.434 2.099.02.319.02.321.291.57.169.156.858 1.126.993 1.397l.067.136-.006.826-.005.825-.105.177c-.441.742-.694 1.021-.985 1.096-.161.04-.339.175-.324.241.005.022.013.154.02.291.006.167.016.253.027.253.01 0 .073-.01.14-.023.455-.087.958-.057 1.261.073.11.047.116.064.128.344.017.375.042.407.353.457.348.055.468.114.695.344l.128.13.462.002.462.002.245-.168zM9.954 3.808a13.19 13.19 0 0 0-.833-.494c-.338-.171-.351-.201-.117-.309.341-.157.474-.11.908.315.168.165.369.349.448.411.156.118.328.275.328.297 0 .027-.115.14-.14.14a8.7 8.7 0 0 1-.594-.36zm3.987.19a.518.518 0 0 1-.235-.191l-.042-.07.03-.068c.04-.095.076-.13.231-.231.074-.05.159-.11.188-.134.159-.14 1.179-.558 1.358-.558.1 0 .13.02.176.125a.63.63 0 0 0 .065.12c.05.056-.06.115-.341.179-.15.034-.502.176-.818.328l-.258.125-.148.201c-.08.11-.15.201-.15.201L13.94 4l.001-.002zm2.25 8.609c.117-.103.612-.334.898-.418.104-.03.171-.307.171-.72v-.234l-.092-.191c-.097-.201-.203-.378-.221-.371-.006.002-.203.251-.437.556l-.427.552.01.249.01.444c0 .225-.006.218.09.134l-.002-.001zm1.639-1.799l.344-.132.112-.169c.391-.592.512-.901.529-1.379l.01-.308-.228-.361c-.386-.607-.636-1.018-.722-1.187a.36.36 0 0 0-.062-.1c-.062-.04-.245.12-.458.401-.15.201-.226.254-.674.478-.592.295-.876.341-1.292.213a7.003 7.003 0 0 0-.552-.156c-.042 0 .133.206.294.347.126.11.221.161.346.181.191.03.547.231 1.094.612.303.214.261.133.291.55l.027.351.08.078c.1.098.214.251.381.51.07.112.13.205.132.205l.348-.134zm-1.719-3.119c.446-.164.704-.665.527-1.023-.194-.391-.634-.702-.998-.702-.425 0-.979.482-.979.853 0 .008.058-.038.127-.104.329-.311.692-.346 1.05-.105.385.258.469.77.173 1.064-.078.08-.067.08.1.02v-.003zm-7.704-.16a.963.963 0 0 1-.026-.396c.145-.778 1.09-1.005 1.51-.364l.064.1-.009-.129c-.069-.971-1.094-1.234-1.726-.443-.356.447-.299 1.13.105 1.274.103.036.107.034.08-.042h.002zm8.86-.527c.261-.439.226-1.053-.088-1.53-.421-.642-1.084-.841-1.806-.542-.559.231-.776.517-.825 1.081-.022.251-.012.281.058.176.238-.354.644-.547 1.094-.522.712.038 1.24.539 1.385 1.316l.034.183.008.04.04-.05a1.56 1.56 0 0 0 .1-.154v.002zm-1.431.09a.125.125 0 0 0 .04-.096.127.127 0 0 0-.04-.095.128.128 0 0 0-.096-.04c-.04 0-.07.013-.097.04a.13.13 0 0 0-.038.096c0 .123.146.185.233.098l-.002-.003zm-8.218-.209c.138-.773.732-1.289 1.48-1.289.485 0 .838.274 1.043.809.054.14.06.143.087.035.07-.274-.01-.848-.163-1.149-.26-.518-1.032-.779-1.751-.591-.415.106-.9.64-.997 1.097-.1.468-.038.849.191 1.167.077.108.077.108.11-.08v.001zm1.928 0a.128.128 0 0 0 .04-.096c0-.04-.013-.07-.04-.097-.027-.028-.056-.041-.096-.041s-.07.013-.096.04a.128.128 0 0 0-.04.097.136.136 0 0 0 .232.097z" />
   </svg>
 );
@@ -821,6 +869,7 @@ const PDF = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>PDF icon</title>
     <path d="M224,152a8,8,0,0,1-8,8H192v16h16a8,8,0,0,1,0,16H192v16a8,8,0,0,1-16,0V152a8,8,0,0,1,8-8h32A8,8,0,0,1,224,152ZM92,172a28,28,0,0,1-28,28H56v8a8,8,0,0,1-16,0V152a8,8,0,0,1,8-8H64A28,28,0,0,1,92,172Zm-16,0a12,12,0,0,0-12-12H56v24h8A12,12,0,0,0,76,172Zm88,8a36,36,0,0,1-36,36H112a8,8,0,0,1-8-8V152a8,8,0,0,1,8-8h16A36,36,0,0,1,164,180Zm-16,0a20,20,0,0,0-20-20h-8v40h8A20,20,0,0,0,148,180ZM40,112V40A16,16,0,0,1,56,24h96a8,8,0,0,1,5.66,2.34l56,56A8,8,0,0,1,216,88v24a8,8,0,0,1-16,0V96H152a8,8,0,0,1-8-8V40H56v72a8,8,0,0,1-16,0ZM160,80h28.69L160,51.31Z" />
   </svg>
 );
@@ -836,6 +885,7 @@ const Perl = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Perl icon</title>
     <path d="M11.638 0c-.148 0-.207.689-.252 2.925-.058 2.86-.07 2.949-.51 3.914-.36.793-1.623 2.676-2.037 3.04-.373.328-1.183 1.56-1.58 2.401-.71 1.504-.659 3.52-.04 5.047.518 1.194 1.262 2.156 2.46 3.182.94.805 1.23.919 1.375.544.049-.128-.162-.572-.483-1.018-.313-.436-.843-1.362-1.178-2.059-1.382-2.926-.7-5.357.902-8.045.89-1.393 1.403-2.642 1.579-3.852.22-1.515.043-6.079-.236-6.079zm-.757 1.215c-.186 0-.228.26-.228 1.422 0 .782-.08 1.654-.177 1.938-.312.914-1.154 1.737-3.482 3.404-1.684 1.205-3.096 2.652-3.64 3.732-1.666 3.299-.195 7.311 3.42 9.333 1.613.902 2.966 1.253 2.966.768 0-.126-.054-.228-.121-.228s-.632-.332-1.254-.738c-2.69-1.755-3.947-3.927-3.747-6.482.15-1.91.873-3.08 3.796-6.135 2.522-2.636 2.69-2.97 2.693-5.304.001-1.42-.036-1.71-.226-1.71zm1.508.632c-.103.017-.14.905-.142 2.903l-.004 2.926-.744 2.812c-.83 2.54-.954 5.133-.345 7.725.558 2.202.796 2.638 1.567 2.857.343.098.89.355 1.216.572.736.49 1.395.435 2.715-.232 1.92-.97 3.209-2.222 4.067-3.953.745-1.648.856-3.71.068-5.35-.7-1.414-1.882-2.554-4.358-4.197-2.162-1.436-2.617-1.82-3.15-2.652-.322-.503-.369-.724-.308-1.444.04-.468.126-.978.192-1.134.101-.239.069-.268-.202-.182-.26.082-.34.027-.42-.286-.061-.245-.112-.372-.152-.365zm.714 4.586c.034-.007.135.113.252.306.144.237 1.022 1 1.952 1.697 2.888 2.189 5.27 4.378 4.087 8.2-.405 1.146-.99 2.07-1.963 3.098-.544.575-1.266 1.09-1.53 1.09-.047 0 .252-.43.664-.954 1.337-1.7 1.972-3.718 1.79-5.674-.168-1.796-1.557-3.975-3.753-5.89-.912-.796-1.518-1.536-1.512-1.846 0-.016.005-.025.013-.027zm-1.089 15.492c-.208-.006-.297.349-.297 1.121 0 .94.018.988.342.942.302-.042.347-.15.387-.899.032-.613-.019-.902-.183-1.039-.097-.08-.18-.123-.249-.125zm-1.052.28c-.124-.002-.226.14-.327.43-.085.245-.253.481-.373.527-.322.124-.264.55.075.55.162 0 .402-.109.534-.24.441-.442.579-.824.382-1.062-.111-.134-.206-.203-.29-.205zm2.074.063c-.312 0-.28.61.053 1.034.309.392.908.567.908.264 0-.252-.775-1.298-.961-1.298z" />
   </svg>
 );
@@ -851,6 +901,7 @@ const Play = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Play icon</title>
     <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" />
   </svg>
 );
@@ -866,6 +917,7 @@ const PNG = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>PNG icon</title>
     <path d="M208,88H152V32Z" opacity="0.2" />
     <path d="M60,144H44a8,8,0,0,0-8,8v56a8,8,0,0,0,16,0v-8h8a28,28,0,0,0,0-56Zm0,40H52V160h8a12,12,0,0,1,0,24Zm164,16.87a8,8,0,0,1-2.22,5.53A30.06,30.06,0,0,1,200,216c-17.64,0-32-16.15-32-36s14.36-36,32-36a29.45,29.45,0,0,1,16.48,5.11,8,8,0,0,1-9,13.27A13.21,13.21,0,0,0,200,160c-8.82,0-16,9-16,20s7.18,20,16,20a13.57,13.57,0,0,0,8-2.72V192a8,8,0,0,1,0-16h8a8,8,0,0,1,8,8ZM156,152v56a8,8,0,0,1-5.56,7.62A7.91,7.91,0,0,1,148,216a8,8,0,0,1-6.51-3.35L116,177v31a8,8,0,0,1-16,0V152a8,8,0,0,1,14.51-4.65L140,183V152a8,8,0,0,1,16,0ZM48,120a8,8,0,0,0,8-8V40h88V88a8,8,0,0,0,8,8h48v16a8,8,0,0,0,16,0V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v72A8,8,0,0,0,48,120ZM160,51.31,188.69,80H160Z" />
   </svg>
@@ -882,6 +934,7 @@ const PyPi = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Pypi icon</title>
     <path d="M23.922 13.58v3.912L20.55 18.72l-.078.055.052.037 3.45-1.256.026-.036v-3.997l-.053-.036-.025.092z M23.621 5.618l-3.04 1.107v3.912l3.339-1.215V5.509zM23.92 13.457V9.544l-3.336 1.215v3.913zM20.47 14.71V10.8L17.17 12v3.913zM17.034 19.996v-3.912l-3.313 1.206v3.912zM17.17 16.057v3.868l3.314-1.206V14.85l-3.314 1.206zm2.093 1.882c-.367.134-.663-.074-.663-.463s.296-.814.663-.947c.365-.133.662.075.662.464s-.297.814-.662.946z M13.225 9.315l.365-.132-3.285-1.197-3.323 1.21.102.037 3.184 1.16zM20.507 10.664V6.751L17.17 7.965v3.913zM17.058 11.918V8.005l-3.302 1.202v3.912zM13.643 9.246l-3.336 1.215v3.913l3.336-1.215zM6.907 13.165l3.322 1.209v-3.913L6.907 9.252z M10.34 7.873l3.281 1.193V5.198l-3.28-1.193zM20.507 2.715L17.19 3.922v3.913l3.317-1.207zM16.95 3.903L13.724 2.73l-3.269 1.19 3.225 1.174zM15.365 4.606l-1.624.592v3.868l3.317-1.207V3.991l-1.693.615zm-.391 2.778c-.367.134-.662-.074-.662-.464s.295-.813.662-.946c.366-.133.663.074.663.464s-.297.813-.663.946z M10.229 18.41v-3.914l-3.322-1.209V17.2zM13.678 17.182v-3.913l-3.371 1.227v3.913z M13.756 17.154l3.3-1.2V12.04l-3.3 1.2zM13.678 21.217l-3.371 1.227v-3.912h-.078v3.912l-3.322-1.209v-3.913l-.053-.058-.025-.06-3.336-1.21v-3.948l.034.013 3.287 1.196.015-.078-3.261-1.187 3.26-1.187v-.109L3.876 9.62l-.307-.112 3.26-1.188v.877l.079-.055V6.769l3.257 1.185.058-.061L7.084 6.75l-.102-.037 3.24-1.179v-.083L6.854 6.677v.018l-.025.018v1.523L3.44 9.47v.02l-.025.017v4.007l-3.39 1.233v.019L0 14.784v3.995l.025.037 3.4 1.237.008-.006.007.01 3.4 1.238.008-.006.006.01 3.4 1.237.014-.009.012.01 3.45-1.256.026-.037-.078-.027zM3.493 9.563l3.257 1.185-3.257 1.187V9.562zM3.4 19.96L.078 18.752v-3.913l2.361.86.96.349v3.913zm.015-3.99L.335 14.85l-.182-.066 3.262-1.187v2.374zm3.399 5.231l-3.321-1.209v-3.912l3.321 1.209v3.912zM23.791 5.434l-3.21-1.17v2.338zM20.387 2.643l-3.24-1.18-3.27 1.19 3.247 1.182z" />
   </svg>
 );
@@ -897,6 +950,7 @@ const Quiz = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Quiz icon</title>
     <path fill="none" d="M0 0h24v24H0V0z" />
     <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z" />
     <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5.99 13c-.59 0-1.05-.47-1.05-1.05 0-.59.47-1.04 1.05-1.04.59 0 1.04.45 1.04 1.04-.01.58-.45 1.05-1.04 1.05zm2.5-6.17c-.63.93-1.23 1.21-1.56 1.81-.13.24-.18.4-.18 1.18h-1.52c0-.41-.06-1.08.26-1.65.41-.73 1.18-1.16 1.63-1.8.48-.68.21-1.94-1.14-1.94-.88 0-1.32.67-1.5 1.23l-1.37-.57C11.51 5.96 12.52 5 13.99 5c1.23 0 2.08.56 2.51 1.26.37.61.58 1.73.01 2.57z" />
@@ -914,6 +968,7 @@ const RubyGems = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>RubyGems icon</title>
     <path d="M7.81 7.9l-2.97 2.95 7.19 7.18 2.96-2.95 4.22-4.23-2.96-2.96v-.01H7.8zM12 0L1.53 6v12L12 24l10.47-6V6L12 0zm8.47 16.85L12 21.73l-8.47-4.88V7.12L12 2.24l8.47 4.88v9.73z" />
   </svg>
 );
@@ -929,6 +984,7 @@ const Rust = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Rust icon</title>
     <path d="M508.52,249.75,486.7,236.24c-.17-2-.34-3.93-.55-5.88l18.72-17.5a7.35,7.35,0,0,0-2.44-12.25l-24-9c-.54-1.88-1.08-3.78-1.67-5.64l15-20.83a7.35,7.35,0,0,0-4.79-11.54l-25.42-4.15c-.9-1.73-1.79-3.45-2.73-5.15l10.68-23.42a7.35,7.35,0,0,0-6.95-10.39l-25.82.91q-1.79-2.22-3.61-4.4L439,81.84A7.36,7.36,0,0,0,430.16,73L405,78.93q-2.17-1.83-4.4-3.61l.91-25.82a7.35,7.35,0,0,0-10.39-7L367.7,53.23c-1.7-.94-3.43-1.84-5.15-2.73L358.4,25.08a7.35,7.35,0,0,0-11.54-4.79L326,35.26c-1.86-.59-3.75-1.13-5.64-1.67l-9-24a7.35,7.35,0,0,0-12.25-2.44l-17.5,18.72c-1.95-.21-3.91-.38-5.88-.55L262.25,3.48a7.35,7.35,0,0,0-12.5,0L236.24,25.3c-2,.17-3.93.34-5.88.55L212.86,7.13a7.35,7.35,0,0,0-12.25,2.44l-9,24c-1.89.55-3.79,1.08-5.66,1.68l-20.82-15a7.35,7.35,0,0,0-11.54,4.79l-4.15,25.41c-1.73.9-3.45,1.79-5.16,2.73L120.88,42.55a7.35,7.35,0,0,0-10.39,7l.92,25.81c-1.49,1.19-3,2.39-4.42,3.61L81.84,73A7.36,7.36,0,0,0,73,81.84L78.93,107c-1.23,1.45-2.43,2.93-3.62,4.41l-25.81-.91a7.42,7.42,0,0,0-6.37,3.26,7.35,7.35,0,0,0-.57,7.13l10.66,23.41c-.94,1.7-1.83,3.43-2.73,5.16L25.08,153.6a7.35,7.35,0,0,0-4.79,11.54l15,20.82c-.59,1.87-1.13,3.77-1.68,5.66l-24,9a7.35,7.35,0,0,0-2.44,12.25l18.72,17.5c-.21,1.95-.38,3.91-.55,5.88L3.48,249.75a7.35,7.35,0,0,0,0,12.5L25.3,275.76c.17,2,.34,3.92.55,5.87L7.13,299.13a7.35,7.35,0,0,0,2.44,12.25l24,9c.55,1.89,1.08,3.78,1.68,5.65l-15,20.83a7.35,7.35,0,0,0,4.79,11.54l25.42,4.15c.9,1.72,1.79,3.45,2.73,5.14L42.56,391.12a7.35,7.35,0,0,0,.57,7.13,7.13,7.13,0,0,0,6.37,3.26l25.83-.91q1.77,2.22,3.6,4.4L73,430.16A7.36,7.36,0,0,0,81.84,439L107,433.07q2.18,1.83,4.41,3.61l-.92,25.82a7.35,7.35,0,0,0,10.39,6.95l23.43-10.68c1.69.94,3.42,1.83,5.14,2.73l4.15,25.42a7.34,7.34,0,0,0,11.54,4.78l20.83-15c1.86.6,3.76,1.13,5.65,1.68l9,24a7.36,7.36,0,0,0,12.25,2.44l17.5-18.72c1.95.21,3.92.38,5.88.55l13.51,21.82a7.35,7.35,0,0,0,12.5,0l13.51-21.82c2-.17,3.93-.34,5.88-.56l17.5,18.73a7.36,7.36,0,0,0,12.25-2.44l9-24c1.89-.55,3.78-1.08,5.65-1.68l20.82,15a7.34,7.34,0,0,0,11.54-4.78l4.15-25.42c1.72-.9,3.45-1.79,5.15-2.73l23.42,10.68a7.35,7.35,0,0,0,10.39-6.95l-.91-25.82q2.22-1.79,4.4-3.61L430.16,439a7.36,7.36,0,0,0,8.84-8.84L433.07,405q1.83-2.17,3.61-4.4l25.82.91a7.23,7.23,0,0,0,6.37-3.26,7.35,7.35,0,0,0,.58-7.13L458.77,367.7c.94-1.7,1.83-3.43,2.73-5.15l25.42-4.15a7.35,7.35,0,0,0,4.79-11.54l-15-20.83c.59-1.87,1.13-3.76,1.67-5.65l24-9a7.35,7.35,0,0,0,2.44-12.25l-18.72-17.5c.21-1.95.38-3.91.55-5.87l21.82-13.51a7.35,7.35,0,0,0,0-12.5Zm-151,129.08A13.91,13.91,0,0,0,341,389.51l-7.64,35.67A187.51,187.51,0,0,1,177,424.44l-7.64-35.66a13.87,13.87,0,0,0-16.46-10.68l-31.51,6.76a187.38,187.38,0,0,1-16.26-19.21H258.3c1.72,0,2.89-.29,2.89-1.91V309.55c0-1.57-1.17-1.91-2.89-1.91H213.47l.05-34.35H262c4.41,0,23.66,1.28,29.79,25.87,1.91,7.55,6.17,32.14,9.06,40,2.89,8.82,14.6,26.46,27.1,26.46H407a187.3,187.3,0,0,1-17.34,20.09Zm25.77,34.49A15.24,15.24,0,1,1,368,398.08h.44A15.23,15.23,0,0,1,383.24,413.32Zm-225.62-.68a15.24,15.24,0,1,1-15.25-15.25h.45A15.25,15.25,0,0,1,157.62,412.64ZM69.57,234.15l32.83-14.6a13.88,13.88,0,0,0,7.06-18.33L102.69,186h26.56V305.73H75.65A187.65,187.65,0,0,1,69.57,234.15ZM58.31,198.09a15.24,15.24,0,0,1,15.23-15.25H74a15.24,15.24,0,1,1-15.67,15.24Zm155.16,24.49.05-35.32h63.26c3.28,0,23.07,3.77,23.07,18.62,0,12.29-15.19,16.7-27.68,16.7ZM399,306.71c-9.8,1.13-20.63-4.12-22-10.09-5.78-32.49-15.39-39.4-30.57-51.4,18.86-11.95,38.46-29.64,38.46-53.26,0-25.52-17.49-41.59-29.4-49.48-16.76-11-35.28-13.23-40.27-13.23H116.32A187.49,187.49,0,0,1,221.21,70.06l23.47,24.6a13.82,13.82,0,0,0,19.6.44l26.26-25a187.51,187.51,0,0,1,128.37,91.43l-18,40.57A14,14,0,0,0,408,220.43l34.59,15.33a187.12,187.12,0,0,1,.4,32.54H423.71c-1.91,0-2.69,1.27-2.69,3.13v8.82C421,301,409.31,305.58,399,306.71ZM240,60.21A15.24,15.24,0,0,1,255.21,45h.45A15.24,15.24,0,1,1,240,60.21ZM436.84,214a15.24,15.24,0,1,1,0-30.48h.44a15.24,15.24,0,0,1-.44,30.48Z" />
   </svg>
 );
@@ -946,6 +1002,7 @@ const Search = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Search icon</title>
     <circle cx="11" cy="11" r="8" />
     <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
@@ -962,6 +1019,7 @@ const Security = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Security icon</title>
     <path fill="none" d="M0 0h24v24H0z" />
     <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z" />
   </svg>
@@ -978,6 +1036,7 @@ const Slack = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Slack icon</title>
     <path d="M94.12 315.1c0 25.9-21.16 47.06-47.06 47.06S0 341 0 315.1c0-25.9 21.16-47.06 47.06-47.06h47.06v47.06zm23.72 0c0-25.9 21.16-47.06 47.06-47.06s47.06 21.16 47.06 47.06v117.84c0 25.9-21.16 47.06-47.06 47.06s-47.06-21.16-47.06-47.06V315.1zm47.06-188.98c-25.9 0-47.06-21.16-47.06-47.06S139 32 164.9 32s47.06 21.16 47.06 47.06v47.06H164.9zm0 23.72c25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06H47.06C21.16 243.96 0 222.8 0 196.9s21.16-47.06 47.06-47.06H164.9zm188.98 47.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06s-21.16 47.06-47.06 47.06h-47.06V196.9zm-23.72 0c0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06V79.06c0-25.9 21.16-47.06 47.06-47.06 25.9 0 47.06 21.16 47.06 47.06V196.9zM283.1 385.88c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06-25.9 0-47.06-21.16-47.06-47.06v-47.06h47.06zm0-23.72c-25.9 0-47.06-21.16-47.06-47.06 0-25.9 21.16-47.06 47.06-47.06h117.84c25.9 0 47.06 21.16 47.06 47.06 0 25.9-21.16 47.06-47.06 47.06H283.1z" />
   </svg>
 );
@@ -994,6 +1053,7 @@ const StackOverflow = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>StackOverflow icon</title>
     <path d="M16 10v6h-16v-6h2v4h12v-4zM3 11h10v2h-10zM3.237 8.835l0.433-1.953 9.763 2.164-0.433 1.953zM4.37 4.821l0.845-1.813 9.063 4.226-0.845 1.813zM15.496 5.648l-1.218 1.587-7.934-6.088 0.88-1.147h0.91z" />
   </svg>
 );
@@ -1009,6 +1069,7 @@ const Stats = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Stats icon</title>
     <path d="M496 496H16V16h32v448h448v32z" />
     <path d="M192 432H80V208h112zm144 0H224V160h112zm143.64 0h-112V96h112z" />
   </svg>
@@ -1025,6 +1086,7 @@ const ThreeBars = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Three bars icon</title>
     <path fill-rule="evenodd" clip-rule="evenodd" d="M14 5H2V3h12v2zm0 4H2V7h12v2zM2 13h12v-2H2v2z" />
   </svg>
 );
@@ -1040,6 +1102,7 @@ const ToC = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Table of contents icon</title>
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -1060,6 +1123,7 @@ const Twitch = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Twitch icon</title>
     <path d="M391.17,103.47H352.54v109.7h38.63ZM285,103H246.37V212.75H285ZM120.83,0,24.31,91.42V420.58H140.14V512l96.53-91.42h77.25L487.69,256V0ZM449.07,237.75l-77.22,73.12H294.61l-67.6,64v-64H140.14V36.58H449.07Z" />
   </svg>
 );
@@ -1075,6 +1139,7 @@ const Twitter = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Twitter icon</title>
     <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>
 );
@@ -1090,6 +1155,7 @@ const Youtube = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Youtube icon</title>
     <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z" />
   </svg>
 );
@@ -1107,6 +1173,7 @@ const Warning = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Warning icon</title>
     <path d="M12 5.511c.561 0 1.119.354 1.544 1.062l5.912 9.854c.851 1.415.194 2.573-1.456 2.573h-12c-1.65 0-2.307-1.159-1.456-2.573l5.912-9.854c.425-.708.983-1.062 1.544-1.062m0-2c-1.296 0-2.482.74-3.259 2.031l-5.912 9.856c-.786 1.309-.872 2.705-.235 3.83s1.879 1.772 3.406 1.772h12c1.527 0 2.77-.646 3.406-1.771s.551-2.521-.235-3.83l-5.912-9.854c-.777-1.294-1.963-2.034-3.259-2.034z" />
     <circle cx="12" cy="16" r="1.3" />
     <path d="M13.5 10c0-.83-.671-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .199.041.389.111.562.554 1.376 1.389 3.438 1.389 3.438l1.391-3.438c.068-.173.109-.363.109-.562z" />
@@ -1124,6 +1191,7 @@ const WeChat = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>WeChat icon</title>
     <path d="M11.176 14.429c-2.665 0-4.826-1.8-4.826-4.018 0-2.22 2.159-4.02 4.824-4.02S16 8.191 16 10.411c0 1.21-.65 2.301-1.666 3.036a.324.324 0 0 0-.12.366l.218.81a.616.616 0 0 1 .029.117.166.166 0 0 1-.162.162.177.177 0 0 1-.092-.03l-1.057-.61a.519.519 0 0 0-.256-.074.509.509 0 0 0-.142.021 5.668 5.668 0 0 1-1.576.22ZM9.064 9.542a.647.647 0 1 0 .557-1 .645.645 0 0 0-.646.647.615.615 0 0 0 .09.353Zm3.232.001a.646.646 0 1 0 .546-1 .645.645 0 0 0-.644.644.627.627 0 0 0 .098.356Z" />
     <path d="M0 6.826c0 1.455.781 2.765 2.001 3.656a.385.385 0 0 1 .143.439l-.161.6-.1.373a.499.499 0 0 0-.032.14.192.192 0 0 0 .193.193c.039 0 .077-.01.111-.029l1.268-.733a.622.622 0 0 1 .308-.088c.058 0 .116.009.171.025a6.83 6.83 0 0 0 1.625.26 4.45 4.45 0 0 1-.177-1.251c0-2.936 2.785-5.02 5.824-5.02.05 0 .1 0 .15.002C10.587 3.429 8.392 2 5.796 2 2.596 2 0 4.16 0 6.826Zm4.632-1.555a.77.77 0 1 1-1.54 0 .77.77 0 0 1 1.54 0Zm3.875 0a.77.77 0 1 1-1.54 0 .77.77 0 0 1 1.54 0Z" />
   </svg>
@@ -1140,6 +1208,7 @@ const World = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>World icon</title>
     <path
       fill="none"
       stroke-miterlimit="10"
diff --git a/ui/common/src/components/Tabs.tsx b/ui/common/src/components/Tabs.tsx
index bad79a9e..4f371f53 100644
--- a/ui/common/src/components/Tabs.tsx
+++ b/ui/common/src/components/Tabs.tsx
@@ -65,7 +65,7 @@ export const Tabs = (props: TabsProps) => {
                     setActiveTab(tab.name);
                     setVisibleContent(tab.content);
                   }}
-                  aria-label={`Open tab ${tab.name}`}
+                  aria-label={`Open tab ${tab.title}`}
                 >
                   <span class="d-none d-sm-block">{tab.title}</span>
                   <span class="d-block d-sm-none">{tab.shortTitle || tab.title}</span>
diff --git a/ui/embed-item/src/common/ItemModal.tsx b/ui/embed-item/src/common/ItemModal.tsx
index 85e308f0..9c600500 100644
--- a/ui/embed-item/src/common/ItemModal.tsx
+++ b/ui/embed-item/src/common/ItemModal.tsx
@@ -29,7 +29,7 @@ const ItemModal = (props: Props) => {
 
   return (
     <Show when={activeItemId() !== null}>
-      <Modal size="xl" onClose={props.onClose} modalDialogClass={ModalClass} open>
+      <Modal title="Embeddable item details" size="xl" onClose={props.onClose} modalDialogClass={ModalClass} open>
         <Show
           when={itemInfo()}
           fallback={
diff --git a/ui/embed/src/common/CardItem.tsx b/ui/embed/src/common/CardItem.tsx
index a68a8d97..d0d75f59 100644
--- a/ui/embed/src/common/CardItem.tsx
+++ b/ui/embed/src/common/CardItem.tsx
@@ -186,6 +186,7 @@ const DescriptionClass = css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   word-wrap: normal;
   max-height: 36px;
 `;
diff --git a/ui/embed/src/common/ExternalLink.tsx b/ui/embed/src/common/ExternalLink.tsx
index 1d2e4ab1..e94c0503 100644
--- a/ui/embed/src/common/ExternalLink.tsx
+++ b/ui/embed/src/common/ExternalLink.tsx
@@ -37,7 +37,7 @@ const ExternalLink = (props: Props) => {
       target="_blank"
       rel="noopener noreferrer"
       aria-label={props.label || 'Open external link'}
-      tabIndex={-1}
+      tabIndex={0}
       paddingBottom={props.paddingBottom}
     >
       {props.children}
diff --git a/ui/embed/src/common/GridItem.tsx b/ui/embed/src/common/GridItem.tsx
index fb43a18b..37f1b6ed 100644
--- a/ui/embed/src/common/GridItem.tsx
+++ b/ui/embed/src/common/GridItem.tsx
@@ -129,6 +129,7 @@ const GridItem = (props: Props) => {
           onClick={() => props.onClick!()}
           style={{ 'padding-bottom': `${props.withName ? props.itemNameSize + 8 : 0}px` }}
           class={`${LinkClass} ${ButtonClass}`}
+          aria-label={`${props.item.name} info`}
         >
           <Image name={props.item.name} class={ImageClass} logo={props.item.logo} />
           <Show when={props.withName}>
diff --git a/ui/embed/src/common/Loading.tsx b/ui/embed/src/common/Loading.tsx
index 9b3fd570..96f11a0e 100644
--- a/ui/embed/src/common/Loading.tsx
+++ b/ui/embed/src/common/Loading.tsx
@@ -124,7 +124,7 @@ const Loading = (props: Props) => {
     <Wrapper>
       <SpinnerWrapper>
         <div>
-          <Spinner bgColor={props.bgColor} />
+          <Spinner bgColor={props.bgColor} aria-hidden="true" />
         </div>
       </SpinnerWrapper>
     </Wrapper>
diff --git a/ui/embed/src/common/SVGIcon.tsx b/ui/embed/src/common/SVGIcon.tsx
index 287f84f5..08254f32 100644
--- a/ui/embed/src/common/SVGIcon.tsx
+++ b/ui/embed/src/common/SVGIcon.tsx
@@ -23,6 +23,7 @@ const GitHubCircle = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>Github icon</title>
     <path d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm3.163 21.783h-.093a.513.513 0 0 1-.382-.14.513.513 0 0 1-.14-.372v-1.406c.006-.467.01-.94.01-1.416a3.693 3.693 0 0 0-.151-1.028 1.832 1.832 0 0 0-.542-.875 8.014 8.014 0 0 0 2.038-.471 4.051 4.051 0 0 0 1.466-.964c.407-.427.71-.943.885-1.506a6.77 6.77 0 0 0 .3-2.13 4.138 4.138 0 0 0-.26-1.476 3.892 3.892 0 0 0-.795-1.284 2.81 2.81 0 0 0 .162-.582c.033-.2.05-.402.05-.604 0-.26-.03-.52-.09-.773a5.309 5.309 0 0 0-.221-.763.293.293 0 0 0-.111-.02h-.11c-.23.002-.456.04-.674.111a5.34 5.34 0 0 0-.703.26 6.503 6.503 0 0 0-.661.343c-.215.127-.405.249-.573.362a9.578 9.578 0 0 0-5.143 0 13.507 13.507 0 0 0-.572-.362 6.022 6.022 0 0 0-.672-.342 4.516 4.516 0 0 0-.705-.261 2.203 2.203 0 0 0-.662-.111h-.11a.29.29 0 0 0-.11.02 5.844 5.844 0 0 0-.23.763c-.054.254-.08.513-.081.773 0 .202.017.404.051.604.033.199.086.394.16.582A3.888 3.888 0 0 0 5.702 10a4.142 4.142 0 0 0-.263 1.476 6.871 6.871 0 0 0 .292 2.12c.181.563.483 1.08.884 1.516.415.422.915.75 1.466.964.653.25 1.337.41 2.033.476a1.828 1.828 0 0 0-.452.633 2.99 2.99 0 0 0-.2.744 2.754 2.754 0 0 1-1.175.27 1.788 1.788 0 0 1-1.065-.3 2.904 2.904 0 0 1-.752-.824 3.1 3.1 0 0 0-.292-.382 2.693 2.693 0 0 0-.372-.343 1.841 1.841 0 0 0-.432-.24 1.2 1.2 0 0 0-.481-.101c-.04.001-.08.005-.12.01a.649.649 0 0 0-.162.02.408.408 0 0 0-.13.06.116.116 0 0 0-.06.1.33.33 0 0 0 .14.242c.093.074.17.131.232.171l.03.021c.133.103.261.214.382.333.112.098.213.209.3.33.09.119.168.246.231.381.073.134.15.288.231.463.188.474.522.875.954 1.145.453.243.961.364 1.476.351.174 0 .349-.01.522-.03.172-.028.343-.057.515-.091v1.743a.5.5 0 0 1-.533.521h-.062a10.286 10.286 0 1 1 6.324 0v.005z" />
   </svg>
 );
@@ -38,6 +39,7 @@ const World = (props: IconProps) => (
     width="1em"
     xmlns="http://www.w3.org/2000/svg"
   >
+    <title>World icon</title>
     <path
       fill="none"
       stroke-miterlimit="10"
diff --git a/ui/webapp/src/layout/common/ActiveFiltersList.tsx b/ui/webapp/src/layout/common/ActiveFiltersList.tsx
index d665b776..bbb028b8 100644
--- a/ui/webapp/src/layout/common/ActiveFiltersList.tsx
+++ b/ui/webapp/src/layout/common/ActiveFiltersList.tsx
@@ -206,6 +206,7 @@ const ActiveFiltersList = (props: Props) => {
           <button
             class={`btn btn-link btn-sm text-muted p-0 ps-1 ${styles.btnReset}`}
             onClick={() => props.resetFilters()}
+            aria-label="Reset all filters"
           >
             (reset all)
           </button>
diff --git a/ui/webapp/src/layout/common/ButtonToTopScroll.tsx b/ui/webapp/src/layout/common/ButtonToTopScroll.tsx
index deaab870..c899869d 100644
--- a/ui/webapp/src/layout/common/ButtonToTopScroll.tsx
+++ b/ui/webapp/src/layout/common/ButtonToTopScroll.tsx
@@ -35,6 +35,7 @@ const ButtonToTopScroll = () => {
             e.preventDefault();
             scrollToTop(onSmallDevice);
           }}
+          aria-label="Scroll to top"
         >
           <SVGIcon kind={SVGIconKind.ArrowTop} class={`position-relative ${styles.btnTopIcon}`} />
         </button>
diff --git a/ui/webapp/src/layout/common/Checkbox.tsx b/ui/webapp/src/layout/common/Checkbox.tsx
index 4737e535..165dfa74 100644
--- a/ui/webapp/src/layout/common/Checkbox.tsx
+++ b/ui/webapp/src/layout/common/Checkbox.tsx
@@ -18,38 +18,39 @@ interface Props {
   onChange?: (value: string, checked: boolean) => void;
 }
 
-const CheckBox = (props: Props) => (
-  <div class={`form-check me-sm-2 mb-0 ${props.class}`}>
-    <input
-      type={props.type || 'checkbox'}
-      class={`form-check-input rounded-0 ${styles.checkbox}`}
-      classList={{
-        'rounded-0': isUndefined(props.type) || props.type !== 'radio',
-      }}
-      name={props.name}
-      value={props.value}
-      id={`${!isUndefined(props.device) ? `${props.device}-` : ''}${props.name}-${props.value}`}
-      onInput={(e) => {
-        if (props.onChange) {
-          props.onChange(e.currentTarget.value, e.currentTarget.checked);
-        }
-      }}
-      checked={props.checked}
-      aria-checked={props.checked}
-      disabled={props.disabled}
-      tabIndex={0}
-    />
-    <label
-      class={`form-check-label ${styles.label} ${props.labelClass}`}
-      for={`${!isUndefined(props.device) ? `${props.device}-` : ''}${props.name}-${props.value}`}
-    >
-      <div class="d-flex align-items-baseline mw-100">
-        {props.icon && <>{props.icon}</>}
-        <span class="text-truncate">{props.label}</span>
-        {props.legend && <small class="ps-1">{props.legend}</small>}
-      </div>
-    </label>
-  </div>
-);
+const CheckBox = (props: Props) => {
+  const inputId = () => `${!isUndefined(props.device) ? `${props.device}-` : ''}${props.name}-${props.value}`;
+
+  return (
+    <div class={`form-check me-sm-2 mb-0 ${props.class}`}>
+      <input
+        type={props.type || 'checkbox'}
+        class={`form-check-input rounded-0 ${styles.checkbox}`}
+        classList={{
+          'rounded-0': isUndefined(props.type) || props.type !== 'radio',
+        }}
+        name={props.name}
+        value={props.value}
+        id={inputId()}
+        onInput={(e) => {
+          if (props.onChange) {
+            props.onChange(e.currentTarget.value, e.currentTarget.checked);
+          }
+        }}
+        checked={props.checked}
+        aria-checked={props.checked}
+        disabled={props.disabled}
+        tabIndex={0}
+      />
+      <label class={`form-check-label ${styles.label} ${props.labelClass}`} for={inputId()}>
+        <div class="d-flex align-items-baseline mw-100">
+          {props.icon && <>{props.icon}</>}
+          <span class="text-truncate">{props.label}</span>
+          {props.legend && <small class="ps-1">{props.legend}</small>}
+        </div>
+      </label>
+    </div>
+  );
+};
 
 export default CheckBox;
diff --git a/ui/webapp/src/layout/common/DownloadDropdown.tsx b/ui/webapp/src/layout/common/DownloadDropdown.tsx
index 6292034d..efdff2bc 100644
--- a/ui/webapp/src/layout/common/DownloadDropdown.tsx
+++ b/ui/webapp/src/layout/common/DownloadDropdown.tsx
@@ -97,6 +97,7 @@ const DownloadDropdown = () => {
           e.stopPropagation();
           setVisibleDropdown(!visibleDropdown());
         }}
+        aria-label="Open dropdown"
       >
         <SVGIcon kind={SVGIconKind.Download} />
       </button>
@@ -120,6 +121,7 @@ const DownloadDropdown = () => {
 
                 downloadFile(DocType.Landscape, Format.PDF);
               }}
+              aria-label="Download landscape in PDF format"
             >
               <div class="d-flex flex-row align-items-start">
                 <div class="me-3 position-relative">
@@ -155,6 +157,7 @@ const DownloadDropdown = () => {
 
                 downloadFile(DocType.Landscape, Format.PNG);
               }}
+              aria-label="Download landscape in PNG format"
             >
               <div class="d-flex flex-row align-items-start">
                 <div class="me-3 position-relative">
@@ -192,6 +195,7 @@ const DownloadDropdown = () => {
 
                 downloadFile(DocType.Items, Format.CSV);
               }}
+              aria-label="Download items in CSV format"
             >
               <div class="d-flex flex-row align-items-start">
                 <div class="me-3 position-relative">
@@ -222,6 +226,7 @@ const DownloadDropdown = () => {
 
                 downloadFile(DocType.Projects, Format.CSV);
               }}
+              aria-label="Download projects in CSV format"
             >
               <div class="d-flex flex-row align-items-start">
                 <div class="me-3 position-relative">
diff --git a/ui/webapp/src/layout/common/FiltersInLine.tsx b/ui/webapp/src/layout/common/FiltersInLine.tsx
index 1e34f0c1..a405d931 100644
--- a/ui/webapp/src/layout/common/FiltersInLine.tsx
+++ b/ui/webapp/src/layout/common/FiltersInLine.tsx
@@ -38,7 +38,7 @@ const Filters = (props: FiltersProps) => {
           class={`btn btn-md btn-light text-decoration-none rounded-0 text-truncate text-start w-100 ${styles.btn}`}
           type="button"
           onClick={() => setVisibleDropdown(!visibleDropdown())}
-          aria-label="Filters button"
+          aria-label={`${props.section.title} filters`}
           aria-expanded={visibleDropdown()}
         >
           {props.section.title}
diff --git a/ui/webapp/src/layout/common/FullScreenModal.tsx b/ui/webapp/src/layout/common/FullScreenModal.tsx
index 889f3c22..e0ddf198 100644
--- a/ui/webapp/src/layout/common/FullScreenModal.tsx
+++ b/ui/webapp/src/layout/common/FullScreenModal.tsx
@@ -7,6 +7,7 @@ import { BANNER_ID } from '../../data';
 import styles from './FullScreenModal.module.css';
 
 interface Props {
+  title: string;
   children: JSXElement | JSXElement[];
   open?: boolean;
   onClose?: () => void;
@@ -53,7 +54,14 @@ const FullScreenModal = (props: Props) => {
   return (
     <Show when={openStatus()}>
       <Portal>
-        <div class={`position-fixed overflow-hidden p-3 top-0 bottom-0 start-0 end-0 ${styles.modal}`} role="dialog">
+        <div
+          class={`position-fixed overflow-hidden p-3 top-0 bottom-0 start-0 end-0 ${styles.modal}`}
+          role="dialog"
+          tabIndex={-1}
+          aria-label={`${props.title} modal`}
+          aria-modal={true}
+          aria-hidden={true}
+        >
           <div class={`position-absolute ${styles.closeWrapper}`}>
             <button
               type="button"
diff --git a/ui/webapp/src/layout/common/Searchbar.tsx b/ui/webapp/src/layout/common/Searchbar.tsx
index dba22471..5e649c06 100644
--- a/ui/webapp/src/layout/common/Searchbar.tsx
+++ b/ui/webapp/src/layout/common/Searchbar.tsx
@@ -12,6 +12,7 @@ import styles from './Searchbar.module.css';
 
 interface Props {
   searchBarClass?: string;
+  device: string;
 }
 
 const SEARCH_DELAY = 3 * 100; // 300ms
@@ -199,8 +200,11 @@ const Searchbar = (props: Props) => {
       <div
         class={`d-flex align-items-center overflow-hidden searchBar lh-base bg-white mx-0 mx-md-auto ${styles.searchBar} ${props.searchBarClass} search`}
       >
+        <label for={`searchbar-${props.device}`} class="visually-hidden">
+          Search items
+        </label>
         <input
-          id="searchbar"
+          id={`searchbar-${props.device}`}
           ref={setInputEl}
           class={`flex-grow-1 ps-2 ps-md-3 border-0 shadow-none bg-transparent lh-base ${styles.input}`}
           type="text"
@@ -264,7 +268,7 @@ const Searchbar = (props: Props) => {
                         onClick={() => {
                           openItemModal(item.id);
                         }}
-                        aria-label={`Open ${item.name} detail`}
+                        aria-label={`Open ${item.name} info`}
                         role="option"
                         aria-selected={index() === highlightedItem()}
                         id={`sl-opt${index()}`}
diff --git a/ui/webapp/src/layout/common/Section.tsx b/ui/webapp/src/layout/common/Section.tsx
index 5aac6f88..700955c2 100644
--- a/ui/webapp/src/layout/common/Section.tsx
+++ b/ui/webapp/src/layout/common/Section.tsx
@@ -115,6 +115,7 @@ const Section = (props: Props) => {
                 <button
                   class={`btn btn-sm btn-link text-muted lh-1 align-baseline p-0 ${styles.resetBtn}`}
                   onClick={() => props.resetFilter!(props.section?.value as FilterCategory)}
+                  aria-label="Reset filter"
                 >
                   (reset)
                 </button>
diff --git a/ui/webapp/src/layout/common/Sidebar.tsx b/ui/webapp/src/layout/common/Sidebar.tsx
index e135cd9d..3f15e4fa 100644
--- a/ui/webapp/src/layout/common/Sidebar.tsx
+++ b/ui/webapp/src/layout/common/Sidebar.tsx
@@ -58,7 +58,7 @@ export const Sidebar = (props: Props) => {
           onClick={() => {
             openStatusChange(true);
           }}
-          aria-label="Open sidebar"
+          aria-label={`Open ${props.buttonTitle || ''} sidebar`}
           aria-expanded={openStatus()}
         >
           <div class="d-flex align-items-center justify-content-center">
diff --git a/ui/webapp/src/layout/common/itemModal/index.tsx b/ui/webapp/src/layout/common/itemModal/index.tsx
index de4931ee..e87bb5c9 100644
--- a/ui/webapp/src/layout/common/itemModal/index.tsx
+++ b/ui/webapp/src/layout/common/itemModal/index.tsx
@@ -46,6 +46,7 @@ const ItemModal = () => {
   return (
     <Show when={!isUndefined(visibleItemId())}>
       <Modal
+        title="Item details"
         size="xl"
         open
         modalDialogClass={visibleEventContent() ? styles.visibleUpcomingEvent : ''}
diff --git a/ui/webapp/src/layout/common/zoomModal/index.tsx b/ui/webapp/src/layout/common/zoomModal/index.tsx
index ee103d66..b9829803 100644
--- a/ui/webapp/src/layout/common/zoomModal/index.tsx
+++ b/ui/webapp/src/layout/common/zoomModal/index.tsx
@@ -88,6 +88,7 @@ const ZoomModal = () => {
         initialRefs={!isUndefined(modal()) ? [modal as Accessor<HTMLDivElement>] : undefined}
         excludedIds={[ITEM_VIEW]}
         onClose={() => updateActiveSection()}
+        title={`${visibleZoomSection()!.category} / ${visibleZoomSection()!.subcategory}`}
       >
         <div class="h-100" ref={setContainer}>
           <Show
diff --git a/ui/webapp/src/layout/explore/card/Card.module.css b/ui/webapp/src/layout/explore/card/Card.module.css
index 11c225ca..08d9437d 100644
--- a/ui/webapp/src/layout/explore/card/Card.module.css
+++ b/ui/webapp/src/layout/explore/card/Card.module.css
@@ -29,6 +29,7 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   word-wrap: normal;
   max-height: 36px;
 }
@@ -37,7 +38,7 @@
   font-size: 0.75rem;
 }
 
-.additionalInfo small {
+.legend {
   font-size: 0.7rem;
 }
 
diff --git a/ui/webapp/src/layout/explore/card/Card.tsx b/ui/webapp/src/layout/explore/card/Card.tsx
index 48cec84e..66bdcf72 100644
--- a/ui/webapp/src/layout/explore/card/Card.tsx
+++ b/ui/webapp/src/layout/explore/card/Card.tsx
@@ -57,6 +57,7 @@ const Card = (props: Props) => {
             class={`m-auto ${styles.logo} ${props.logoClass}`}
             logo={props.item.logo}
             enableLazyLoad
+            ariaHidden={true}
           />
         </div>
 
@@ -152,7 +153,7 @@ const Card = (props: Props) => {
           <Switch>
             <Match when={!isUndefined(stars())}>
               <div class="d-flex flex-row align-items-baseline">
-                <small class="me-1 text-black-50">GitHub stars:</small>
+                <small class={`me-1 ${styles.legend}`}>GitHub stars:</small>
                 <div class="fw-semibold">{stars ? prettifyNumber(stars()!, 1) : '-'}</div>
               </div>
             </Match>
@@ -164,7 +165,7 @@ const Card = (props: Props) => {
                 props.item.crunchbase_data.funding > 0
               }
             >
-              <small class="me-1 text-black-50">Funding:</small>
+              <small class={`me-1 ${styles.legend}`}>Funding:</small>
               <div class="fw-semibold">{prettifyNumber(props.item.crunchbase_data!.funding!)}</div>
             </Match>
           </Switch>
diff --git a/ui/webapp/src/layout/explore/card/Content.tsx b/ui/webapp/src/layout/explore/card/Content.tsx
index 77300cdd..4a4c3745 100644
--- a/ui/webapp/src/layout/explore/card/Content.tsx
+++ b/ui/webapp/src/layout/explore/card/Content.tsx
@@ -36,11 +36,11 @@ const CardList = (props: ListProps) => {
   const items = () => sortItems(itemsList(), props.sorted, props.direction);
 
   return (
-    <div class="row g-4 mb-4">
+    <div class="row g-4 mb-4" role="list">
       <For each={items()}>
         {(item: Item) => {
           return (
-            <div class="col-12 col-lg-6 col-xxl-4 col-xxxl-3">
+            <div class="col-12 col-lg-6 col-xxl-4 col-xxxl-3" role="listitem">
               <div
                 class={`card rounded-0 p-3 ${styles.card}`}
                 onClick={() => updateActiveItemId(item.id)}
@@ -131,6 +131,7 @@ const Content = (props: Props) => {
                                         href={`${GUIDE_PATH}#${getNormalizedName({ title: title })}`}
                                         state={{ from: 'explore' }}
                                         class={`position-relative btn btn-link text-white p-0 pe-2 ${styles.btnIcon}`}
+                                        aria-label={`Open section ${subtitle} on guide page`}
                                       >
                                         <SVGIcon kind={SVGIconKind.Guide} />
                                       </A>
@@ -153,6 +154,7 @@ const Content = (props: Props) => {
                                         })}`}
                                         state={{ from: 'explore' }}
                                         class={`position-relative btn btn-link p-0 pe-2 ${styles.btnIcon}`}
+                                        aria-label={`Open section ${title}/${subtitle} on guide page`}
                                       >
                                         <SVGIcon kind={SVGIconKind.Guide} />
                                       </A>
diff --git a/ui/webapp/src/layout/explore/card/Menu.tsx b/ui/webapp/src/layout/explore/card/Menu.tsx
index 2cfc7384..4a258acd 100644
--- a/ui/webapp/src/layout/explore/card/Menu.tsx
+++ b/ui/webapp/src/layout/explore/card/Menu.tsx
@@ -85,6 +85,7 @@ const Menu = (props: Props) => {
                               }
                               updateRoute(hash);
                             }}
+                            aria-label={subtitle === 'undefined' ? 'None' : subtitle}
                           >
                             <Show when={`#${hash}` === location.hash}>
                               <div class={`position-absolute ${styles.arrow}`}>
diff --git a/ui/webapp/src/layout/explore/filters/SearchbarSection.tsx b/ui/webapp/src/layout/explore/filters/SearchbarSection.tsx
index 05f8db4a..294c2b86 100644
--- a/ui/webapp/src/layout/explore/filters/SearchbarSection.tsx
+++ b/ui/webapp/src/layout/explore/filters/SearchbarSection.tsx
@@ -141,6 +141,7 @@ const SearchbarSection = (props: Props) => {
               <button
                 class={`btn btn-sm btn-link text-muted lh-1 align-baseline p-0 ${styles.resetBtn}`}
                 onClick={() => props.resetFilter(props.section?.value as FilterCategory)}
+                aria-label="Reset filters"
               >
                 (reset)
               </button>
@@ -152,6 +153,7 @@ const SearchbarSection = (props: Props) => {
             >
               <input
                 ref={setInputEl}
+                id={`searchbar-${props.title || props.section!.title}`}
                 class={`flex-grow-1 border-0 shadow-none bg-transparent lh-base ps-2 ${styles.input}`}
                 placeholder={props.placeholder || 'Search'}
                 type="text"
diff --git a/ui/webapp/src/layout/explore/filters/index.tsx b/ui/webapp/src/layout/explore/filters/index.tsx
index b410041d..215c7f3a 100644
--- a/ui/webapp/src/layout/explore/filters/index.tsx
+++ b/ui/webapp/src/layout/explore/filters/index.tsx
@@ -174,6 +174,7 @@ const Filters = (props: Props) => {
           class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-0 me-lg-4 ${styles.filterBtn} btnIconMobile`}
           classList={{ disabled: disabledBtn() }}
           onClick={() => setVisibleFiltersModal(true)}
+          aria-label="Open filters"
         >
           <div class="d-flex flex-row align-items-center">
             <SVGIcon kind={SVGIconKind.Filters} />
@@ -187,22 +188,25 @@ const Filters = (props: Props) => {
         </Show>
       </div>
       <Modal
+        title="Filters"
         modalDialogClass={styles.modal}
         header={
           <div class="d-flex flex-row align-items-baseline">
             <div>Filters</div>
-            <button
-              type="button"
-              title="Reset filters"
-              class="btn btn-sm btn-link text-muted py-0"
-              onClick={(e) => {
-                e.preventDefault();
-                setTmpActiveFilters({});
-              }}
-              aria-label="Reset filters"
-            >
-              (reset all)
-            </button>
+            <Show when={!isEmpty(props.initialActiveFilters())}>
+              <button
+                type="button"
+                title="Reset filters"
+                class="btn btn-sm btn-link text-muted py-0"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setTmpActiveFilters({});
+                }}
+                aria-label="Reset all filters"
+              >
+                (reset all)
+              </button>
+            </Show>
           </div>
         }
         footer={
@@ -240,7 +244,7 @@ const Filters = (props: Props) => {
               </div>
             }
           >
-            <div class="d-flex d-lg-none">
+            <div class="d-flex d-lg-none" role="search">
               <Show when={viewMode() === ViewMode.Card}>
                 <div class="d-flex flex-row mb-4">
                   <div class="d-flex flex-column align-items-start">
@@ -251,7 +255,7 @@ const Filters = (props: Props) => {
                       id="classify"
                       class={`form-select form-select-sm text-muted rounded-0 me-4 ${styles.miniSelect}`}
                       value={props.classify}
-                      aria-label="Classify"
+                      aria-label="Classify options"
                       onChange={(e) => {
                         const classifyOpt = e.currentTarget.value as ClassifyOption;
                         props.setClassify(classifyOpt);
@@ -274,7 +278,7 @@ const Filters = (props: Props) => {
                       id="sorted"
                       class={`form-select form-select-sm text-muted rounded-0 ${styles.miniSelect}`}
                       value={`${props.sorted}_${props.sortDirection}`}
-                      aria-label="Sort"
+                      aria-label="Sort options"
                       onChange={(e) => {
                         const sortValue = e.currentTarget.value;
                         const sortOpt = sortValue.split('_');
diff --git a/ui/webapp/src/layout/explore/grid/Grid.tsx b/ui/webapp/src/layout/explore/grid/Grid.tsx
index 93de4f90..d805a9d6 100644
--- a/ui/webapp/src/layout/explore/grid/Grid.tsx
+++ b/ui/webapp/src/layout/explore/grid/Grid.tsx
@@ -177,6 +177,7 @@ const Grid = (props: Props) => {
                               })}`}
                               state={{ from: 'explore' }}
                               class={`btn btn-link text-white ps-2 pe-1 ${styles.btnIcon}`}
+                              aria-label={`Open ${subcat.subcategoryName} section on guide page`}
                             >
                               <SVGIcon kind={SVGIconKind.Guide} />
                             </A>
@@ -194,6 +195,7 @@ const Grid = (props: Props) => {
                                 });
                               }}
                               class={`btn btn-link text-white ps-1 pe-2 ${styles.btnIcon}`}
+                              aria-label={`Open ${subcat.subcategoryName} section on modal`}
                             >
                               <SVGIcon kind={SVGIconKind.MagnifyingGlass} />
                             </button>
@@ -205,7 +207,7 @@ const Grid = (props: Props) => {
                         <Show
                           when={featuredItems > 0 && featuredItems < sortedItems.length}
                           fallback={
-                            <div class={styles.items}>
+                            <div class={styles.items} role="list">
                               <For each={sortedItems}>
                                 {(item: BaseItem | Item) => {
                                   return (
@@ -221,7 +223,7 @@ const Grid = (props: Props) => {
                             </div>
                           }
                         >
-                          <div class={styles.items}>
+                          <div class={styles.items} role="list">
                             <ItemsList
                               borderColor={props.backgroundColor}
                               items={sortedItems}
diff --git a/ui/webapp/src/layout/explore/grid/GridItem.tsx b/ui/webapp/src/layout/explore/grid/GridItem.tsx
index a6495705..82db2a76 100644
--- a/ui/webapp/src/layout/explore/grid/GridItem.tsx
+++ b/ui/webapp/src/layout/explore/grid/GridItem.tsx
@@ -118,6 +118,7 @@ const GridItem = (props: Props) => {
       when={activeDropdown()}
       fallback={
         <div
+          role="listitem"
           style={props.item.featured && props.item.featured.label ? { border: `2px solid ${props.borderColor}` } : {}}
           class={`card rounded-0 position-relative p-0 ${styles.card}`}
           classList={{
@@ -153,6 +154,7 @@ const GridItem = (props: Props) => {
       }
     >
       <div
+        role="listitem"
         style={props.item.featured && props.item.featured.label ? { border: `2px solid ${props.borderColor}` } : {}}
         class={`card rounded-0 position-relative p-0 ${styles.card}`}
         classList={{
@@ -161,6 +163,7 @@ const GridItem = (props: Props) => {
           whithoutRepo: isUndefined(props.item.oss) || !props.item.oss,
           archived: !isUndefined(props.item.maturity) && props.item.maturity === 'archived',
         }}
+        aria-label={props.item.name}
       >
         <div class="position-absolute opacity-100">
           <Show when={visibleDropdown()}>
@@ -210,8 +213,6 @@ const GridItem = (props: Props) => {
             }}
             aria-label={`${props.item.name} info`}
             aria-expanded={visibleDropdown()}
-            aria-hidden="true"
-            tabIndex={-1}
           >
             <Image
               name={props.item.name}
@@ -224,6 +225,7 @@ const GridItem = (props: Props) => {
               <div
                 class={`text-center text-uppercase text-dark position-absolute start-0 end-0 bottom-0 text-truncate px-1 ${styles.legend}`}
                 style={props.item.featured ? { 'border-top': `2px solid ${props.borderColor}` } : {}}
+                aria-label={props.item.featured!.label}
               >
                 {props.item.featured!.label}
               </div>
diff --git a/ui/webapp/src/layout/explore/index.tsx b/ui/webapp/src/layout/explore/index.tsx
index 257e504e..40647862 100644
--- a/ui/webapp/src/layout/explore/index.tsx
+++ b/ui/webapp/src/layout/explore/index.tsx
@@ -578,6 +578,7 @@ const Explore = (props: Props) => {
                 class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-1 me-lg-4 btnIconMobile ${styles.mobileToCBtn}`}
                 onClick={() => setOpenMenuStatus(true)}
                 disabled={numVisibleItems() === 0 || classify() === ClassifyOption.None}
+                aria-label="Open Table of contents"
               >
                 <SVGIcon kind={SVGIconKind.ToC} />
               </button>
@@ -638,6 +639,7 @@ const Explore = (props: Props) => {
                                 updateQueryString(GROUP_PARAM, group.normalized_name);
                               }, DELAY_ACTIONS);
                             }}
+                            aria-label={group.name}
                           >
                             {group.name}
                           </button>
@@ -659,6 +661,7 @@ const Explore = (props: Props) => {
                             updateQueryString(GROUP_PARAM, ALL_OPTION);
                           }, DELAY_ACTIONS);
                         }}
+                        aria-label="All"
                       >
                         All
                       </button>
@@ -671,7 +674,7 @@ const Explore = (props: Props) => {
                     id="desktop-group"
                     class={`form-select form-select-sm border-primary text-primary rounded-0 me-4 ${styles.desktopSelect}`}
                     value={selectedGroup()}
-                    aria-label="Group"
+                    aria-label="Groups list"
                     onChange={(e) => {
                       setVisibleLoading(true);
                       const group = e.currentTarget.value;
@@ -727,6 +730,7 @@ const Explore = (props: Props) => {
                           }, DELAY_ACTIONS);
                         }
                       }}
+                      aria-label={`Change view mode to ${mode}`}
                     >
                       {mode}
                     </button>
@@ -749,6 +753,7 @@ const Explore = (props: Props) => {
                         onClick={() => {
                           updateZoom(zoom() - 1);
                         }}
+                        aria-label="Decrease zoom level"
                       >
                         <div class={styles.btnSymbol}>-</div>
                       </button>
@@ -759,6 +764,7 @@ const Explore = (props: Props) => {
                         onClick={() => {
                           updateZoom(zoom() + 1);
                         }}
+                        aria-label="Increase zoom level"
                       >
                         <div class={styles.btnSymbol}>+</div>
                       </button>
@@ -773,7 +779,7 @@ const Explore = (props: Props) => {
                     id="classify"
                     class={`form-select form-select-sm border-primary text-primary rounded-0 me-4 ${styles.desktopSelect} ${styles.miniSelect}`}
                     value={classify()}
-                    aria-label="Classify"
+                    aria-label="Classify options"
                     onChange={(e) => {
                       setVisibleLoading(true);
                       const classifyOpt = e.currentTarget.value as ClassifyOption;
@@ -798,7 +804,7 @@ const Explore = (props: Props) => {
                     id="sorted"
                     class={`form-select form-select-sm border-primary text-primary rounded-0 ${styles.desktopSelect} ${styles.midSelect}`}
                     value={`${sorted()}_${sortDirection()}`}
-                    aria-label="Sort"
+                    aria-label="Sort options"
                     onChange={(e) => {
                       setVisibleLoading(true);
                       const sortValue = e.currentTarget.value;
@@ -849,7 +855,7 @@ const Explore = (props: Props) => {
                 id="mobile-group"
                 class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                 value={selectedGroup() || props.initialData.groups![0].normalized_name}
-                aria-label="Group"
+                aria-label="Groups list"
                 onChange={(e) => {
                   setVisibleLoading(true);
                   const group = e.currentTarget.value;
diff --git a/ui/webapp/src/layout/explore/mobile/Card.module.css b/ui/webapp/src/layout/explore/mobile/Card.module.css
index 60995a65..13947014 100644
--- a/ui/webapp/src/layout/explore/mobile/Card.module.css
+++ b/ui/webapp/src/layout/explore/mobile/Card.module.css
@@ -34,6 +34,7 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  line-clamp: 2;
   word-wrap: normal;
   max-height: 40px;
 }
@@ -42,7 +43,7 @@
   font-size: 0.75rem;
 }
 
-.additionalInfo small {
+.legend {
   font-size: 0.7rem;
 }
 
diff --git a/ui/webapp/src/layout/explore/mobile/Card.tsx b/ui/webapp/src/layout/explore/mobile/Card.tsx
index 07ed754c..52f5cbde 100644
--- a/ui/webapp/src/layout/explore/mobile/Card.tsx
+++ b/ui/webapp/src/layout/explore/mobile/Card.tsx
@@ -97,7 +97,7 @@ const Card = (props: Props) => {
           <Switch>
             <Match when={!isUndefined(stars())}>
               <div class="d-flex flex-row align-items-baseline">
-                <small class="me-1 text-black-50">GitHub stars:</small>
+                <small class={`me-1 ${styles.legend}`}>GitHub stars:</small>
                 <div class="fw-semibold">{stars ? prettifyNumber(stars()!, 1) : '-'}</div>
               </div>
             </Match>
@@ -109,7 +109,7 @@ const Card = (props: Props) => {
                 props.item.crunchbase_data.funding > 0
               }
             >
-              <small class="me-1 text-black-50">Funding:</small>
+              <small class={`me-1 ${styles.legend}`}>Funding:</small>
               <div class="fw-semibold">{prettifyNumber(props.item.crunchbase_data!.funding!)}</div>
             </Match>
           </Switch>
diff --git a/ui/webapp/src/layout/explore/mobile/MobileGrid.tsx b/ui/webapp/src/layout/explore/mobile/MobileGrid.tsx
index 8c6b6cad..04a8f7d7 100644
--- a/ui/webapp/src/layout/explore/mobile/MobileGrid.tsx
+++ b/ui/webapp/src/layout/explore/mobile/MobileGrid.tsx
@@ -44,30 +44,34 @@ const MobileGrid = (props: Props) => {
             />
           }
         >
-          <For each={items()}>
-            {(item: BaseItem | Item) => {
-              return (
-                <div
-                  style={item.featured && item.featured.label ? { border: `2px solid ${props.bgColor}` } : {}}
-                  class={`card rounded-0 position-relative p-0 ${styles.card}`}
-                  classList={{
-                    whithoutRepo: isUndefined(item.oss) || !item.oss,
-                    archived: !isUndefined(item.maturity) && item.maturity === 'archived',
-                  }}
-                >
-                  <button
-                    class={`btn border-0 w-100 h-100 d-flex flex-row align-items-center ${styles.cardContent}`}
-                    onClick={(e) => {
-                      e.preventDefault();
-                      updateActiveItemId(item.id);
+          <div class="grid">
+            <For each={items()}>
+              {(item: BaseItem | Item) => {
+                return (
+                  <div
+                    role="listitem"
+                    style={item.featured && item.featured.label ? { border: `2px solid ${props.bgColor}` } : {}}
+                    class={`card rounded-0 position-relative p-0 ${styles.card}`}
+                    classList={{
+                      whithoutRepo: isUndefined(item.oss) || !item.oss,
+                      archived: !isUndefined(item.maturity) && item.maturity === 'archived',
                     }}
                   >
-                    <Image name={item.name} class={`m-auto ${styles.logo}`} logo={item.logo} enableLazyLoad />
-                  </button>
-                </div>
-              );
-            }}
-          </For>
+                    <button
+                      class={`btn border-0 w-100 h-100 d-flex flex-row align-items-center ${styles.cardContent}`}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        updateActiveItemId(item.id);
+                      }}
+                      aria-label={`Open ${item.name} info`}
+                    >
+                      <Image name={item.name} class={`m-auto ${styles.logo}`} logo={item.logo} enableLazyLoad />
+                    </button>
+                  </div>
+                );
+              }}
+            </For>
+          </div>
         </Show>
       </Show>
     </div>
diff --git a/ui/webapp/src/layout/finances/MobileFilters.tsx b/ui/webapp/src/layout/finances/MobileFilters.tsx
index e4c0c67f..b8703fed 100644
--- a/ui/webapp/src/layout/finances/MobileFilters.tsx
+++ b/ui/webapp/src/layout/finances/MobileFilters.tsx
@@ -25,6 +25,7 @@ const MobileFilters = (props: Props) => {
           title="Filters"
           class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-0 me-md-4 ${styles.filterBtn} btnIconMobile me-3`}
           onClick={() => setOpenSidebar(true)}
+          aria-label="Open sidebar"
         >
           <div class="d-flex flex-row align-items-center">
             <SVGIcon kind={SVGIconKind.Filters} />
diff --git a/ui/webapp/src/layout/finances/index.tsx b/ui/webapp/src/layout/finances/index.tsx
index 03a852cf..8652e68d 100644
--- a/ui/webapp/src/layout/finances/index.tsx
+++ b/ui/webapp/src/layout/finances/index.tsx
@@ -287,7 +287,7 @@ const Finances = () => {
       id="order"
       class={`form-select form-select-sm rounded-0 ${styles.select}`}
       value={`${selectedSortOption().by}-${selectedSortOption().direction}`}
-      aria-label="Order"
+      aria-label="Order options"
       onChange={(e) => {
         const options = e.target.value.split('-');
         const selectedOption = { by: options[0], direction: options[1] as 'asc' | 'desc' };
@@ -392,6 +392,7 @@ const Finances = () => {
                             });
                           }
                         }}
+                        aria-label={`Open ${kind}`}
                       >
                         {kind}
                       </button>
diff --git a/ui/webapp/src/layout/games/Content.tsx b/ui/webapp/src/layout/games/Content.tsx
index 512ad246..d85c6720 100644
--- a/ui/webapp/src/layout/games/Content.tsx
+++ b/ui/webapp/src/layout/games/Content.tsx
@@ -49,7 +49,7 @@ const Content = () => {
   });
 
   return (
-    <div class={`d-flex flex-column h-100 ${styles.wrapper}`}>
+    <div class={`d-flex flex-column h-100 ${styles.wrapper}`} aria-relevant="all" aria-live="assertive">
       <div
         style={{ 'background-image': `url(${pattern})` }}
         class={`d-flex flex-column border flex-grow-1 mt-3 ${styles.game}`}
@@ -61,15 +61,28 @@ const Content = () => {
           <div class="col">
             <Show when={!isUndefined(quizState())}>
               <div class="d-flex flex-row justify-content-between justify-content-xl-start text-light">
-                <div class="fw-semibold">
+                <div
+                  class="fw-semibold"
+                  aria-label={`question ${quizState()!.current_question.index + 1} of ${activeQuiz()!.questions().length}`}
+                >
                   {quizState()!.current_question.index + 1} / {activeQuiz()!.questions().length}
                 </div>
                 <div class="d-flex flex-row align-items-center ms-4 ms-xl-5">
                   <div class={`border border-2 border-light ${styles.dot} ${styles.dotCorrect}`} />
-                  <div class={`ms-2 fw-semibold ${styles.score}`}>{quizState()!.score.correct}</div>
+                  <div
+                    class={`ms-2 fw-semibold ${styles.score}`}
+                    aria-label={`${quizState()!.score.correct} correct guesses`}
+                  >
+                    {quizState()!.score.correct}
+                  </div>
 
-                  <div class={`ms-3 ms-xl-4 border border-2 border-light  ${styles.dot} ${styles.dotWrong}`} />
-                  <div class={`ms-2 fw-semibold ${styles.score}`}>{quizState()!.score.wrong}</div>
+                  <div class={`ms-3 ms-xl-4 border border-2 border-light ${styles.dot} ${styles.dotWrong}`} />
+                  <div
+                    class={`ms-2 fw-semibold ${styles.score}`}
+                    aria-label={`${quizState()!.score.correct} wrong guesses`}
+                  >
+                    {quizState()!.score.wrong}
+                  </div>
                 </div>
               </div>
             </Show>
@@ -82,6 +95,7 @@ const Content = () => {
               <button
                 class={`btn btn-secondary rounded-0 text-uppercase border border-4 border-light ${styles.btn}`}
                 onClick={startNewGame}
+                aria-label="Start new game"
               >
                 New game
               </button>
@@ -102,6 +116,7 @@ const Content = () => {
             <button
               class={`btn btn-secondary rounded-0 text-uppercase border border-4 border-light ${styles.btn}`}
               onClick={() => setQuizState(activeQuiz()!.state())}
+              aria-label="Start game"
             >
               New game
             </button>
@@ -141,6 +156,7 @@ const Content = () => {
                           setSelectedAnswer(index());
                           setQuizState(activeQuiz()!.check_player_guess(index()));
                         }}
+                        role="button"
                       >
                         <div class={`d-flex align-items-center ${styles.logoContent}`}>
                           <div
@@ -152,7 +168,7 @@ const Content = () => {
                                 <SVGIcon kind={SVGIconKind.NotImage} class={`opacity-25 m-auto w-100 ${styles.logo}`} />
                               }
                             >
-                              <Image name={option.item} logo={logo!} class={`m-auto w-100 ${styles.logo}`} />
+                              <Image logo={logo!} class={`m-auto w-100 ${styles.logo}`} ariaHidden={true} />
                             </Show>
                           </div>
                         </div>
@@ -171,23 +187,27 @@ const Content = () => {
             <div
               class={`position-relative d-flex flex-row justify-content-between mt-auto py-2 py-xl-4 ${styles.buttons}`}
             >
+              {/* Start new game */}
               <Show when={!isUndefined(quizState()) && !quizState()!.current_question.is_last}>
                 <div class="d-block d-xl-none">
                   <button
                     class={`btn btn-secondary rounded-0 text-uppercase border border-4 border-light ${styles.btn}`}
                     onClick={startNewGame}
+                    aria-label="Start new game"
                   >
                     New game
                   </button>
                 </div>
               </Show>
 
+              {/* Play again */}
               <Show when={quizState()!.game_over}>
                 <div class="w-100 text-center">
                   <button
                     class={`btn btn-secondary rounded-0 text-uppercase border border-4 border-light ${styles.btn}`}
                     disabled={!quizState()!.current_question.answered}
                     onClick={startNewGame}
+                    aria-label="Play again"
                   >
                     Play again
                   </button>
@@ -204,6 +224,7 @@ const Content = () => {
                       setSelectedAnswer(null);
                       setQuizState(activeQuiz()!.next_question());
                     }}
+                    aria-label="Next question"
                   >
                     Next
                   </button>
diff --git a/ui/webapp/src/layout/guide/Guide.module.css b/ui/webapp/src/layout/guide/Guide.module.css
index 96c3ebf5..dd95bfb3 100644
--- a/ui/webapp/src/layout/guide/Guide.module.css
+++ b/ui/webapp/src/layout/guide/Guide.module.css
@@ -16,6 +16,10 @@
   border-left: 3px solid var(--bs-gray-300);
 }
 
+.guide blockquote :is(h1, h2, h3, h4, h5, h6) {
+  font-size: 1.25rem;
+}
+
 .guide img {
   max-width: 100%;
 }
@@ -33,13 +37,14 @@
   font-weight: 400;
 }
 
-.guide *:not(blockquote) > :is(h4, h5, h6) {
+.guide *:not(blockquote) > :is(h3, h4, h5, h6) {
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .guide a:not(:global(.link)) {
   color: var(--color1);
+  font-weight: 600;
 }
 
 .catSection {
diff --git a/ui/webapp/src/layout/guide/SubcategoryGrid.tsx b/ui/webapp/src/layout/guide/SubcategoryGrid.tsx
index 9bd2db91..fe0ab08b 100644
--- a/ui/webapp/src/layout/guide/SubcategoryGrid.tsx
+++ b/ui/webapp/src/layout/guide/SubcategoryGrid.tsx
@@ -42,11 +42,12 @@ const SubcategoryGrid = (props: Props) => {
 
   return (
     <Show when={!isUndefined(props.items)}>
-      <div class={`d-grid d-sm-none justify-content-start ${styles.mobileItems}`}>
+      <div class={`d-grid d-sm-none justify-content-start ${styles.mobileItems}`} role="list">
         <For each={props.items}>
           {(item: BaseItem | Item) => {
             return (
               <div
+                role="listitem"
                 style={item.featured && item.featured.label ? { border: `2px solid ${COLORS[0]}` } : {}}
                 class={`card rounded-0 position-relative p-0 ${styles.card}`}
                 classList={{
@@ -59,6 +60,7 @@ const SubcategoryGrid = (props: Props) => {
                     e.preventDefault();
                     updateActiveItemId(item.id);
                   }}
+                  aria-label="Open item details"
                 >
                   <Image name={item.name} class={`m-auto ${styles.logo}`} logo={item.logo} />
                 </button>
@@ -68,7 +70,7 @@ const SubcategoryGrid = (props: Props) => {
         </For>
       </div>
       <div class="d-none d-sm-block ">
-        <div ref={setContainer} class={`my-4 justify-content-start ${styles.grid}`}>
+        <div ref={setContainer} class={`my-4 justify-content-start ${styles.grid}`} role="list">
           {(() => {
             const items = [];
             const itemsPerRow = calculateGridItemsPerRow(100, containerWidth(), 75, true);
diff --git a/ui/webapp/src/layout/guide/ToC.tsx b/ui/webapp/src/layout/guide/ToC.tsx
index 9a9edde9..b5120dd0 100644
--- a/ui/webapp/src/layout/guide/ToC.tsx
+++ b/ui/webapp/src/layout/guide/ToC.tsx
@@ -35,6 +35,7 @@ const ToCOption = (props: OptionProps) => {
         onClick={() => {
           props.updateActiveTitle(props.option.id);
         }}
+        aria-label={`Open ${props.option.title} section`}
       >
         {props.option.title}
       </button>
diff --git a/ui/webapp/src/layout/logos/index.tsx b/ui/webapp/src/layout/logos/index.tsx
index 4090d3a3..a01a1bd2 100644
--- a/ui/webapp/src/layout/logos/index.tsx
+++ b/ui/webapp/src/layout/logos/index.tsx
@@ -237,6 +237,7 @@ const Logos = () => {
                     <input
                       onInput={() => setHiddenNonPublicOrgs(!hiddenNonPublicOrgs())}
                       checked={hiddenNonPublicOrgs()}
+                      aria-checked={hiddenNonPublicOrgs()}
                       class="form-check-input"
                       type="checkbox"
                       role="switch"
@@ -249,11 +250,11 @@ const Logos = () => {
                 </div>
                 <div class="position-relative mt-5">
                   <Show when={!isUndefined(items())}>
-                    <div class={styles.grid}>
+                    <div class={styles.grid} role="list">
                       <For each={items()}>
                         {(item) => {
                           return (
-                            <div class="d-flex align-items-center justify-content-center">
+                            <div class="d-flex align-items-center justify-content-center" role="listitem">
                               <Image name={item.name} class={`m-auto ${styles.logo}`} logo={item.logo} />
                             </div>
                           );
diff --git a/ui/webapp/src/layout/navigation/EmbedModal.tsx b/ui/webapp/src/layout/navigation/EmbedModal.tsx
index 5c2dfa79..051fb46c 100644
--- a/ui/webapp/src/layout/navigation/EmbedModal.tsx
+++ b/ui/webapp/src/layout/navigation/EmbedModal.tsx
@@ -166,7 +166,7 @@ const EmbedModal = () => {
 
   const getExtraCode = () => {
     if (displayItemModal()) {
-      return `\n<!-- Landscape embed item details view -->\n<!-- NOTE: the script and the iframe below should only be added once, even when adding multiple embed views to the page -->\n<script src="${embedOrigin()}/embed-item.js"></script>\n<iframe id="embed-item" src="${embedOrigin()}/embed-item.html" style="width:100%;height:100%;display:block;border:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:999999999;display:none;"></iframe>`;
+      return `\n<!-- Landscape embed item details view -->\n<!-- NOTE: the script and the iframe below should only be added once, even when adding multiple embed views to the page -->\n<script src="${embedOrigin()}/embed-item.js"></script>\n<iframe id="embed-item" src="${embedOrigin()}/embed-item.html" style="width:100%;height:100%;display:block;border:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:2147483647;display:none;"></iframe>`;
     }
     return '';
   };
@@ -333,12 +333,14 @@ const EmbedModal = () => {
               replace: true,
             });
           }}
+          aria-label='Open "Embeddable view setup" modal'
         >
           <SVGIcon kind={SVGIconKind.Embed} />
         </button>
       </div>
       <Show when={visibleModal()}>
         <Modal
+          title="Embeddable view setup"
           size="xxl"
           open
           bodyClass={styles.modalBody}
@@ -372,7 +374,7 @@ const EmbedModal = () => {
                           id="categories"
                           class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                           value={selectedCategory()}
-                          aria-label="Categories"
+                          aria-label="Categories list"
                           onChange={(e) => {
                             updateCategory(e.currentTarget.value);
                           }}
@@ -392,7 +394,7 @@ const EmbedModal = () => {
                           id="subcategories"
                           class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                           value={selectedSubcategory() || subcategoriesList()[0].normalized_name}
-                          aria-label="Subcategories"
+                          aria-label="Subcategories list"
                           onChange={(e) => {
                             const value = e.currentTarget.value;
                             setSelectedSubcategory(value);
@@ -501,7 +503,7 @@ const EmbedModal = () => {
                             id="fontFamily"
                             class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                             value={titleFontFamily()}
-                            aria-label="Font family"
+                            aria-label="Font family options"
                             onChange={(e) => {
                               setTitleFontFamily(e.currentTarget.value as FontFamily);
                             }}
@@ -520,6 +522,7 @@ const EmbedModal = () => {
                           <div>
                             <input
                               type="number"
+                              id="titleSize"
                               class={`form-control withShadow rounded-0 border-0 ${styles.input}`}
                               min={10}
                               max={60}
@@ -538,7 +541,7 @@ const EmbedModal = () => {
                           id="alignment"
                           class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                           value={titleAlignment()}
-                          aria-label="Styles"
+                          aria-label="Title aligment options"
                           onChange={(e) => {
                             setTitleAlignment(e.currentTarget.value as Alignment);
                           }}
@@ -590,6 +593,7 @@ const EmbedModal = () => {
                             <div>
                               <input
                                 type="number"
+                                id="itemNameSize"
                                 class={`form-control withShadow rounded-0 border-0 ${styles.input}`}
                                 min={10}
                                 max={40}
@@ -610,7 +614,7 @@ const EmbedModal = () => {
                           id="styles"
                           class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                           value={selectedStyle()}
-                          aria-label="Styles"
+                          aria-label="Style options"
                           onChange={(e) => {
                             setSelectedStyle(e.currentTarget.value as Style);
                           }}
@@ -630,7 +634,7 @@ const EmbedModal = () => {
                             id="sizes"
                             class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                             value={selectedSize()}
-                            aria-label="Sizes"
+                            aria-label="Size options"
                             onChange={(e) => {
                               setSelectedSize(e.currentTarget.value as Size);
                             }}
@@ -648,7 +652,7 @@ const EmbedModal = () => {
                             id="alignment"
                             class={`form-select form-select-md border-0 rounded-0 ${styles.select}`}
                             value={itemsAlignment()}
-                            aria-label="Styles"
+                            aria-label="Items aligment options"
                             onChange={(e) => {
                               setItemsAlignment(e.currentTarget.value as Alignment);
                             }}
@@ -694,6 +698,7 @@ const EmbedModal = () => {
                           <Show when={itemsSpacingType() === SpacingType.Custom}>
                             <input
                               type="number"
+                              id="itemsSpacing"
                               min={0}
                               class={`form-control withShadow rounded-0 border-0 ${styles.input}`}
                               value={itemsSpacing()}
@@ -714,10 +719,11 @@ const EmbedModal = () => {
                       </div>
                       <Show when={!isUndefined(url())}>
                         <div class="p-4 pt-2 flex-grow-1">
-                          <iframe src={url()} class="d-block w-100 h-100 border-0 scroll-auto" />
+                          <iframe title="Embed grid" src={url()} class="d-block w-100 h-100 border-0 scroll-auto" />
                           <Show when={displayItemModal() && embedScriptLoaded()}>
                             <iframe
                               id="embed-item"
+                              title="Embed item details view"
                               src={`${embedOrigin()}/embed-item.html`}
                               style={{
                                 width: '100%',
@@ -729,7 +735,7 @@ const EmbedModal = () => {
                                 bottom: '0',
                                 left: '0',
                                 right: '0',
-                                'z-index': '999999999',
+                                'z-index': '2147483647',
                               }}
                             />
                           </Show>
diff --git a/ui/webapp/src/layout/navigation/Footer.tsx b/ui/webapp/src/layout/navigation/Footer.tsx
index 71126209..e6b7069d 100644
--- a/ui/webapp/src/layout/navigation/Footer.tsx
+++ b/ui/webapp/src/layout/navigation/Footer.tsx
@@ -141,6 +141,7 @@ const Footer = () => {
           <button
             class={`btn btn-link btn-lg ${styles.cookieBtn}`}
             onClick={() => window.Osano.cm.showDrawer('osano-cm-dom-info-dialog-open')}
+            aria-label='Open "Cookie Preferences" dialog'
           >
             <SVGIcon kind={SVGIconKind.OsanoCookie} />
           </button>
diff --git a/ui/webapp/src/layout/navigation/Header.tsx b/ui/webapp/src/layout/navigation/Header.tsx
index 37e12060..371a91e9 100644
--- a/ui/webapp/src/layout/navigation/Header.tsx
+++ b/ui/webapp/src/layout/navigation/Header.tsx
@@ -60,6 +60,7 @@ const Header = (props: Props) => {
                 });
                 scrollToTop(false);
               }}
+              aria-label='Go to "Explore" page'
             >
               <Image class={styles.logo} logo={logo()!} name="Landscape logo" height={48} />
             </button>
@@ -89,6 +90,7 @@ const Header = (props: Props) => {
                   scrollToTop(false);
                 }
               }}
+              aria-label='Go to "Explore" page'
             >
               Explore
             </button>
@@ -107,6 +109,7 @@ const Header = (props: Props) => {
                     scrollToTop(false);
                   }
                 }}
+                aria-label='Go to "Guide" page'
               >
                 Guide
               </button>
@@ -126,6 +129,7 @@ const Header = (props: Props) => {
                     scrollToTop(false);
                   }
                 }}
+                aria-label='Go to "Stats" page'
               >
                 Stats
               </button>
@@ -134,7 +138,7 @@ const Header = (props: Props) => {
 
           <div class={`d-flex flex-row align-items-center ms-auto mt-0 ${styles.searchWrapper}`}>
             <div class="position-relative me-4 w-100">
-              <Searchbar searchBarClass={`${styles.searchBar}`} />
+              <Searchbar searchBarClass={`${styles.searchBar}`} device="desktop" />
             </div>
 
             <div class={`d-flex align-items-center ${styles.icons}`}>
@@ -149,6 +153,7 @@ const Header = (props: Props) => {
                     });
                     scrollToTop(false);
                   }}
+                  aria-label='Go to "Games" page'
                 >
                   <SVGIcon kind={SVGIconKind.Games} class={`position-relative ${styles.linkIcon}`} />
                 </button>
diff --git a/ui/webapp/src/layout/navigation/MobileDropdown.tsx b/ui/webapp/src/layout/navigation/MobileDropdown.tsx
index cf9a59f0..70d01ef6 100644
--- a/ui/webapp/src/layout/navigation/MobileDropdown.tsx
+++ b/ui/webapp/src/layout/navigation/MobileDropdown.tsx
@@ -44,6 +44,7 @@ const MobileDropdown = (props: Props) => {
             activeClass="activeLink"
             href={EXPLORE_PATH}
             onClick={closeDropdown}
+            aria-label="Go to Explore page"
             end
           >
             Explore
diff --git a/ui/webapp/src/layout/navigation/MobileHeader.tsx b/ui/webapp/src/layout/navigation/MobileHeader.tsx
index 2560b84e..a55d7624 100644
--- a/ui/webapp/src/layout/navigation/MobileHeader.tsx
+++ b/ui/webapp/src/layout/navigation/MobileHeader.tsx
@@ -47,6 +47,7 @@ const MobileHeader = (props: Props) => {
               title="Index"
               class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 p-0 ${styles.mobileBtn}`}
               onClick={() => openMenu(true)}
+              aria-label='Open "Table of contents"'
             >
               <SVGIcon kind={SVGIconKind.ToC} />
             </button>
@@ -54,7 +55,7 @@ const MobileHeader = (props: Props) => {
         </div>
         <div>
           <Show when={!isUndefined(logo())}>
-            <button class="btn btn-link" onClick={() => scrollToTop(true)}>
+            <button class="btn btn-link" onClick={() => scrollToTop(true)} aria-label="Scroll to top">
               <Image logo={logo()!} class={styles.stickyLogo} name="Landscape logo" height={35} />
             </button>
           </Show>
@@ -67,7 +68,7 @@ const MobileHeader = (props: Props) => {
         <div class="container-fluid d-flex flex-column flex-lg-row align-items-center p-3 p-lg-4 mainPadding">
           <div class={`d-flex flex-row justify-content-between align-items-center ${styles.logoWrapper}`}>
             <Show when={!isUndefined(logo())}>
-              <A href={EXPLORE_PATH} class="me-4 me-xl-5">
+              <A href={EXPLORE_PATH} class="me-4 me-xl-5" aria-label="Go to Explore page">
                 <Image class={styles.logo} logo={logo()!} name="Landscape logo" height={48} />
               </A>
             </Show>
@@ -86,7 +87,7 @@ const MobileHeader = (props: Props) => {
           >
             <div class={`d-flex flex-row align-items-center mt-3 mt-md-4 ${styles.searchWrapper}`}>
               <div class="position-relative w-100">
-                <Searchbar />
+                <Searchbar device="mobile" />
               </div>
               <div class="d-none d-lg-flex align-items-center">
                 <DownloadDropdown />
diff --git a/ui/webapp/src/layout/notFound/index.tsx b/ui/webapp/src/layout/notFound/index.tsx
index 33062fad..e968bcc9 100644
--- a/ui/webapp/src/layout/notFound/index.tsx
+++ b/ui/webapp/src/layout/notFound/index.tsx
@@ -17,7 +17,11 @@ const NotFound = () => {
         </div>
         <div class="h1 text-center mb-4">Error 404 - Page Not Found</div>
         <div class="h3 text-center mb-5">The page you were looking for wasn't found</div>
-        <A href={EXPLORE_PATH} class="btn btn-primary rounded-0 text-white btn-lg text-decoration-none">
+        <A
+          href={EXPLORE_PATH}
+          class="btn btn-primary rounded-0 text-white btn-lg text-decoration-none"
+          aria-label="Back home"
+        >
           Back Home
         </A>
       </main>
diff --git a/ui/webapp/src/layout/projects/MobileFilters.tsx b/ui/webapp/src/layout/projects/MobileFilters.tsx
index e4c0c67f..b8703fed 100644
--- a/ui/webapp/src/layout/projects/MobileFilters.tsx
+++ b/ui/webapp/src/layout/projects/MobileFilters.tsx
@@ -25,6 +25,7 @@ const MobileFilters = (props: Props) => {
           title="Filters"
           class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-0 me-md-4 ${styles.filterBtn} btnIconMobile me-3`}
           onClick={() => setOpenSidebar(true)}
+          aria-label="Open sidebar"
         >
           <div class="d-flex flex-row align-items-center">
             <SVGIcon kind={SVGIconKind.Filters} />
diff --git a/ui/webapp/src/layout/projects/index.tsx b/ui/webapp/src/layout/projects/index.tsx
index 45b33ae1..2d7828ae 100644
--- a/ui/webapp/src/layout/projects/index.tsx
+++ b/ui/webapp/src/layout/projects/index.tsx
@@ -249,7 +249,7 @@ const Projects = () => {
       id="order"
       class={`form-select form-select-sm rounded-0 ${styles.select}`}
       value={`${selectedSortOption().by}-${selectedSortOption().direction}`}
-      aria-label="Order"
+      aria-label="Order options"
       onChange={(e) => {
         const options = e.target.value.split('-');
         const selectedOption = { by: options[0], direction: options[1] as 'asc' | 'desc' };
@@ -399,6 +399,7 @@ const Projects = () => {
                         <button
                           class={`btn btn-sm p-0 btn-link fw-semibold w-100 text-start ${styles.projectBtn}`}
                           onClick={() => updateActiveItemId(project.id)}
+                          aria-label={`Open ${project.name} details`}
                         >
                           <div class="d-flex flex-row align-items-center">
                             <div
diff --git a/ui/webapp/src/layout/stats/Box.module.css b/ui/webapp/src/layout/stats/Box.module.css
index edfb7156..9b18d8ca 100644
--- a/ui/webapp/src/layout/stats/Box.module.css
+++ b/ui/webapp/src/layout/stats/Box.module.css
@@ -15,12 +15,12 @@
 
 .legend {
   font-size: 0.8rem;
-  color: var(--bs-gray-600);
+  color: var(--bs-gray-700);
   height: 1.75rem;
 }
 
 .label {
-  color: var(--bs-gray-600);
+  color: var(--bs-gray-700);
   line-height: 0.7rem;
   padding-bottom: 0.75rem;
 }
diff --git a/ui/webapp/src/layout/stats/Box.tsx b/ui/webapp/src/layout/stats/Box.tsx
index cc0fcb19..967a6761 100644
--- a/ui/webapp/src/layout/stats/Box.tsx
+++ b/ui/webapp/src/layout/stats/Box.tsx
@@ -7,11 +7,15 @@ interface Props {
   label: string;
   data?: number | string;
   legend?: string;
+  description?: string;
 }
 
 const Box = (props: Props) => (
   <Show when={!isUndefined(props.data)}>
-    <div class={`text-center p-2 p-md-3 h-100 d-flex flex-column justify-content-center ${styles.box}`}>
+    <div
+      class={`text-center p-2 p-md-3 h-100 d-flex flex-column justify-content-center ${styles.box}`}
+      aria-description={props.description}
+    >
       <div class={`fw-bold text-nowrap mb-0 mt-1 ${styles.data}`}>{props.data}</div>
       <div class={`mb-3 pt-1 ${styles.legend}`}>{props.legend}</div>
       <div class={`fw-semibold text-uppercase text-truncate ${styles.label}`}>
diff --git a/ui/webapp/src/layout/stats/ChartsGroup.tsx b/ui/webapp/src/layout/stats/ChartsGroup.tsx
index aadc666b..990535d1 100644
--- a/ui/webapp/src/layout/stats/ChartsGroup.tsx
+++ b/ui/webapp/src/layout/stats/ChartsGroup.tsx
@@ -141,7 +141,7 @@ const ChartsGroup = (props: Props) => {
         <div class="row g-3 g-lg-4 g-xxl-5 justify-content-center">
           <div class="col-12 col-sm-6 col-xl-8">
             <div class="card rounded-0">
-              <div class="card-body">
+              <div class="card-body" aria-hidden={true}>
                 <SolidApexCharts
                   options={getAreaChartConfig()}
                   series={[{ name: props.name, data: areaSeries() }]}
diff --git a/ui/webapp/src/layout/stats/CollapsableTable.tsx b/ui/webapp/src/layout/stats/CollapsableTable.tsx
index 067dd10d..1cad3ccf 100644
--- a/ui/webapp/src/layout/stats/CollapsableTable.tsx
+++ b/ui/webapp/src/layout/stats/CollapsableTable.tsx
@@ -24,7 +24,7 @@ const CollapsableTable = (props: Props) => {
 
   return (
     <div>
-      <table class={`table table-bordered mb-0 mb-lg-2 ${styles.table}`}>
+      <table class={`table table-bordered mb-0 mb-lg-2 ${styles.table}`} role="treegrid">
         <thead>
           <tr>
             <th class={`border-end-0 ${styles.caretCol}`} />
@@ -53,13 +53,16 @@ const CollapsableTable = (props: Props) => {
                       }
                     }}
                     class={`${styles.grayCell} ${styles.clickable}`}
+                    aria-expanded={isExpanded()}
                   >
                     <td class="border-end-0">
                       <Show when={isExpanded()} fallback={<SVGIcon kind={SVGIconKind.CaretDown} />}>
                         <SVGIcon kind={SVGIconKind.CaretUp} />
                       </Show>
                     </td>
-                    <td class="border-start-0">{cat}</td>
+                    <td class="border-start-0" role="gridcell">
+                      {cat}
+                    </td>
                     <td class="text-end">{props.data[cat].projects}</td>
                   </tr>
                   <Show when={isExpanded()}>
diff --git a/ui/webapp/src/layout/stats/Content.tsx b/ui/webapp/src/layout/stats/Content.tsx
index 890bcacb..233fedf1 100644
--- a/ui/webapp/src/layout/stats/Content.tsx
+++ b/ui/webapp/src/layout/stats/Content.tsx
@@ -45,7 +45,7 @@ const Content = () => {
                 Distribution by maturity
               </div>
               <div class="d-flex flex-row justify-content-center flex-wrap w-100 pt-4">
-                <Box data={stats()!.projects!.projects} label="Total" />
+                <Box data={stats()!.projects!.projects} label="Total" description="Number total of projects" />
 
                 <Show when={!isEmpty(stats()!.projects!.maturity)}>
                   <For each={sortObjectByValue(stats()!.projects!.maturity, 'asc')}>
@@ -55,7 +55,12 @@ const Content = () => {
 
                       return (
                         <Show when={!isUndefined(num) && !isUndefined(total)}>
-                          <Box data={num} legend={`(${((num * 100) / total).toFixed(2)}%)`} label={maturity} />
+                          <Box
+                            data={num}
+                            legend={`(${((num * 100) / total).toFixed(2)}%)`}
+                            label={maturity}
+                            description={`Number of ${maturity} projects`}
+                          />
                         </Show>
                       );
                     }}
@@ -170,7 +175,7 @@ const Content = () => {
                 Distribution by category
               </div>
               <div class="d-flex flex-row justify-content-center flex-wrap w-100 pt-4">
-                <Box data={stats()!.members!.members} label="Total" />
+                <Box data={stats()!.members!.members} label="Total" description="Number total of members" />
 
                 <Show when={!isEmpty(stats()!.members!.subcategories)}>
                   <For each={sortObjectByValue(stats()!.members!.subcategories, 'asc')}>
@@ -180,7 +185,12 @@ const Content = () => {
 
                       return (
                         <Show when={!isUndefined(num) && !isUndefined(total)}>
-                          <Box data={num} legend={`(${((num * 100) / total).toFixed(2)}%)`} label={subcategory} />
+                          <Box
+                            data={num}
+                            legend={`(${((num * 100) / total).toFixed(2)}%)`}
+                            label={subcategory}
+                            description={`Number of ${subcategory} members`}
+                          />
                         </Show>
                       );
                     }}
@@ -212,10 +222,26 @@ const Content = () => {
                 Repositories
               </div>
               <div class="d-flex flex-row justify-content-center flex-wrap w-100 pt-4">
-                <Box data={stats()!.repositories!.repositories} label="Repositories" />
-                <Box data={prettifyNumber(stats()!.repositories!.contributors, 1)} label="Contributors" />
-                <Box data={prettifyNumber(stats()!.repositories!.stars, 1)} label="Stars" />
-                <Box data={prettifyBytes(stats()!.repositories!.bytes, 0)} label="Source code" />
+                <Box
+                  data={stats()!.repositories!.repositories}
+                  label="Repositories"
+                  description="Number of repositories"
+                />
+                <Box
+                  data={prettifyNumber(stats()!.repositories!.contributors, 1)}
+                  label="Contributors"
+                  description="Number os contributors"
+                />
+                <Box
+                  data={prettifyNumber(stats()!.repositories!.stars, 1)}
+                  label="Stars"
+                  description="Number of stars"
+                />
+                <Box
+                  data={prettifyBytes(stats()!.repositories!.bytes, 0)}
+                  label="Source code"
+                  description="Source code bytes"
+                />
               </div>
 
               <Show
@@ -254,7 +280,7 @@ const Content = () => {
                 <div class={`text-dark text-center my-0 my-lg-4 fw-bold ${styles.subtitle}`}>Activity</div>
                 <div class="py-4">
                   <div class="row gx-3 gx-lg-4 gx-xxl-5 justify-content-center">
-                    <div class="col-12">
+                    <div class="col-12" aria-hidden={true}>
                       <TimestampLineChart
                         tooltipTitle="Commits number"
                         name="Number of weekly commits during the last year"
@@ -327,7 +353,7 @@ const Content = () => {
             <div class="py-4">
               <div class="row g-3 g-lg-4 g-xxl-5 justify-content-center">
                 <Show when={!isEmpty(stats()!.organizations!.funding_rounds)}>
-                  <div class="col-12 col-sm-6">
+                  <div class="col-12 col-sm-6" aria-hidden={true}>
                     <VerticalBarChart
                       name="Number of funding rounds per year"
                       data={stats()!.organizations!.funding_rounds}
@@ -336,7 +362,7 @@ const Content = () => {
                 </Show>
 
                 <Show when={!isEmpty(stats()!.organizations!.funding_rounds_money_raised)}>
-                  <div class="col-12 col-sm-6">
+                  <div class="col-12 col-sm-6" aria-hidden={true}>
                     <VerticalBarChart
                       name="Amount raised in funding rounds per year (excluding undisclosed)"
                       shortName="Amount raised in funding rounds per year"
@@ -353,7 +379,7 @@ const Content = () => {
             <div class="pt-4">
               <div class="row g-3 g-lg-4 g-xxl-5 justify-content-center">
                 <Show when={!isEmpty(stats()!.organizations!.acquisitions)}>
-                  <div class="col-12 col-sm-6">
+                  <div class="col-12 col-sm-6" aria-hidden={true}>
                     <VerticalBarChart
                       name="Number of acquisitions per year"
                       data={stats()!.organizations!.acquisitions}
@@ -362,7 +388,7 @@ const Content = () => {
                 </Show>
 
                 <Show when={!isEmpty(stats()!.organizations!.acquisitions_price)}>
-                  <div class="col-12 col-sm-6">
+                  <div class="col-12 col-sm-6" aria-hidden={true}>
                     <VerticalBarChart
                       name="Acquisitions cost per year (excluding undisclosed)"
                       shortName="Acquisitions cost per year"
diff --git a/ui/webapp/src/layout/stats/HeatMapChart.tsx b/ui/webapp/src/layout/stats/HeatMapChart.tsx
index 635ac567..88ff148a 100644
--- a/ui/webapp/src/layout/stats/HeatMapChart.tsx
+++ b/ui/webapp/src/layout/stats/HeatMapChart.tsx
@@ -130,7 +130,7 @@ const HeatMapChart = (props: Props) => {
   return (
     <Show when={Object.keys(props.data).length > 0}>
       <div class="card rounded-0">
-        <div class="card-body">
+        <div class="card-body" aria-hidden={true}>
           <SolidApexCharts
             options={getHeatMapChartConfig()}
             series={prepareHeatMapData()}
diff --git a/ui/webapp/src/layout/stats/HorizontalBarChart.tsx b/ui/webapp/src/layout/stats/HorizontalBarChart.tsx
index cb2da625..c7e6a68e 100644
--- a/ui/webapp/src/layout/stats/HorizontalBarChart.tsx
+++ b/ui/webapp/src/layout/stats/HorizontalBarChart.tsx
@@ -117,7 +117,7 @@ const HorizontalBarChart = (props: Props) => {
   return (
     <Show when={series().length > 0}>
       <div class="card rounded-0">
-        <div class={`card-body ${styles.chart}`}>
+        <div class={`card-body ${styles.chart}`} aria-hidden={true}>
           <SolidApexCharts
             options={getBarChartConfig()}
             series={[{ name: props.name, data: series() }]}
diff --git a/ui/webapp/src/layout/stats/TimestampLineChart.tsx b/ui/webapp/src/layout/stats/TimestampLineChart.tsx
index 1b791917..58de224b 100644
--- a/ui/webapp/src/layout/stats/TimestampLineChart.tsx
+++ b/ui/webapp/src/layout/stats/TimestampLineChart.tsx
@@ -121,7 +121,7 @@ const TimestampLineChart = (props: Props) => {
   return (
     <Show when={series().length > 0}>
       <div class="card rounded-0">
-        <div class="card-body">
+        <div class="card-body" aria-hidden={true}>
           <SolidApexCharts
             options={getChartConfig()}
             series={[{ name: props.name, data: series() }]}
diff --git a/ui/webapp/src/layout/stats/VerticalBarChart.tsx b/ui/webapp/src/layout/stats/VerticalBarChart.tsx
index 25af2c2b..c0485f6b 100644
--- a/ui/webapp/src/layout/stats/VerticalBarChart.tsx
+++ b/ui/webapp/src/layout/stats/VerticalBarChart.tsx
@@ -122,7 +122,7 @@ const VerticalBarChart = (props: Props) => {
   return (
     <Show when={series().length > 0}>
       <div class="card rounded-0">
-        <div class={`card-body ${styles.chart}`}>
+        <div class={`card-body ${styles.chart}`} aria-hidden={true}>
           <SolidApexCharts
             options={getBarChartConfig()}
             series={[{ name: props.name, data: series() }]}
diff --git a/ui/webapp/src/layout/upcomingEvents/UpcomingEvents.module.css b/ui/webapp/src/layout/upcomingEvents/UpcomingEvents.module.css
index 065bda5f..6d6ec85a 100644
--- a/ui/webapp/src/layout/upcomingEvents/UpcomingEvents.module.css
+++ b/ui/webapp/src/layout/upcomingEvents/UpcomingEvents.module.css
@@ -22,10 +22,11 @@
 }
 
 .closeBtn {
-  top: -0.5rem;
-  right: -0.5rem;
-  width: 20px;
-  height: 20px;
+  top: -1.25rem;
+  right: -1.25rem;
+  width: 3rem;
+  height: 3rem;
+  padding: 0.85rem;
   font-size: 0.75rem;
   color: var(--bs-gray-700);
   border-color: var(--bs-gray-400) !important;
diff --git a/ui/webapp/src/layout/upcomingEvents/index.tsx b/ui/webapp/src/layout/upcomingEvents/index.tsx
index fc244978..e480fc87 100644
--- a/ui/webapp/src/layout/upcomingEvents/index.tsx
+++ b/ui/webapp/src/layout/upcomingEvents/index.tsx
@@ -48,10 +48,13 @@ const UpcomingEvents = () => {
           />
         </ExternalLink>
         <button
-          class={`position-absolute btn btn-link btn-sm border p-0 bg-white rounded-circle ${styles.closeBtn}`}
+          class={`position-absolute btn btn-link btn-sm border-0 ${styles.closeBtn}`}
           onClick={() => setHiddenEvent(true)}
+          aria-label='Close "Upcoming events" banner'
         >
-          <SVGIcon class="position-relative" kind={SVGIconKind.Close} />
+          <div class={`border p-0 bg-white rounded-circle w-100 h-100`}>
+            <SVGIcon class="position-relative" kind={SVGIconKind.Close} />
+          </div>
         </button>
       </div>
     </Show>
diff --git a/ui/webapp/yarn.lock b/ui/webapp/yarn.lock
index 678ceee4..86064e09 100644
--- a/ui/webapp/yarn.lock
+++ b/ui/webapp/yarn.lock
@@ -865,9 +865,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001646:
-  version "1.0.30001649"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001649.tgz#3ec700309ca0da2b0d3d5fb03c411b191761c992"
-  integrity sha512-fJegqZZ0ZX8HOWr6rcafGr72+xcgJKI9oWfDW5DrD7ExUtgZC7a7R7ZYmZqplh7XDocFdGeIFn7roAxhOeYrPQ==
+  version "1.0.30001650"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001650.tgz#dd1eba0938e39536d184c3c99b2569a13788bc16"
+  integrity sha512-fgEc7hP/LB7iicdXHUI9VsBsMZmUmlVJeQP2qqQW+3lkqVhbmjEU8zp+h5stWeilX+G7uXuIUIIlWlDw9jdt8g==
 
 chalk@^2.4.2:
   version "2.4.2"
@@ -1609,7 +1609,7 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-postcss@^8.4.39:
+postcss@^8.4.40:
   version "8.4.41"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
   integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
@@ -1962,12 +1962,12 @@ vite-plugin-solid@^2.10.2:
     vitefu "^0.2.5"
 
 vite@^5.3.5:
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.3.5.tgz#b847f846fb2b6cb6f6f4ed50a830186138cb83d8"
-  integrity sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.0.tgz#11dca8a961369ba8b5cae42d068c7ad684d5370f"
+  integrity sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==
   dependencies:
     esbuild "^0.21.3"
-    postcss "^8.4.39"
+    postcss "^8.4.40"
     rollup "^4.13.0"
   optionalDependencies:
     fsevents "~2.3.3"