Refine accessibility for WidgetTooltip

Author: valentinogagliardi

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.4.0] - 2023-03-24
+
+## Changed
+
+- refined accessibility for `WidgetTooltip`
+
 ## [3.3.1] - 2023-03-10
 
 ## Changed

__tests__/common/WidgetTooltip.spec.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+
+import { TooltipProvider, WidgetTooltip } from '../../src'
+
+describe('WidgetTooltip', () => {
+  it('does not violate accessibility', async () => {
+    render(
+      <TooltipProvider>
+        <WidgetTooltip helpText='My help text' triggerAriaLabel='Get help' />
+      </TooltipProvider>
+    )
+
+    screen.getByLabelText('Get help')
+  })
+})

src/common/WidgetTooltip.tsx

@@ -7,15 +7,23 @@ import { QuestionMarkCircledIcon } from '@radix-ui/react-icons'
 
 type Props = {
   helpText: string | null
+  triggerAriaLabel: string
 }
 
-const WidgetTooltip = ({ helpText }: Props) => {
+const WidgetTooltip = ({ helpText, triggerAriaLabel }: Props) => {
   if (!helpText) return null
   return (
     <Tooltip
       triggerProps={{
         asChild: true,
-        child: () => <StyledQuestionMarkCircledIcon />
+        child: () => (
+          <Trigger aria-label={triggerAriaLabel}>
+            <StyledQuestionMarkCircledIcon
+              focusable={false}
+              aria-hidden={true}
+            />
+          </Trigger>
+        )
       }}
       contentProps={{
         child: () => (
@@ -29,6 +37,10 @@ const WidgetTooltip = ({ helpText }: Props) => {
   )
 }
 
+const Trigger = styled.button`
+  all: unset;
+`
+
 const ContentWrapper = styled.div`
   max-width: 18.75em;
 `

src/widgets/LicenceWidget.tsx

@@ -128,7 +128,10 @@ const LicenceWidget = ({
     <Widget id={name}>
       <WidgetHeader>
         <WidgetTitle>{label}</WidgetTitle>
-        <WidgetTooltip helpText={help || null} />
+        <WidgetTooltip
+          helpText={help || null}
+          triggerAriaLabel={`Get help about ${label}`}
+        />
       </WidgetHeader>
       {licences.map((licence, index) => {
         const { id, label, accepted, revision, contents_url, attachment_url } =