Merge pull request #1306 from lpsinger/icon-aria

Make sure that all icons are accessible
nasa-gcn · Aug 28, 2023 · 387719a · 387719a
2 parents 7e92932 + f52f5bb
commit 387719a
Show file tree

Hide file tree

Showing 20 changed files with 88 additions and 39 deletions.
diff --git a/app/components/CopyableCode.tsx b/app/components/CopyableCode.tsx
@@ -21,7 +21,7 @@ export function CopyableCode(props: CopyableCodeProps) {
         className="padding-1px text-base-darkest"
         title="Copy to clipboard"
       >
-        <Icon.ContentCopy />{' '}
+        <Icon.ContentCopy role="presentation" />{' '}
         <code>
           <small>{props.text}</small>
         </code>

diff --git a/app/components/CredentialCard.tsx b/app/components/CredentialCard.tsx
@@ -61,7 +61,10 @@ export default function CredentialCard({
             type="button"
             className="usa-button--secondary"
           >
-            <Icon.Delete className="bottom-aligned margin-right-05" />
+            <Icon.Delete
+              role="presentation"
+              className="bottom-aligned margin-right-05"
+            />
             Delete
           </ModalToggleButton>
           <Form
@@ -72,7 +75,10 @@ export default function CredentialCard({
             <input type="hidden" name="clientId" value={client_id} />
             <Button disabled={disabled} type="submit">
               Select
-              <Icon.ArrowForward className="bottom-aligned margin-left-05" />
+              <Icon.ArrowForward
+                role="presentation"
+                className="bottom-aligned margin-left-05"
+              />
             </Button>
           </Form>
         </div>

diff --git a/app/components/DetailsDropdownButton.tsx b/app/components/DetailsDropdownButton.tsx
@@ -18,9 +18,14 @@ export default function DetailsDropdownButton({
   className?: string
 } & Omit<ButtonProps & JSX.IntrinsicElements['button'], 'type'>) {
   return (
-    <Button className={`${className ?? ''}`} type="button" {...props}>
+    <Button
+      className={`${className ?? ''}`}
+      type="button"
+      title="Select version"
+      {...props}
+    >
       {children}
-      <Icon.ExpandMore />
+      <Icon.ExpandMore role="presentation" />
     </Button>
   )
 }
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -63,21 +63,25 @@ export function Footer() {
           <Grid row gap>
             <ContactLink
               to="/contact"
-              icon={<Icon.Help size={4} color={'white'} />}
+              icon={<Icon.Help role="presentation" size={4} color={'white'} />}
               headline="Questions or comments?"
             >
               Contact GCN directly
             </ContactLink>
             <ContactLink
               to="https://github.com/nasa-gcn/gcn.nasa.gov/issues"
-              icon={<Icon.BugReport size={4} color={'white'} />}
+              icon={
+                <Icon.BugReport role="presentation" size={4} color={'white'} />
+              }
               headline="Have you found a bug in GCN?"
             >
               Open an issue
             </ContactLink>
             <ContactLink
               to="https://github.com/nasa-gcn/gcn.nasa.gov"
-              icon={<Icon.Github size={4} color={'white'} />}
+              icon={
+                <Icon.Github role="presentation" size={4} color={'white'} />
+              }
               headline="Want to contribute code to GCN?"
             >
               Get involved on GitHub

diff --git a/app/components/HeadingWithAddButton.tsx b/app/components/HeadingWithAddButton.tsx
@@ -30,7 +30,10 @@ export default function HeadingWithAddButton({
           })}
           to="edit"
         >
-          <Icon.Add className="bottom-aligned margin-right-05" />
+          <Icon.Add
+            role="presentation"
+            className="bottom-aligned margin-right-05"
+          />
           Add
         </Link>
       </Grid>

diff --git a/app/components/Highlight.tsx b/app/components/Highlight.tsx
@@ -38,7 +38,7 @@ export function Highlight({
             className="margin-top-1 margin-right-1 usa-button--unstyled"
           >
             <a download={filename} href={`data:,${encodeURIComponent(code)}`}>
-              <Icon.FileDownload />
+              <Icon.FileDownload role="Presentation" />
             </a>
           </Tooltip>
         )}
@@ -49,7 +49,7 @@ export function Highlight({
         >
           <CopyToClipboard text={code} onCopy={copyTooltipTextHandler}>
             <span>
-              <Icon.ContentCopy />
+              <Icon.ContentCopy role="presentation" />
             </span>
           </CopyToClipboard>
         </Tooltip>

diff --git a/app/routes/_index/route.mdx b/app/routes/_index/route.mdx
@@ -108,13 +108,13 @@ There are three ways to stream GCN Notices in real time:
 
   <div className="overflow-table">
 
-|                                                                      | GCN Classic                                                                                                                           | GCN Classic over Kafka                                                                                                                    |
-| -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| <div><Icon.AccountBox size="3"/></div> **Self-service**              | <span className="text-red text-bold">NO.</span> Users need to contact administrator in order to make account and subscription changes | <span className="text-green text-bold">YES.</span> Manage your own account and subscription settings through this web site                |
-| <div><Icon.ConnectWithoutContact size="3"/></div> **Open standards** | <span className="text-red text-bold">NO.</span> Notices are sent using three custom protocols                                         | <span className="text-green text-bold">YES.</span> Notices are sent using one standard protocol, [Apache Kafka](https://kafka.apache.org) |
-| <div><Icon.Github size="3"/></div> **Open source**                   | <span className="text-red text-bold">NO.</span> Custom software needed to receive notices                                             | <span className="text-green text-bold">YES.</span> Receive notices using [open-source software](/docs/client)                             |
-| <div><Icon.Cloud size="3"/></div> **Highly available**               | <span className="text-red text-bold">NO.</span> Notices are broadcast by a single server                                              | <span className="text-green text-bold">YES.</span> Notices are broadcast by a cluster of highly-available Kafka brokers in the cloud      |
-| <div><Icon.Security size="3"/></div> **Secure**                      | <span className="text-red text-bold">NO.</span> Notices are sent as plaintext                                                         | <span className="text-green text-bold">YES.</span> Notices are protected with SSL/TLS                                                     |
+|                                                                                          | GCN Classic                                                                                                                           | GCN Classic over Kafka                                                                                                                    |
+| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| <div><Icon.AccountBox role="presentation" size="3"/></div> **Self-service**              | <span className="text-red text-bold">NO.</span> Users need to contact administrator in order to make account and subscription changes | <span className="text-green text-bold">YES.</span> Manage your own account and subscription settings through this web site                |
+| <div><Icon.ConnectWithoutContact role="presentation" size="3"/></div> **Open standards** | <span className="text-red text-bold">NO.</span> Notices are sent using three custom protocols                                         | <span className="text-green text-bold">YES.</span> Notices are sent using one standard protocol, [Apache Kafka](https://kafka.apache.org) |
+| <div><Icon.Github role="presentation" size="3"/></div> **Open source**                   | <span className="text-red text-bold">NO.</span> Custom software needed to receive notices                                             | <span className="text-green text-bold">YES.</span> Receive notices using [open-source software](/docs/client)                             |
+| <div><Icon.Cloud role="presentation" size="3"/></div> **Highly available**               | <span className="text-red text-bold">NO.</span> Notices are broadcast by a single server                                              | <span className="text-green text-bold">YES.</span> Notices are broadcast by a cluster of highly-available Kafka brokers in the cloud      |
+| <div><Icon.Security role="presentation" size="3"/></div> **Secure**                      | <span className="text-red text-bold">NO.</span> Notices are sent as plaintext                                                         | <span className="text-green text-bold">YES.</span> Notices are protected with SSL/TLS                                                     |
 
   </div>
 

diff --git a/app/routes/circulars.$circularId.tsx b/app/routes/circulars.$circularId.tsx
@@ -59,7 +59,10 @@ export default function () {
       <ButtonGroup>
         <Link to={`/circulars${searchString}`} className="usa-button">
           <div className="position-relative">
-            <Icon.ArrowBack className="position-absolute top-0 left-0" />
+            <Icon.ArrowBack
+              role="presentation"
+              className="position-absolute top-0 left-0"
+            />
           </div>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Back
         </Link>

diff --git a/app/routes/circulars._index.tsx b/app/routes/circulars._index.tsx
@@ -117,7 +117,7 @@ function Pagination({
                     className="usa-pagination__link usa-pagination__previous-page"
                     aria-label="Previous page"
                   >
-                    <Icon.NavigateBefore aria-hidden />
+                    <Icon.NavigateBefore role="presentation" />
                     <span className="usa-pagination__link-text">Previous</span>
                   </Link>
                 </li>
@@ -146,7 +146,7 @@ function Pagination({
                     className="usa-pagination__link usa-pagination__next-page"
                     aria-label="Next page"
                   >
-                    <Icon.NavigateNext aria-hidden />
+                    <Icon.NavigateNext role="presentation" />
                     <span className="usa-pagination__link-text">Next</span>
                   </Link>
                 </li>
@@ -191,7 +191,10 @@ function DownloadModal() {
         outline
         className="text-middle"
       >
-        <Icon.FileDownload className="bottom-aligned margin-right-05" />
+        <Icon.FileDownload
+          role="presentation"
+          className="bottom-aligned margin-right-05"
+        />
         Download Archive
       </ModalToggleButton>
       <Modal
@@ -316,7 +319,7 @@ export default function () {
             type="button"
             className="height-4 padding-top-0 padding-bottom-0"
           >
-            <Icon.Edit /> New
+            <Icon.Edit role="presentation" /> New
           </Button>
         </Link>
       </ButtonGroup>

diff --git a/app/routes/circulars.new.tsx b/app/routes/circulars.new.tsx
@@ -119,7 +119,7 @@ export default function () {
             title="Adjust how your name and affiliation appear in new GCN Circulars"
           >
             <Button unstyled type="button">
-              <Icon.Edit /> Edit
+              <Icon.Edit role="presentation" /> Edit
             </Button>
           </Link>
         </InputGroup>

diff --git a/app/routes/docs.circulars.submitting.mdx b/app/routes/docs.circulars.submitting.mdx
@@ -54,7 +54,7 @@ There are two ways to post a GCN Circular: via web form or via email.
 
 ### Post a GCN Circular by Web Form
 
-To post a GCN Circular via the web form, simply go to the [GCN Circulars archive](/circulars), click the <Link to="/circulars/new"><Button type="button" className="usa-button height-4 padding-y-0 padding-x-1 margin-x-05"><Icon.Edit /> New</Button></Link> button, and complete the form.
+To post a GCN Circular via the web form, simply go to the [GCN Circulars archive](/circulars), click the <Link to="/circulars/new"><Button type="button" className="usa-button height-4 padding-y-0 padding-x-1 margin-x-05"><Icon.Edit role="presentation" /> New</Button></Link> button, and complete the form.
 
 <Alert
   type="info"

diff --git a/app/routes/docs_.schema.$version.$/components.tsx b/app/routes/docs_.schema.$version.$/components.tsx
@@ -52,7 +52,11 @@ function ReferencedElementRow({ item }: { item: ReferencedSchema }) {
         ) : (
           <>
             <td colSpan={2}>
-              {showHiddenRow ? <Icon.ExpandLess /> : <Icon.ExpandMore />}
+              {showHiddenRow ? (
+                <Icon.ExpandLess aria-label="Collapse" />
+              ) : (
+                <Icon.ExpandMore aria-label="Expand" />
+              )}
               <Link to={formatLinkString(item.$ref ?? '')}>
                 {item.$ref && item.$ref.split('/').slice(-1)[0]}
               </Link>

diff --git a/app/routes/docs_.schema.$version.$/route.tsx b/app/routes/docs_.schema.$version.$/route.tsx
@@ -90,7 +90,7 @@ export default function () {
                     <span className="display-flex flex-align-center">
                       {x.type == 'dir' && (
                         <span className="margin-top-05 padding-right-05">
-                          <Icon.FolderOpen />
+                          <Icon.FolderOpen role="presentation" />
                         </span>
                       )}
                       <span>{x.name}</span>

diff --git a/app/routes/docs_.schema.tsx b/app/routes/docs_.schema.tsx
@@ -48,7 +48,10 @@ export default function Schema() {
       <div className="grid-row grid-gap margin-y-2">
         <Link to="/docs">
           <div className="position-relative">
-            <Icon.ArrowBack className="position-absolute top-0 left-0" />
+            <Icon.ArrowBack
+              role="presentation"
+              className="position-absolute top-0 left-0"
+            />
           </div>
           <span className="padding-left-2">Back</span>
         </Link>

diff --git a/app/routes/notices.tsx b/app/routes/notices.tsx
@@ -75,7 +75,11 @@ function renderTag({
       <span className={classNames.tagName}>
         {label}{' '}
         <Button type="button" unstyled>
-          <Icon.Close className="margin-left-1 text-bottom" color={'white'} />
+          <Icon.Close
+            role="presentation"
+            className="margin-left-1 text-bottom"
+            color={'white'}
+          />
         </Button>
       </span>
     </Tag>

diff --git a/app/routes/user._index.tsx b/app/routes/user._index.tsx
@@ -150,7 +150,7 @@ export default function () {
           )}
           {fetcher.state === 'idle' && fetcher.data !== undefined && !dirty && (
             <span className="text-middle">
-              <Icon.Check color="green" /> Saved
+              <Icon.Check role="presentation" color="green" /> Saved
             </span>
           )}
         </FormGroup>

diff --git a/app/routes/user.email._index/EmailNotificationCard.tsx b/app/routes/user.email._index/EmailNotificationCard.tsx
@@ -65,14 +65,20 @@ export default function EmailNotificationCard({
                 <input type="hidden" name="recipient" value={recipient} />
                 <input type="hidden" name="intent" value="sendTest" />
                 <Button type="submit" outline disabled={disabled}>
-                  <Icon.MailOutline className="bottom-aligned margin-right-05" />
+                  <Icon.MailOutline
+                    role="presentation"
+                    className="bottom-aligned margin-right-05"
+                  />
                   Test Message
                 </Button>
               </testFetcher.Form>
               <Form method="GET" action="edit">
                 <input type="hidden" name="uuid" value={uuid} />
                 <Button type="submit" outline disabled={disabled}>
-                  <Icon.Edit className="bottom-aligned margin-right-05" />
+                  <Icon.Edit
+                    role="presentation"
+                    className="bottom-aligned margin-right-05"
+                  />
                   Edit
                 </Button>
               </Form>
@@ -83,7 +89,10 @@ export default function EmailNotificationCard({
                 type="button"
                 className="usa-button--secondary margin-right-0"
               >
-                <Icon.Delete className="bottom-aligned margin-right-05" />
+                <Icon.Delete
+                  role="presentation"
+                  className="bottom-aligned margin-right-05"
+                />
                 Delete
               </ModalToggleButton>
             </ButtonGroup>

diff --git a/app/routes/user.email._index/route.tsx b/app/routes/user.email._index/route.tsx
@@ -94,7 +94,7 @@ function CircularsSubscriptionForm({ value }: { value: boolean }) {
           )}
           {fetcher.state === 'idle' && fetcher.data !== undefined && (
             <>
-              <Icon.Check color="green" /> Saved
+              <Icon.Check role="presentation" color="green" /> Saved
             </>
           )}
         </div>

diff --git a/app/routes/user.endorsements/route.tsx b/app/routes/user.endorsements/route.tsx
@@ -250,11 +250,11 @@ export function EndorsementRequestCard({
                     Show{' '}
                     {showMore ? (
                       <>
-                        less <Icon.ArrowDropUp />
+                        less <Icon.ArrowDropUp role="presentation" />
                       </>
                     ) : (
                       <>
-                        more <Icon.ArrowDropDown />
+                        more <Icon.ArrowDropDown role="presentation" />
                       </>
                     )}
                   </Button>

diff --git a/app/routes/user.password/route.tsx b/app/routes/user.password/route.tsx
@@ -63,9 +63,9 @@ function PasswordValidationStep({
   return (
     <li>
       {valid ? (
-        <Icon.Check color="green" aria-label="green check" />
+        <Icon.Check color="green" aria-label="Passed" />
       ) : (
-        <Icon.Close color="red" aria-label="red x" />
+        <Icon.Close color="red" aria-label="Failed" />
       )}
       {text}
     </li>
@@ -223,7 +223,12 @@ function ResetPassword() {
               fetcher.data === null &&
               !interacted && (
                 <>
-                  <Icon.Check className="text-middle" color="green" /> Saved
+                  <Icon.Check
+                    role="presentation"
+                    className="text-middle"
+                    color="green"
+                  />{' '}
+                  Saved
                 </>
               )}
           </FormGroup>
-Original file line number
+Diff line change
@@ Expand Up @@
               )}
               {fetcher.state === 'idle' && fetcher.data !== undefined && (
                 <>
-                  <Icon.Check color="green" /> Saved
+                  <Icon.Check role="presentation" color="green" /> Saved
                 </>
               )}
             </div>
@@ Expand Down @@