fix(core): adding accessibility labels to pte objects (#5652)

packages/sanity/src/core/form/inputs/PortableText/object/Annotation.tsx

@@ -22,10 +22,10 @@ import {usePortableTextMemberItem} from '../hooks/usePortableTextMembers'
 import {debugRender} from '../debugRender'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {EMPTY_ARRAY} from '../../../../util'
+import {useTranslation} from '../../../../i18n'
 import {AnnotationToolbarPopover} from './AnnotationToolbarPopover'
 import {Root, TooltipBox} from './Annotation.styles'
 import {ObjectEditModal} from './modals/ObjectEditModal'
-import {useTranslation} from '../../../../i18n'
 
 interface AnnotationProps {
   children: React.ReactElement
@@ -284,6 +284,7 @@ export const DefaultAnnotationComponent = (props: BlockAnnotationProps) => {
   return (
     <Root
       $toneKey={toneKey}
+      aria-label={t('inputs.portable-text.annotation-aria-label')}
       data-link={isLink ? '' : undefined}
       data-error={hasError ? '' : undefined}
       data-warning={hasWarning ? '' : undefined}

packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx

@@ -181,15 +181,15 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
               </Text>
             </Box>
             <Button
-              aria-label={t('inputs.portable-text.action.edit-annotation')}
+              aria-label={t('inputs.portable-text.action.edit-annotation-aria-label')}
               icon={EditIcon}
               mode="bleed"
               onClick={handleEditButtonClicked}
               tabIndex={0}
               tooltipProps={null}
             />
             <Button
-              aria-label={t('inputs.portable-text.action.remove-annotation')}
+              aria-label={t('inputs.portable-text.action.remove-annotation-aria-label')}
               icon={TrashIcon}
               mode="bleed"
               onClick={handleRemoveButtonClicked}

packages/sanity/src/core/form/inputs/PortableText/object/BlockObject.tsx

@@ -31,6 +31,7 @@ import {debugRender} from '../debugRender'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
 import {useFormCallbacks} from '../../../studio'
+import {useTranslation} from '../../../../i18n'
 import {
   Root,
   ChangeIndicatorWrapper,
@@ -355,6 +356,7 @@ export const DefaultBlockObjectComponent = (props: BlockProps) => {
     validation,
   } = props
 
+  const {t} = useTranslation()
   const isImagePreview = isImage(value)
   const hasError = validation.filter((v) => v.level === 'error').length > 0
   const hasWarning = validation.filter((v) => v.level === 'warning').length > 0
@@ -373,6 +375,7 @@ export const DefaultBlockObjectComponent = (props: BlockProps) => {
   return (
     <>
       <Root
+        aria-label={t('inputs.portable-text.block.aria-label')}
         data-focused={focused ? '' : undefined}
         data-image-preview={isImagePreview ? '' : undefined}
         data-invalid={hasError ? '' : undefined}

packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx

@@ -24,6 +24,7 @@ import {usePortableTextMemberItem} from '../hooks/usePortableTextMembers'
 import {pathToString} from '../../../../field/paths'
 import {EMPTY_ARRAY} from '../../../../util'
 import {useChildPresence} from '../../../studio/contexts/Presence'
+import {useTranslation} from '../../../../i18n'
 import {InlineObjectToolbarPopover} from './InlineObjectToolbarPopover'
 import {ObjectEditModal} from './modals/ObjectEditModal'
 import {PreviewSpan, Root, TooltipBox} from './InlineObject.styles'
@@ -237,6 +238,7 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
     validation,
     value,
   } = props
+  const {t} = useTranslation()
   const hasMarkers = markers.length > 0
   const [popoverOpen, setPopoverOpen] = useState<boolean>(false)
   const popoverTitle = schemaType?.title || schemaType.name
@@ -280,6 +282,7 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
   return (
     <>
       <Root
+        aria-label={t('inputs.portable-text.inline-block.aria-label')}
         data-focused={focused || undefined}
         data-invalid={hasError || undefined}
         data-markers={hasMarkers || undefined}

packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx

@@ -79,13 +79,15 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
             </Text>
           </Box>
           <Button
+            aria-label={t('inputs.portable-text.inline-object.edit-aria-label')}
             icon={EditIcon}
             mode="bleed"
             onClick={onEdit}
             ref={editButtonRef}
             tooltipProps={{content: t('inputs.portable-text.inline-object.edit')}}
           />
           <Button
+            aria-label={t('inputs.portable-text.inline-object.remove-aria-label')}
             ref={deleteButtonRef}
             icon={TrashIcon}
             mode="bleed"

packages/sanity/src/core/i18n/bundles/studio.ts

@@ -663,8 +663,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.object.unknown-fields.warning.title_other': 'Unknown fields found',
   /** Collapse the editor to save screen space  */
   'inputs.portable-text.action.collapse-editor': 'Collapse editor',
-  /** Label for action to edit an existing annotation */
-  'inputs.portable-text.action.edit-annotation': 'Edit annotation',
+  /** Aria label for action to edit an existing annotation */
+  'inputs.portable-text.action.edit-annotation-aria-label': 'Edit annotation',
   /** Expand the editor to give more editing space */
   'inputs.portable-text.action.expand-editor': 'Expand editor',
   /** Label label for action to insert a block of a given type (`{{typeName}}`) */
@@ -675,19 +675,23 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.portable-text.action.insert-inline-object': 'Insert {{typeName}}',
   /** Accessibility label for action to insert an inline object of a given type (`{{typeName}}`) */
   'inputs.portable-text.action.insert-inline-object-aria-label': 'Insert {{typeName}} (inline)',
-  /** Label for action to remove an annotation */
-  'inputs.portable-text.action.remove-annotation': 'Remove annotation',
+  /** Aria label for action to remove an annotation */
+  'inputs.portable-text.action.remove-annotation-aria-label': 'Remove annotation',
   /** Label for activate on focus with context of click and not focused */
   'inputs.portable-text.activate-on-focus-message_click': 'Click to activate',
   /** Label for activate on focus with context of click and focused */
   'inputs.portable-text.activate-on-focus-message_click-focused':
     'Click or press space to activate',
   /** Label for activate on focus with context of tap and not focused */
   'inputs.portable-text.activate-on-focus-message_tap': 'Tap to activate',
+  /**Aria label for the annotation object */
+  'inputs.portable-text.annotation-aria-label': 'Annotation object',
   /** Title for dialog that allows editing an annotation */
   'inputs.portable-text.annotation-editor.title': 'Edit {{schemaType}}',
   /** Title of the default "link" annotation */
   'inputs.portable-text.annotation.link': 'Link',
+  /**Aria label for the block object */
+  'inputs.portable-text.block.aria-label': 'Block object',
   /** Label for action to edit a block item, in the case where it is editable */
   'inputs.portable-text.block.edit': 'Edit',
   /** Accessibility label for the button that opens the actions menu on blocks */
@@ -710,10 +714,16 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'inputs.portable-text.decorator.underline': 'Underline',
   /** Placeholder text for when the editor is empty */
   'inputs.portable-text.empty-placeholder': 'Empty',
+  /**Aria label for the block object */
+  'inputs.portable-text.inline-block.aria-label': 'Inline object',
   /** Label for action to edit an inline object item */
   'inputs.portable-text.inline-object.edit': 'Edit object',
+  /** Aria label for icon for action to edit an inline object item */
+  'inputs.portable-text.inline-object.edit-aria-label': 'Edit object',
   /** Label for action to remove an inline object item */
   'inputs.portable-text.inline-object.remove': 'Remove object',
+  /** Aria label for icon for action to remove an inline object item */
+  'inputs.portable-text.inline-object.remove-aria-label': 'Remove object',
   /** Disclaimer text shown on invalid Portable Text value, when an action is available to unblock the user, but it is not guaranteed to be safe */
   'inputs.portable-text.invalid-value.action-disclaimer':
     'NOTE: It’s generally safe to perform the action above, but if you are in doubt, get in touch with those responsible for configuring your studio.',