From edd7604ef9596f5116496da7a91712dffc53d2e7 Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 25 Aug 2023 10:14:54 +0000
Subject: [PATCH 01/11] introduce polished toolbar

---
 src/drafts/MarkdownEditor/Toolbar.tsx     | 26 ++++++++++---
 src/drafts/MarkdownEditor/_ViewSwitch.tsx | 46 ++++++++++++-----------
 2 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/src/drafts/MarkdownEditor/Toolbar.tsx b/src/drafts/MarkdownEditor/Toolbar.tsx
index 0b975733298..cacf9e28187 100644
--- a/src/drafts/MarkdownEditor/Toolbar.tsx
+++ b/src/drafts/MarkdownEditor/Toolbar.tsx
@@ -22,23 +22,36 @@ import {MarkdownEditorContext} from './_MarkdownEditorContext'
 import {SavedRepliesButton} from './_SavedReplies'
 
 export const ToolbarButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const {disabled} = useContext(MarkdownEditorContext)
+  const {disabled, condensed} = useContext(MarkdownEditorContext)
 
   return (
     <IconButton
-      size="small"
       ref={ref}
+      size={condensed ? 'small' : 'medium'}
       variant="invisible"
       disabled={disabled}
       // Prevent focus leaving input:
       onMouseDown={(e: React.MouseEvent) => e.preventDefault()}
       {...props}
-      sx={{color: 'fg.default', ...props.sx}}
+      sx={{color: 'fg.muted', ...props.sx}}
     />
   )
 })
 ToolbarButton.displayName = 'MarkdownEditor.ToolbarButton'
 
+const Divider = () => {
+  return (
+    <Box
+      sx={{
+        display: 'inline-grid',
+        margin: '0 var(--controlStack-medium-gap-condensed, 8px)',
+        height: 'calc(var(--control-medium-size, 32px)/2)',
+        borderLeft: 'var(--borderWidth-thin, 1px) solid var(--borderColor-muted)',
+      }}
+    />
+  )
+}
+
 export const DefaultToolbarButtons = memo(() => {
   const {condensed, formattingToolsRef} = useContext(MarkdownEditorContext)
 
@@ -65,6 +78,7 @@ export const DefaultToolbarButtons = memo(() => {
         />
       </Box>
       <Box>
+        <Divider />
         <ToolbarButton
           onClick={() => formattingToolsRef.current?.quote()}
           icon={QuoteIcon}
@@ -82,6 +96,7 @@ export const DefaultToolbarButtons = memo(() => {
         />
       </Box>
       <Box>
+        <Divider />
         <ToolbarButton
           onClick={() => formattingToolsRef.current?.unorderedList()}
           icon={ListUnorderedIcon}
@@ -100,6 +115,7 @@ export const DefaultToolbarButtons = memo(() => {
       </Box>
       {!condensed && (
         <Box>
+          <Divider />
           <ToolbarButton
             onClick={() => formattingToolsRef.current?.mention()}
             icon={MentionIcon}
@@ -119,8 +135,6 @@ export const DefaultToolbarButtons = memo(() => {
 DefaultToolbarButtons.displayName = 'MarkdownEditor.DefaultToolbarButtons'
 
 export const CoreToolbar = ({children}: {children?: React.ReactNode}) => {
-  const {condensed} = useContext(MarkdownEditorContext)
-
   const containerRef = useRef<HTMLDivElement>(null)
 
   useFocusZone({
@@ -135,7 +149,7 @@ export const CoreToolbar = ({children}: {children?: React.ReactNode}) => {
       ref={containerRef}
       aria-label="Formatting tools"
       role="toolbar"
-      sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: condensed ? 0 : 3}}
+      sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: 0}}
     >
       {children}
     </Box>
diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index 324f5c4673a..a7ec5d0e441 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -1,9 +1,7 @@
-import React, {useContext} from 'react'
-import {EyeIcon, PencilIcon} from '@primer/octicons-react'
+import React from 'react'
 
 import Box from '../../Box'
-import {Button, IconButton} from '../../Button'
-import {MarkdownEditorContext} from './_MarkdownEditorContext'
+import TabNav from '../../TabNav'
 
 export type MarkdownViewMode = 'preview' | 'edit'
 
@@ -18,39 +16,45 @@ type ViewSwitchProps = {
 // no point in memoizing this component because onLoadPreview depends on value, so it would still re-render on every change
 export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}: ViewSwitchProps) => {
   // don't get disabled from context - the switch is not disabled when the editor is disabled
-  const {condensed} = useContext(MarkdownEditorContext)
 
-  const {label, icon, ...sharedProps} =
+  const sharedProps =
     selectedView === 'preview'
       ? {
-          variant: 'invisible' as const,
-          sx: {color: 'fg.default', px: 2},
           onClick: () => onViewSelect?.('edit'),
-          icon: PencilIcon,
-          label: 'Edit',
         }
       : {
-          variant: 'invisible' as const,
-          sx: {color: 'fg.default', px: 2},
           onClick: () => {
             onLoadPreview()
             onViewSelect?.('preview')
           },
           onMouseOver: () => onLoadPreview(),
           onFocus: () => onLoadPreview(),
-          icon: EyeIcon,
-          label: 'Preview',
         }
 
   return (
     <Box sx={{display: 'flex', flexDirection: 'row'}}>
-      {condensed ? (
-        <IconButton {...sharedProps} disabled={disabled} icon={icon} aria-label={label} />
-      ) : (
-        <Button {...sharedProps} leadingIcon={icon} disabled={disabled}>
-          {label}
-        </Button>
-      )}
+      <TabNav aria-label="Main">
+        <TabNav.Link
+          {...sharedProps}
+          as="button"
+          selected={selectedView === 'edit'}
+          sx={{cursor: 'pointer', color: selectedView === 'edit' ? 'fg.default' : 'fg.muted', borderTopLeftRadius: 1}}
+        >
+          Write
+        </TabNav.Link>
+        <TabNav.Link
+          {...sharedProps}
+          as="button"
+          selected={selectedView === 'preview'}
+          sx={{
+            cursor: 'pointer',
+            color: selectedView === 'preview' ? 'fg.default' : 'fg.muted',
+            borderTopLeftRadius: 1,
+          }}
+        >
+          Preview
+        </TabNav.Link>
+      </TabNav>
     </Box>
   )
 }

From f0c921510df24a3dbadc248881bc2f066b4a1eb0 Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 25 Aug 2023 10:15:34 +0000
Subject: [PATCH 02/11] adjust overall styling

---
 src/drafts/MarkdownEditor/Actions.tsx        |  2 +-
 src/drafts/MarkdownEditor/Footer.tsx         | 78 ++++----------------
 src/drafts/MarkdownEditor/MarkdownEditor.tsx | 57 ++++++++++----
 src/drafts/MarkdownEditor/_ErrorMessage.tsx  | 13 ++++
 src/drafts/MarkdownEditor/_MarkdownInput.tsx |  8 +-
 5 files changed, 78 insertions(+), 80 deletions(-)
 create mode 100644 src/drafts/MarkdownEditor/_ErrorMessage.tsx

diff --git a/src/drafts/MarkdownEditor/Actions.tsx b/src/drafts/MarkdownEditor/Actions.tsx
index 25055e623b9..a38df16dbdd 100644
--- a/src/drafts/MarkdownEditor/Actions.tsx
+++ b/src/drafts/MarkdownEditor/Actions.tsx
@@ -7,6 +7,6 @@ Actions.displayName = 'MarkdownEditor.Actions'
 
 export const ActionButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {disabled} = useContext(MarkdownEditorContext)
-  return <Button ref={ref} size="small" disabled={disabled} {...props} />
+  return <Button ref={ref} disabled={disabled} {...props} />
 })
 ActionButton.displayName = 'MarkdownEditor.ActionButton'
diff --git a/src/drafts/MarkdownEditor/Footer.tsx b/src/drafts/MarkdownEditor/Footer.tsx
index 4d2a0e4db92..3a7f959a2ef 100644
--- a/src/drafts/MarkdownEditor/Footer.tsx
+++ b/src/drafts/MarkdownEditor/Footer.tsx
@@ -1,37 +1,35 @@
 import React, {memo, forwardRef, useContext} from 'react'
-import {AlertIcon, ImageIcon, MarkdownIcon} from '@primer/octicons-react'
+import {PaperclipIcon} from '@primer/octicons-react'
 
-import {Spinner, Button, ButtonProps, LinkButton, Box, Text} from '../..'
+import {Spinner, Button, ButtonProps, Box, Text} from '../..'
 import {MarkdownEditorContext} from './_MarkdownEditorContext'
 import {useSlots} from '../../hooks/useSlots'
 
 const uploadingNote = ([current, total]: [number, number]) =>
-  total === 1 ? `Uploading your file...` : `Uploading your files... (${current}/${total})`
+  total === 1 ? `Uploading your file…` : `Uploading your files… (${current}/${total})`
 
 export const CoreFooter = ({children}: {children: React.ReactNode}) => {
   const [slots, childrenWithoutSlots] = useSlots(children, {
     footerButtons: FooterButton,
   })
 
-  const {fileUploadProgress, errorMessage, previewMode} = useContext(MarkdownEditorContext)
+  const {fileUploadProgress, previewMode} = useContext(MarkdownEditorContext)
 
   return (
-    <Box sx={{pt: 2, display: 'flex', gap: 2, justifyContent: 'space-between', minHeight: '36px'}} as="footer">
+    <Box
+      sx={{pt: 2, display: 'flex', gap: 2, justifyContent: 'space-between', alignItems: 'center', minHeight: '36px'}}
+      as="footer"
+    >
       <Box sx={{display: 'flex', gap: 1, alignItems: 'center', fontSize: 0}}>
         {previewMode ? (
           <></>
         ) : fileUploadProgress ? (
-          <Text sx={{py: 1, px: 2}}>
+          <Text sx={{py: 1, px: 2, color: 'fg.muted'}}>
             <Spinner size="small" sx={{mr: 1, verticalAlign: 'text-bottom'}} /> {uploadingNote(fileUploadProgress)}
           </Text>
-        ) : errorMessage ? (
-          <ErrorMessage message={errorMessage} />
-        ) : (
-          <>
-            {slots.footerButtons && <Box sx={{display: 'flex', gap: 2}}>{slots.footerButtons}</Box>}
-            <DefaultFooterButtons />
-          </>
-        )}
+        ) : null}
+        {slots.footerButtons && <Box sx={{display: 'flex', gap: 2}}>{slots.footerButtons}</Box>}
+        <DefaultFooterButtons />
       </Box>
       {!fileUploadProgress && <Box sx={{display: 'flex', gap: 2}}>{childrenWithoutSlots}</Box>}
     </Box>
@@ -50,39 +48,19 @@ FooterButton.displayName = 'MarkdownEditor.FooterButton'
 const DefaultFooterButtons = memo(() => {
   const {uploadButtonProps, fileDraggedOver} = useContext(MarkdownEditorContext)
 
-  return (
-    <>
-      <MarkdownSupportedHint />
-
-      {uploadButtonProps && (
-        <>
-          <VisualSeparator />
-          <FileUploadButton fileDraggedOver={fileDraggedOver} {...uploadButtonProps} />
-        </>
-      )}
-    </>
-  )
+  return uploadButtonProps ? <FileUploadButton fileDraggedOver={fileDraggedOver} {...uploadButtonProps} /> : null
 })
 DefaultFooterButtons.displayName = 'MarkdownEditor.DefaultFooterButtons'
 
-const ErrorMessage = memo(({message}: {message: string}) => (
-  <Text sx={{py: 1, px: 2, color: 'danger.fg'}} aria-live="polite">
-    <Text sx={{mr: 1}}>
-      <AlertIcon size="small" />
-    </Text>{' '}
-    {message}
-  </Text>
-))
-
 const FileUploadButton = memo(({fileDraggedOver, ...props}: Partial<ButtonProps> & {fileDraggedOver: boolean}) => {
   const {condensed, disabled} = useContext(MarkdownEditorContext)
 
   return (
     <Button
       variant="invisible"
-      leadingIcon={ImageIcon}
+      leadingIcon={PaperclipIcon}
       size="small"
-      sx={{color: 'fg.default', fontWeight: fileDraggedOver ? 'bold' : 'normal', px: 2}}
+      sx={{color: 'fg.muted', fontWeight: 'normal', px: 2}}
       onMouseDown={(e: React.MouseEvent) => {
         // Prevent pulling focus from the textarea
         e.preventDefault()
@@ -94,29 +72,3 @@ const FileUploadButton = memo(({fileDraggedOver, ...props}: Partial<ButtonProps>
     </Button>
   )
 })
-
-const VisualSeparator = memo(() => (
-  <Box sx={{borderRightStyle: 'solid', borderRightWidth: 1, borderRightColor: 'border.muted', height: '100%'}} />
-))
-
-const MarkdownSupportedHint = memo(() => {
-  const {condensed} = useContext(MarkdownEditorContext)
-
-  return (
-    <LinkButton
-      leadingIcon={MarkdownIcon}
-      variant="invisible"
-      size="small"
-      sx={{color: 'inherit', fontWeight: 'normal', px: 2}}
-      href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax"
-      target="_blank"
-      // The markdown editor aria-description already describes it as Markdown editor, so it's
-      // redundant to say Markdown is supported again here. However for sighted users, they
-      // cannot see the aria-description so this is a useful hint for them. So the aria-label
-      // is different from the visible text content.
-      aria-label="Markdown documentation"
-    >
-      {!condensed && <Text aria-hidden>Markdown is supported</Text>}
-    </LinkButton>
-  )
-})
diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
index df8b2bd6bc7..527ce119db0 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx
+++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
@@ -36,6 +36,7 @@ import {Emoji} from './suggestions/_useEmojiSuggestions'
 import {Mentionable} from './suggestions/_useMentionSuggestions'
 import {Reference} from './suggestions/_useReferenceSuggestions'
 import {isModifierKey} from './utils'
+import {ErrorMessage} from './_ErrorMessage'
 
 export type MarkdownEditorProps = SxProp & {
   /** Current value of the editor as a multiline markdown string. */
@@ -227,7 +228,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
         ({
           focus: opts => inputRef.current?.focus(opts),
           scrollIntoView: opts => containerRef.current?.scrollIntoView(opts),
-        }) as MarkdownEditorHandle,
+        } as MarkdownEditorHandle),
     )
 
     const inputHeight = useRef(0)
@@ -396,11 +397,16 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
               borderWidth: 1,
               borderStyle: 'solid',
               borderRadius: 2,
-              p: 2,
               height: fullHeight ? '100%' : undefined,
               minInlineSize: 'auto',
               bg: 'canvas.default',
               color: disabled ? 'fg.subtle' : 'fg.default',
+              '&: focus-within':
+                view === 'edit'
+                  ? {
+                      outline: '2px solid var(--borderColor-accent-emphasis)',
+                    }
+                  : {},
               ...sx,
             }}
             ref={containerRef}
@@ -410,15 +416,37 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
               {view === 'preview' ? ' preview mode selected.' : ' edit mode selected.'}
             </VisuallyHidden>
 
-            <Box sx={{display: 'flex', pb: 2, gap: 2, justifyContent: 'space-between'}} as="header">
-              <ViewSwitch
-                selectedView={view}
-                onViewSelect={setView}
-                disabled={fileHandler?.uploadProgress !== undefined}
-                onLoadPreview={loadPreview}
-              />
+            <Box
+              sx={{
+                display: 'flex',
+                backgroundColor: 'canvas.subtle',
+                borderTopLeftRadius: 2,
+                borderTopRightRadius: 2,
+                justifyContent: 'space-between',
+              }}
+              as="header"
+            >
+              <Box sx={{ml: '-1px', mt: '-1px', display: 'flex', alignItems: 'flex-end'}}>
+                <ViewSwitch
+                  selectedView={view}
+                  onViewSelect={setView}
+                  disabled={fileHandler?.uploadProgress !== undefined}
+                  onLoadPreview={loadPreview}
+                />
+              </Box>
 
-              <Box sx={{display: 'flex'}}>
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'flex-end',
+                  alignItems: 'center',
+                  flexGrow: 1,
+                  borderBottom: '1px solid',
+                  borderBottomColor: 'border.muted',
+                  pl: 2,
+                  pr: 1,
+                }}
+              >
                 <SavedRepliesContext.Provider value={savedRepliesContext}>
                   {view === 'edit' &&
                     (slots.toolbar ?? (
@@ -454,11 +482,12 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
               {...fileHandler?.pasteTargetProps}
               {...fileHandler?.dropTargetProps}
             />
+            {view === 'edit' && fileHandler?.errorMessage && <ErrorMessage message={fileHandler.errorMessage} />}
 
             {view === 'preview' && (
               <Box
                 sx={{
-                  p: 1,
+                  p: 3,
                   overflow: 'auto',
                   height: fullHeight ? '100%' : undefined,
                   minHeight: inputHeight.current,
@@ -475,10 +504,10 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
                 />
               </Box>
             )}
-            {slots.footer ?? (
-              <CoreFooter>{React.isValidElement(slots.actions) && slots.actions.props.children}</CoreFooter>
-            )}
           </Box>
+          {slots.footer ?? (
+            <CoreFooter>{React.isValidElement(slots.actions) && slots.actions.props.children}</CoreFooter>
+          )}
         </fieldset>
       </MarkdownEditorContext.Provider>
     )
diff --git a/src/drafts/MarkdownEditor/_ErrorMessage.tsx b/src/drafts/MarkdownEditor/_ErrorMessage.tsx
new file mode 100644
index 00000000000..4e6c9675fe4
--- /dev/null
+++ b/src/drafts/MarkdownEditor/_ErrorMessage.tsx
@@ -0,0 +1,13 @@
+import React, {memo} from 'react'
+import Flash from '../../Flash'
+
+export const ErrorMessage = memo(({message}: {message: string}) => (
+  <Flash
+    aria-live="polite"
+    variant="danger"
+    full
+    sx={{fontSize: 1, borderBottomLeftRadius: 2, borderBottomRightRadius: 2, px: 2, py: 2}}
+  >
+    {message}
+  </Flash>
+))
diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx
index 9d0b7e4a9e5..8cc20c77e36 100644
--- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx
+++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx
@@ -152,14 +152,18 @@ export const MarkdownInput = forwardRef<HTMLTextAreaElement, MarkdownInputProps>
           aria-label="Markdown value"
           onChange={onChange}
           sx={{
-            width: '100%',
             borderStyle: 'none',
             boxShadow: 'none',
             height: fullHeight ? '100%' : undefined,
+            p: 2,
             outline: theme => {
-              return isDraggedOver ? `solid 2px ${theme.colors.accent.fg}` : undefined
+              return isDraggedOver ? `dashed 2px ${theme.colors.border.muted}` : undefined
             },
+            outlineOffset: '-4px',
             display: visible ? undefined : 'none',
+            '&: focus-within': {
+              boxShadow: 'none',
+            },
             '& textarea': {
               lineHeight: 1.2,
               resize: fullHeight ? 'none' : 'vertical',

From 3bb9f505987bebb5816f0f47b20317e28ed4bdd4 Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 25 Aug 2023 10:43:42 +0000
Subject: [PATCH 03/11] fix tests, resizer

---
 .../MarkdownEditor/MarkdownEditor.test.tsx    | 36 +++++++------------
 src/drafts/MarkdownEditor/_MarkdownInput.tsx  |  3 +-
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
index b4e4639702a..15a243af0eb 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
+++ b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
@@ -57,12 +57,10 @@ const render = async (ui: React.ReactElement) => {
 
   const queryForToolbarButton = (label: string) => within(getToolbar()).queryByRole('button', {name: label})
 
-  const getDefaultFooterButton = () => within(getFooter()).getByRole('link', {name: 'Markdown documentation'})
-
   const getActionButton = (label: string) => within(getFooter()).getByRole('button', {name: label})
 
   const getViewSwitch = () => {
-    const button = result.queryByRole('button', {name: 'Preview'}) || result.queryByRole('button', {name: 'Edit'})
+    const button = result.queryByRole('tab', {name: 'Preview'}) || result.queryByRole('tab', {name: 'Edit'})
     if (!button) throw new Error('View switch button not found')
     return button
   }
@@ -99,7 +97,6 @@ const render = async (ui: React.ReactElement) => {
     user,
     queryForUploadButton,
     getFooter,
-    getDefaultFooterButton,
     getViewSwitch,
     getPreview,
     queryForPreview,
@@ -261,7 +258,7 @@ describe('MarkdownEditor', () => {
     it('renders custom action buttons', async () => {
       const {getActionButton} = await render(
         <UncontrolledEditor>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Actions>
             <MarkdownEditor.ActionButton>Example</MarkdownEditor.ActionButton>
           </MarkdownEditor.Actions>
@@ -273,7 +270,7 @@ describe('MarkdownEditor', () => {
     it('disables custom action buttons when the editor is disabled (unless explicitly overridden)', async () => {
       const {getActionButton} = await render(
         <UncontrolledEditor disabled>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Actions>
             <MarkdownEditor.ActionButton>A</MarkdownEditor.ActionButton>
             <MarkdownEditor.ActionButton disabled={false}>B</MarkdownEditor.ActionButton>
@@ -289,7 +286,7 @@ describe('MarkdownEditor', () => {
       const ref: React.RefObject<HTMLButtonElement> = {current: null}
       await render(
         <UncontrolledEditor>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Actions>
             <MarkdownEditor.ActionButton ref={ref}>Example</MarkdownEditor.ActionButton>
           </MarkdownEditor.Actions>
@@ -300,13 +297,8 @@ describe('MarkdownEditor', () => {
   })
 
   describe('footer', () => {
-    it('renders default when not using custom footer', async () => {
-      const {getDefaultFooterButton} = await render(<UncontrolledEditor></UncontrolledEditor>)
-      expect(getDefaultFooterButton()).toBeInTheDocument()
-    })
-
     it('renders custom buttons', async () => {
-      const {getActionButton, getDefaultFooterButton} = await render(
+      const {getActionButton} = await render(
         <UncontrolledEditor>
           <MarkdownEditor.Footer>
             <MarkdownEditor.FooterButton>Footer A</MarkdownEditor.FooterButton>
@@ -317,12 +309,11 @@ describe('MarkdownEditor', () => {
         </UncontrolledEditor>,
       )
       expect(getActionButton('Footer A')).toBeInTheDocument()
-      expect(getDefaultFooterButton()).toBeInTheDocument()
       expect(getActionButton('Action A')).toBeInTheDocument()
     })
 
     it('disables buttons when the editor is disabled (unless explicitly overridden)', async () => {
-      const {getActionButton, getDefaultFooterButton} = await render(
+      const {getActionButton} = await render(
         <UncontrolledEditor disabled>
           <MarkdownEditor.Footer>
             <MarkdownEditor.FooterButton>Footer A</MarkdownEditor.FooterButton>
@@ -334,7 +325,6 @@ describe('MarkdownEditor', () => {
         </UncontrolledEditor>,
       )
       expect(getActionButton('Footer A')).toBeDisabled()
-      expect(getDefaultFooterButton()).not.toBeDisabled()
       expect(getActionButton('Action A')).toBeDisabled()
       expect(getActionButton('Action B')).not.toBeDisabled()
     })
@@ -356,7 +346,7 @@ describe('MarkdownEditor', () => {
     it('renders custom toolbar buttons', async () => {
       const {getToolbarButton} = await render(
         <UncontrolledEditor>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton icon={DiffAddedIcon} aria-label="Test Button" />
           </MarkdownEditor.Toolbar>
@@ -370,7 +360,7 @@ describe('MarkdownEditor', () => {
       const ref: React.RefObject<HTMLButtonElement> = {current: null}
       await render(
         <UncontrolledEditor>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton ref={ref} icon={DiffAddedIcon} aria-label="Test Button" />
           </MarkdownEditor.Toolbar>
@@ -383,7 +373,7 @@ describe('MarkdownEditor', () => {
       const onClick = jest.fn()
       const {getInput, getToolbarButton, user} = await render(
         <UncontrolledEditor>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton icon={DiffAddedIcon} aria-label="Test Button" onClick={onClick} />
           </MarkdownEditor.Toolbar>
@@ -401,7 +391,7 @@ describe('MarkdownEditor', () => {
     it('disables buttons when editor is disabled (unless explicitly overridden)', async () => {
       const {getToolbarButton} = await render(
         <UncontrolledEditor disabled>
-          {/* eslint-disable-next-line primer-react/direct-slot-children */}
+          {}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton aria-label="Test Button A" icon={DiffAddedIcon} />
             <MarkdownEditor.ToolbarButton aria-label="Test Button B" icon={DiffAddedIcon} disabled={false} />
@@ -460,7 +450,7 @@ describe('MarkdownEditor', () => {
       it('includes custom buttons', async () => {
         const {getToolbarButton, user} = await render(
           <UncontrolledEditor>
-            {/* eslint-disable-next-line primer-react/direct-slot-children */}
+            {}
             <MarkdownEditor.Toolbar>
               <MarkdownEditor.ToolbarButton aria-label="Test Button A" icon={DiffAddedIcon} />
               <MarkdownEditor.ToolbarButton aria-label="Test Button B" icon={DiffAddedIcon} />
@@ -712,7 +702,7 @@ describe('MarkdownEditor', () => {
 
       it('rejects disallows file types while accepting allowed ones', async () => {
         const onChange = jest.fn()
-        const {getInput, getFooter} = await render(
+        const {getInput, getEditorContainer} = await render(
           <UncontrolledEditor onUploadFile={mockUploadFile} onChange={onChange} acceptedFileTypes={['image/*']} />,
         )
         const input = getInput()
@@ -727,7 +717,7 @@ describe('MarkdownEditor', () => {
 
         await expectFilesToBeAdded(onChange, fileB)
 
-        expect(getFooter()).toHaveTextContent('File type not allowed: .app')
+        expect(getEditorContainer()).toHaveTextContent('File type not allowed: .app')
       })
 
       it('inserts "failed to upload" note on failure', async () => {
diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx
index 8cc20c77e36..0c988b73b40 100644
--- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx
+++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx
@@ -155,7 +155,6 @@ export const MarkdownInput = forwardRef<HTMLTextAreaElement, MarkdownInputProps>
             borderStyle: 'none',
             boxShadow: 'none',
             height: fullHeight ? '100%' : undefined,
-            p: 2,
             outline: theme => {
               return isDraggedOver ? `dashed 2px ${theme.colors.border.muted}` : undefined
             },
@@ -167,7 +166,7 @@ export const MarkdownInput = forwardRef<HTMLTextAreaElement, MarkdownInputProps>
             '& textarea': {
               lineHeight: 1.2,
               resize: fullHeight ? 'none' : 'vertical',
-              p: 2,
+              p: 3,
               fontFamily: monospace ? 'mono' : 'normal',
               ...heightStyles,
             },

From 9bea79ff337ceb7e610846e8e49118b68b4ce6bc Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 25 Aug 2023 11:01:50 +0000
Subject: [PATCH 04/11] fix tests

---
 src/drafts/MarkdownEditor/MarkdownEditor.tsx | 203 ++++++++++---------
 src/drafts/MarkdownEditor/_ViewSwitch.tsx    |   2 +
 2 files changed, 107 insertions(+), 98 deletions(-)

diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
index 527ce119db0..2d7ac35607b 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx
+++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
@@ -392,122 +392,129 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              width: '100%',
-              borderColor: 'border.default',
-              borderWidth: 1,
-              borderStyle: 'solid',
-              borderRadius: 2,
-              height: fullHeight ? '100%' : undefined,
-              minInlineSize: 'auto',
-              bg: 'canvas.default',
-              color: disabled ? 'fg.subtle' : 'fg.default',
-              '&: focus-within':
-                view === 'edit'
-                  ? {
-                      outline: '2px solid var(--borderColor-accent-emphasis)',
-                    }
-                  : {},
-              ...sx,
             }}
             ref={containerRef}
           >
-            <VisuallyHidden id={descriptionId} aria-live="polite">
-              Markdown input:
-              {view === 'preview' ? ' preview mode selected.' : ' edit mode selected.'}
-            </VisuallyHidden>
-
             <Box
               sx={{
                 display: 'flex',
-                backgroundColor: 'canvas.subtle',
-                borderTopLeftRadius: 2,
-                borderTopRightRadius: 2,
-                justifyContent: 'space-between',
+                flexDirection: 'column',
+                width: '100%',
+                borderColor: 'border.default',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderRadius: 2,
+                height: fullHeight ? '100%' : undefined,
+                minInlineSize: 'auto',
+                bg: 'canvas.default',
+                color: disabled ? 'fg.subtle' : 'fg.default',
+                '&: focus-within':
+                  view === 'edit'
+                    ? {
+                        outline: '2px solid var(--borderColor-accent-emphasis)',
+                      }
+                    : {},
+                ...sx,
               }}
-              as="header"
             >
-              <Box sx={{ml: '-1px', mt: '-1px', display: 'flex', alignItems: 'flex-end'}}>
-                <ViewSwitch
-                  selectedView={view}
-                  onViewSelect={setView}
-                  disabled={fileHandler?.uploadProgress !== undefined}
-                  onLoadPreview={loadPreview}
-                />
-              </Box>
+              <VisuallyHidden id={descriptionId} aria-live="polite">
+                Markdown input:
+                {view === 'preview' ? ' preview mode selected.' : ' edit mode selected.'}
+              </VisuallyHidden>
 
               <Box
                 sx={{
                   display: 'flex',
-                  justifyContent: 'flex-end',
-                  alignItems: 'center',
-                  flexGrow: 1,
-                  borderBottom: '1px solid',
-                  borderBottomColor: 'border.muted',
-                  pl: 2,
-                  pr: 1,
+                  backgroundColor: 'canvas.subtle',
+                  borderTopLeftRadius: 2,
+                  borderTopRightRadius: 2,
+                  justifyContent: 'space-between',
                 }}
+                as="header"
               >
-                <SavedRepliesContext.Provider value={savedRepliesContext}>
-                  {view === 'edit' &&
-                    (slots.toolbar ?? (
-                      <CoreToolbar>
-                        <DefaultToolbarButtons />
-                      </CoreToolbar>
-                    ))}
-                </SavedRepliesContext.Provider>
+                <Box sx={{ml: '-1px', mt: '-1px', display: 'flex', alignItems: 'flex-end'}}>
+                  <ViewSwitch
+                    selectedView={view}
+                    onViewSelect={setView}
+                    disabled={fileHandler?.uploadProgress !== undefined}
+                    onLoadPreview={loadPreview}
+                  />
+                </Box>
+
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    alignItems: 'center',
+                    flexGrow: 1,
+                    borderBottom: '1px solid',
+                    borderBottomColor: 'border.muted',
+                    pl: 2,
+                    pr: 1,
+                  }}
+                >
+                  <SavedRepliesContext.Provider value={savedRepliesContext}>
+                    {view === 'edit' &&
+                      (slots.toolbar ?? (
+                        <CoreToolbar>
+                          <DefaultToolbarButtons />
+                        </CoreToolbar>
+                      ))}
+                  </SavedRepliesContext.Provider>
+                </Box>
               </Box>
-            </Box>
 
-            <MarkdownInput
-              value={value}
-              onChange={onInputChange}
-              emojiSuggestions={emojiSuggestions}
-              mentionSuggestions={mentionSuggestions}
-              referenceSuggestions={referenceSuggestions}
-              disabled={disabled}
-              placeholder={placeholder}
-              id={id}
-              maxLength={maxLength}
-              ref={inputRef}
-              fullHeight={fullHeight}
-              isDraggedOver={fileHandler?.isDraggedOver ?? false}
-              minHeightLines={minHeightLines}
-              maxHeightLines={maxHeightLines}
-              visible={view === 'edit'}
-              monospace={monospace}
-              required={required}
-              name={name}
-              pasteUrlsAsPlainText={pasteUrlsAsPlainText}
-              {...inputCompositionProps}
-              {...fileHandler?.pasteTargetProps}
-              {...fileHandler?.dropTargetProps}
-            />
-            {view === 'edit' && fileHandler?.errorMessage && <ErrorMessage message={fileHandler.errorMessage} />}
-
-            {view === 'preview' && (
-              <Box
-                sx={{
-                  p: 3,
-                  overflow: 'auto',
-                  height: fullHeight ? '100%' : undefined,
-                  minHeight: inputHeight.current,
-                  boxSizing: 'border-box',
-                }}
-                aria-live="polite"
-                tabIndex={-1}
-              >
-                <h2 style={a11yOnlyStyle}>Rendered Markdown Preview</h2>
-                <MarkdownViewer
-                  dangerousRenderedHTML={{__html: html || 'Nothing to preview'}}
-                  loading={html === null}
-                  openLinksInNewTab
-                />
-              </Box>
+              <MarkdownInput
+                value={value}
+                onChange={onInputChange}
+                emojiSuggestions={emojiSuggestions}
+                mentionSuggestions={mentionSuggestions}
+                referenceSuggestions={referenceSuggestions}
+                disabled={disabled}
+                placeholder={placeholder}
+                id={id}
+                maxLength={maxLength}
+                ref={inputRef}
+                fullHeight={fullHeight}
+                isDraggedOver={fileHandler?.isDraggedOver ?? false}
+                minHeightLines={minHeightLines}
+                maxHeightLines={maxHeightLines}
+                visible={view === 'edit'}
+                monospace={monospace}
+                required={required}
+                name={name}
+                pasteUrlsAsPlainText={pasteUrlsAsPlainText}
+                {...inputCompositionProps}
+                {...fileHandler?.pasteTargetProps}
+                {...fileHandler?.dropTargetProps}
+              />
+              {view === 'edit' && fileHandler?.errorMessage && <ErrorMessage message={fileHandler.errorMessage} />}
+
+              {view === 'preview' && (
+                <Box
+                  sx={{
+                    p: 3,
+                    overflow: 'auto',
+                    height: fullHeight ? '100%' : undefined,
+                    minHeight: inputHeight.current,
+                    boxSizing: 'border-box',
+                  }}
+                  aria-live="polite"
+                  tabIndex={-1}
+                >
+                  <h2 style={a11yOnlyStyle}>Rendered Markdown Preview</h2>
+                  <MarkdownViewer
+                    dangerousRenderedHTML={{__html: html || 'Nothing to preview'}}
+                    loading={html === null}
+                    openLinksInNewTab
+                  />
+                </Box>
+              )}
+            </Box>
+            {slots.footer ?? (
+              <CoreFooter>{React.isValidElement(slots.actions) && slots.actions.props.children}</CoreFooter>
             )}
           </Box>
-          {slots.footer ?? (
-            <CoreFooter>{React.isValidElement(slots.actions) && slots.actions.props.children}</CoreFooter>
-          )}
         </fieldset>
       </MarkdownEditorContext.Provider>
     )
diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index a7ec5d0e441..a3c50fcb336 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -38,6 +38,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
           {...sharedProps}
           as="button"
           selected={selectedView === 'edit'}
+          disabled={disabled}
           sx={{cursor: 'pointer', color: selectedView === 'edit' ? 'fg.default' : 'fg.muted', borderTopLeftRadius: 1}}
         >
           Write
@@ -46,6 +47,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
           {...sharedProps}
           as="button"
           selected={selectedView === 'preview'}
+          disabled={disabled}
           sx={{
             cursor: 'pointer',
             color: selectedView === 'preview' ? 'fg.default' : 'fg.muted',

From 5ed743e5c9237e9025f48799497deaf66e2cce62 Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 25 Aug 2023 11:43:49 +0000
Subject: [PATCH 05/11] move toolbar styling into coretoolbar

---
 src/drafts/MarkdownEditor/MarkdownEditor.tsx | 29 ++++++--------------
 src/drafts/MarkdownEditor/Toolbar.tsx        | 13 ++++++++-
 2 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
index 2d7ac35607b..bae447e6edc 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx
+++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
@@ -441,27 +441,14 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
                   />
                 </Box>
 
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    alignItems: 'center',
-                    flexGrow: 1,
-                    borderBottom: '1px solid',
-                    borderBottomColor: 'border.muted',
-                    pl: 2,
-                    pr: 1,
-                  }}
-                >
-                  <SavedRepliesContext.Provider value={savedRepliesContext}>
-                    {view === 'edit' &&
-                      (slots.toolbar ?? (
-                        <CoreToolbar>
-                          <DefaultToolbarButtons />
-                        </CoreToolbar>
-                      ))}
-                  </SavedRepliesContext.Provider>
-                </Box>
+                <SavedRepliesContext.Provider value={savedRepliesContext}>
+                  {view === 'edit' &&
+                    (slots.toolbar ?? (
+                      <CoreToolbar>
+                        <DefaultToolbarButtons />
+                      </CoreToolbar>
+                    ))}
+                </SavedRepliesContext.Provider>
               </Box>
 
               <MarkdownInput
diff --git a/src/drafts/MarkdownEditor/Toolbar.tsx b/src/drafts/MarkdownEditor/Toolbar.tsx
index cacf9e28187..dccc1f35333 100644
--- a/src/drafts/MarkdownEditor/Toolbar.tsx
+++ b/src/drafts/MarkdownEditor/Toolbar.tsx
@@ -149,7 +149,18 @@ export const CoreToolbar = ({children}: {children?: React.ReactNode}) => {
       ref={containerRef}
       aria-label="Formatting tools"
       role="toolbar"
-      sx={{display: 'flex', flexWrap: 'wrap', justifyContent: 'flex-end', gap: 0}}
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'flex-end',
+        gap: 0,
+        alignItems: 'center',
+        flexGrow: 1,
+        borderBottom: '1px solid',
+        borderBottomColor: 'border.muted',
+        pl: 2,
+        pr: 1,
+      }}
     >
       {children}
     </Box>

From 0caa24261143300c69d03c6bfb0a6eb92e897fa0 Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 25 Aug 2023 13:45:41 +0200
Subject: [PATCH 06/11] Update src/drafts/MarkdownEditor/MarkdownEditor.tsx

---
 src/drafts/MarkdownEditor/MarkdownEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
index bae447e6edc..d9486be73a8 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.tsx
+++ b/src/drafts/MarkdownEditor/MarkdownEditor.tsx
@@ -228,7 +228,7 @@ const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorProps>(
         ({
           focus: opts => inputRef.current?.focus(opts),
           scrollIntoView: opts => containerRef.current?.scrollIntoView(opts),
-        } as MarkdownEditorHandle),
+        }) as MarkdownEditorHandle,
     )
 
     const inputHeight = useRef(0)

From 7eddf721b24c89b1061ead40177436beb5ce3a3f Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Mon, 4 Sep 2023 12:26:34 +0200
Subject: [PATCH 07/11] Create metal-hornets-appear.md

---
 .changeset/metal-hornets-appear.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/metal-hornets-appear.md

diff --git a/.changeset/metal-hornets-appear.md b/.changeset/metal-hornets-appear.md
new file mode 100644
index 00000000000..0ef08eb40e6
--- /dev/null
+++ b/.changeset/metal-hornets-appear.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Changes visual appearence of MarkdownEditor feel more in-line with other Github Markdown editors

From c5f0fd1b6782ab2de8ec55e508a5f18740d4924b Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Mon, 4 Sep 2023 12:26:57 +0200
Subject: [PATCH 08/11] Update metal-hornets-appear.md

---
 .changeset/metal-hornets-appear.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/metal-hornets-appear.md b/.changeset/metal-hornets-appear.md
index 0ef08eb40e6..0b35b5273e2 100644
--- a/.changeset/metal-hornets-appear.md
+++ b/.changeset/metal-hornets-appear.md
@@ -2,4 +2,4 @@
 "@primer/react": patch
 ---
 
-Changes visual appearence of MarkdownEditor feel more in-line with other Github Markdown editors
+Changes visual appearance of MarkdownEditor feel more in-line with other Github Markdown editors

From 68f88c2502d33aa3a90abf5092af38af88e64de2 Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Mon, 4 Sep 2023 12:31:38 +0200
Subject: [PATCH 09/11] Update metal-hornets-appear.md

---
 .changeset/metal-hornets-appear.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.changeset/metal-hornets-appear.md b/.changeset/metal-hornets-appear.md
index 0b35b5273e2..f9ab197087d 100644
--- a/.changeset/metal-hornets-appear.md
+++ b/.changeset/metal-hornets-appear.md
@@ -2,4 +2,6 @@
 "@primer/react": patch
 ---
 
-Changes visual appearance of MarkdownEditor feel more in-line with other Github Markdown editors
+Changes visual appearance of MarkdownEditor
+
+<!-- Changed components: MarkdownEditor -->

From 1465a403b3aea59a12c9bb09f6254e02a2f044be Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Mon, 9 Oct 2023 11:18:38 +0000
Subject: [PATCH 10/11] adjust tests to reintroduce eslint line

---
 .../MarkdownEditor/MarkdownEditor.test.tsx       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
index 308c8b9f0ed..f84a5626edc 100644
--- a/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
+++ b/src/drafts/MarkdownEditor/MarkdownEditor.test.tsx
@@ -259,7 +259,7 @@ describe('MarkdownEditor', () => {
     it('renders custom action buttons', async () => {
       const {getActionButton} = await render(
         <UncontrolledEditor>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Actions>
             <MarkdownEditor.ActionButton>Example</MarkdownEditor.ActionButton>
           </MarkdownEditor.Actions>
@@ -271,7 +271,7 @@ describe('MarkdownEditor', () => {
     it('disables custom action buttons when the editor is disabled (unless explicitly overridden)', async () => {
       const {getActionButton} = await render(
         <UncontrolledEditor disabled>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Actions>
             <MarkdownEditor.ActionButton>A</MarkdownEditor.ActionButton>
             <MarkdownEditor.ActionButton disabled={false}>B</MarkdownEditor.ActionButton>
@@ -287,7 +287,7 @@ describe('MarkdownEditor', () => {
       const ref: React.RefObject<HTMLButtonElement> = {current: null}
       await render(
         <UncontrolledEditor>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Actions>
             <MarkdownEditor.ActionButton ref={ref}>Example</MarkdownEditor.ActionButton>
           </MarkdownEditor.Actions>
@@ -347,7 +347,7 @@ describe('MarkdownEditor', () => {
     it('renders custom toolbar buttons', async () => {
       const {getToolbarButton} = await render(
         <UncontrolledEditor>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton icon={DiffAddedIcon} aria-label="Test Button" />
           </MarkdownEditor.Toolbar>
@@ -361,7 +361,7 @@ describe('MarkdownEditor', () => {
       const ref: React.RefObject<HTMLButtonElement> = {current: null}
       await render(
         <UncontrolledEditor>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton ref={ref} icon={DiffAddedIcon} aria-label="Test Button" />
           </MarkdownEditor.Toolbar>
@@ -374,7 +374,7 @@ describe('MarkdownEditor', () => {
       const onClick = jest.fn()
       const {getInput, getToolbarButton, user} = await render(
         <UncontrolledEditor>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton icon={DiffAddedIcon} aria-label="Test Button" onClick={onClick} />
           </MarkdownEditor.Toolbar>
@@ -392,7 +392,7 @@ describe('MarkdownEditor', () => {
     it('disables buttons when editor is disabled (unless explicitly overridden)', async () => {
       const {getToolbarButton} = await render(
         <UncontrolledEditor disabled>
-          {}
+          {/* eslint-disable-next-line primer-react/direct-slot-children */}
           <MarkdownEditor.Toolbar>
             <MarkdownEditor.ToolbarButton aria-label="Test Button A" icon={DiffAddedIcon} />
             <MarkdownEditor.ToolbarButton aria-label="Test Button B" icon={DiffAddedIcon} disabled={false} />
@@ -451,7 +451,7 @@ describe('MarkdownEditor', () => {
       it('includes custom buttons', async () => {
         const {getToolbarButton, user} = await render(
           <UncontrolledEditor>
-            {}
+            {/* eslint-disable-next-line primer-react/direct-slot-children */}
             <MarkdownEditor.Toolbar>
               <MarkdownEditor.ToolbarButton aria-label="Test Button A" icon={DiffAddedIcon} />
               <MarkdownEditor.ToolbarButton aria-label="Test Button B" icon={DiffAddedIcon} />

From ca78962bba5c562d476dcb894ecdd73377ca1aee Mon Sep 17 00:00:00 2001
From: Jan Six <six7@github.com>
Date: Fri, 3 Nov 2023 11:14:51 +0100
Subject: [PATCH 11/11] adjust aria label of tabnav

---
 src/drafts/MarkdownEditor/_ViewSwitch.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index a3c50fcb336..f1fb08482af 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -33,7 +33,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
 
   return (
     <Box sx={{display: 'flex', flexDirection: 'row'}}>
-      <TabNav aria-label="Main">
+      <TabNav aria-label="View mode">
         <TabNav.Link
           {...sharedProps}
           as="button"