Fix small bugs in InlineAutocomplete (#2318)

* Add `position:absolute` to `InlineAutocomplete` live hint

* Remove hack to hide space before suggestion items

* Create slow-rice-fold.md

.changeset/slow-rice-fold.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+---
+
+- Fix `InlineAutocomplete` accessibility hint affecting page layout outside of the suggestions
+- Fix suggestion icons not being visible in `InlineAutocomplete` items

src/drafts/InlineAutocomplete/InlineAutocomplete.tsx

@@ -207,7 +207,7 @@ const InlineAutocomplete = ({
       <Portal>
         {/* This should NOT be linked to the input with aria-describedby or screen readers may not read the live updates.
         The assertive live attribute ensures the suggestions are read instead of the input label, which voiceover will try to re-read when the role changes. */}
-        <span aria-live="assertive" aria-atomic style={{clipPath: 'circle(0)'}}>
+        <span aria-live="assertive" aria-atomic style={{clipPath: 'circle(0)', position: 'absolute'}}>
           {suggestionsDescription}
         </span>
       </Portal>

src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx

@@ -19,7 +19,7 @@ const emojiToSugggestion = (emoji: Emoji): Suggestion => ({
   value: emoji.character,
   key: emoji.name, // emoji characters may not be unique - ie haircut and haircut_man both have the same emoji codepoint. But names are guarunteed to be unique.
   render: props => (
-    <ActionList.Item {...props} sx={{...props.sx, '& > span:first-child': {display: 'none'}}}>
+    <ActionList.Item {...props}>
       <ActionList.LeadingVisual>{emoji.character}</ActionList.LeadingVisual>
       {emoji.name}
     </ActionList.Item>

src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx

@@ -19,7 +19,7 @@ const trigger: Trigger = {
 const mentionableToSuggestion = (mentionable: Mentionable): Suggestion => ({
   value: mentionable.identifier,
   render: props => (
-    <ActionList.Item {...props} sx={{...props.sx, '& > span': {display: 'none'}}}>
+    <ActionList.Item {...props}>
       <Text sx={{fontWeight: 'bold'}}>{mentionable.identifier}</Text>{' '}
       <ActionList.Description>{mentionable.description}</ActionList.Description>
     </ActionList.Item>

src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx

@@ -20,7 +20,7 @@ const trigger: Trigger = {
 const referenceToSuggestion = (reference: Reference): Suggestion => ({
   value: reference.id,
   render: props => (
-    <ActionList.Item {...props} sx={{...props.sx, '& > span:first-child': {display: 'none'}}}>
+    <ActionList.Item {...props}>
       {reference.iconHtml && (
         <ActionList.LeadingVisual>
           <span dangerouslySetInnerHTML={{__html: reference.iconHtml}} />