fix(core): add aria-label to reference publish icons (#4899)

* fix(core): add aria-label to reference publish icons * fix(core): add aria-label to validation icons * fix(core): add aria-label to presence avatar stack * Update packages/sanity/src/desk/components/NotPublishedStatus.tsx Co-authored-by: Robin Pyon <robinpyon@users.noreply.github.com> --------- Co-authored-by: Robin Pyon <robinpyon@users.noreply.github.com>
sanity-io · Sep 12, 2023 · 3153954 · 3153954 · vercel · Sep 12, 2023
1 parent 50b7976
commit 3153954
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx b/packages/sanity/src/core/form/components/formField/FormFieldValidationStatus.tsx
@@ -34,9 +34,30 @@ const VALIDATION_COLORS: Record<'error' | 'warning' | 'info', string> = {
 }
 
 const VALIDATION_ICONS: Record<'error' | 'warning' | 'info', React.ReactElement> = {
-  error: <ErrorOutlineIcon data-testid="input-validation-icon-error" />,
-  warning: <WarningOutlineIcon data-testid="input-validation-icon-warning" />,
-  info: <InfoOutlineIcon data-testid="input-validation-icon-info" />,
+  error: (
+    <ErrorOutlineIcon
+      data-testid="input-validation-icon-error"
+      aria-label="Has error"
+      aria-hidden
+      role="presentation"
+    />
+  ),
+  warning: (
+    <WarningOutlineIcon
+      data-testid="input-validation-icon-warning"
+      aria-label="Has warning"
+      aria-hidden
+      role="presentation"
+    />
+  ),
+  info: (
+    <InfoOutlineIcon
+      data-testid="input-validation-icon-info"
+      aria-label="Has information"
+      aria-hidden
+      role="presentation"
+    />
+  ),
 }
 
 const StyledStack = styled(Stack)`

diff --git a/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx b/packages/sanity/src/core/form/inputs/ReferenceInput/ReferencePreview.tsx
@@ -93,7 +93,7 @@ export function ReferencePreview(props: {
                   dimmed={!preview.published}
                   muted={!preview.published}
                 >
-                  <PublishIcon />
+                  <PublishIcon aria-label={preview.published ? 'Published' : 'Not published'} />
                 </TextWithTone>
               </Tooltip>
             </Box>
@@ -121,7 +121,7 @@ export function ReferencePreview(props: {
                   dimmed={!preview.draft}
                   muted={!preview.draft}
                 >
-                  <EditIcon />
+                  <EditIcon aria-label={preview.draft ? 'Edited' : 'No unpublished edits'} />
                 </TextWithTone>
               </Tooltip>
             </Box>

diff --git a/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx b/packages/sanity/src/core/studio/components/navbar/presence/PresenceMenu.tsx
@@ -70,7 +70,7 @@ export function PresenceMenu(props: PresenceMenuProps) {
     return (
       <Button mode="bleed" padding={1}>
         <AvatarStackCard>
-          <AvatarStack maxLength={MAX_AVATARS}>
+          <AvatarStack maxLength={MAX_AVATARS} aria-label="Who is here">
             {presence.map((item) => (
               <UserAvatar key={item.user.id} user={item.user} />
             ))}

diff --git a/packages/sanity/src/desk/components/NotPublishedStatus.tsx b/packages/sanity/src/desk/components/NotPublishedStatus.tsx
@@ -6,7 +6,7 @@ export function NotPublishedStatus() {
   return (
     <Tooltip content={<>Not published</>}>
       <Text muted>
-        <UnpublishIcon />
+        <UnpublishIcon aria-label="Not published" />
       </Text>
     </Tooltip>
   )