From 598eeeb3274d3896b819cb1184a5c5997c29ed9d Mon Sep 17 00:00:00 2001
From: Ezedike-egwom Collins <ezedikecollins@gmail.com>
Date: Tue, 25 Aug 2026 23:55:18 +0100
Subject: [PATCH 1/4] fix(a11y): add alt-text field for embedded images in post
 editor

---
 src/components/editor/MediaEmbedder.tsx | 26 +++++++++++++++++++++++--
 src/hooks/useContentEditor.tsx          |  8 ++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/editor/MediaEmbedder.tsx b/src/components/editor/MediaEmbedder.tsx
index da285b52..5095b4f5 100644
--- a/src/components/editor/MediaEmbedder.tsx
+++ b/src/components/editor/MediaEmbedder.tsx
@@ -4,24 +4,30 @@ import { sanitizeUrl } from '@/utils/sanitize';
 import { useFocusTrap } from '@/hooks/useFocusTrap';
 
 interface MediaEmbedderProps {
-  onAddImage: (url: string) => void;
+  onAddImage: (url: string, alt?: string) => void;
   onAddYoutube: (url: string) => void;
 }
 
 export const MediaEmbedder: React.FC<MediaEmbedderProps> = ({ onAddImage, onAddYoutube }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [url, setUrl] = useState('');
+  const [altText, setAltText] = useState('');
   const [type, setType] = useState<'image' | 'youtube'>('image');
   const [urlError, setUrlError] = useState('');
   const id = useId();
   const dialogTitleId = `${id}-title`;
   const errorId = `${id}-error`;
   const inputId = `${id}-url`;
+  const altInputId = `${id}-alt`;
   const urlInputRef = useRef<HTMLInputElement>(null);
   const dialogRef = useFocusTrap<HTMLDivElement>(isOpen, { initialFocusRef: urlInputRef });
 
   const closeDialog = () => setIsOpen(false);
 
+  useEffect(() => {
+    if (!isOpen) setAltText('');
+  }, [isOpen]);
+
   useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (event: KeyboardEvent) => {
@@ -40,11 +46,12 @@ export const MediaEmbedder: React.FC<MediaEmbedderProps> = ({ onAddImage, onAddY
     }
     setUrlError('');
     if (type === 'image') {
-      onAddImage(safeUrl);
+      onAddImage(safeUrl, altText);
     } else {
       onAddYoutube(safeUrl);
     }
     setUrl('');
+    setAltText('');
     closeDialog();
   };
 
@@ -114,6 +121,21 @@ export const MediaEmbedder: React.FC<MediaEmbedderProps> = ({ onAddImage, onAddY
               >
                 {urlError}
               </p>
+              {type === 'image' ? (
+                <>
+                  <label htmlFor={altInputId} className="text-sm text-gray-600 dark:text-gray-300">
+                    Alt text (for screen readers)
+                  </label>
+                  <input
+                    id={altInputId}
+                    type="text"
+                    value={altText}
+                    onChange={(e) => setAltText(e.target.value)}
+                    placeholder="Describe the image..."
+                    className="w-full p-2 border rounded mb-3 dark:bg-gray-700 dark:border-gray-600"
+                  />
+                </>
+              ) : null}
               <div className="flex justify-end gap-2">
                 <button
                   type="button"
diff --git a/src/hooks/useContentEditor.tsx b/src/hooks/useContentEditor.tsx
index 2fd135c6..7e140c59 100644
--- a/src/hooks/useContentEditor.tsx
+++ b/src/hooks/useContentEditor.tsx
@@ -70,10 +70,14 @@ export const useContentEditor = ({
   ); // Added dependency array
 
   const addImage = useCallback(
-    (url: string) => {
+    (url: string, alt?: string) => {
       const safeUrl = sanitizeUrl(url);
       if (safeUrl && editor) {
-        editor.chain().focus().setImage({ src: safeUrl }).run();
+        editor
+          .chain()
+          .focus()
+          .setImage({ src: safeUrl, alt: alt?.trim() || undefined })
+          .run();
       }
     },
     [editor],

From 604e2a1544c02433f6f43664bd9da271bde45488 Mon Sep 17 00:00:00 2001
From: Ezedike-egwom Collins <ezedikecollins@gmail.com>
Date: Tue, 25 Aug 2026 23:55:23 +0100
Subject: [PATCH 2/4] fix(a11y): match template sidebar heading to its
 accessible name

---
 src/components/editor/ContentTemplateLibrary.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/editor/ContentTemplateLibrary.tsx b/src/components/editor/ContentTemplateLibrary.tsx
index 33180bbb..9be886ed 100644
--- a/src/components/editor/ContentTemplateLibrary.tsx
+++ b/src/components/editor/ContentTemplateLibrary.tsx
@@ -36,7 +36,7 @@ export const ContentTemplateLibrary: React.FC<ContentTemplateLibraryProps> = ({
         id={headingId}
         className="font-semibold text-sm text-gray-500 uppercase mb-4 tracking-wider"
       >
-        Templates
+        Content Templates
       </h3>
       <div className="space-y-2">
         {TEMPLATES.map((template) => (

From 3e462f87229ede04ba39b5dfe6aa5dcad1993724 Mon Sep 17 00:00:00 2001
From: Ezedike-egwom Collins <ezedikecollins@gmail.com>
Date: Tue, 25 Aug 2026 23:55:28 +0100
Subject: [PATCH 3/4] fix(a11y): announce publish status for screen reader
 users

---
 src/components/editor/MaterialEditorWrapper.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/editor/MaterialEditorWrapper.tsx b/src/components/editor/MaterialEditorWrapper.tsx
index e57fe822..54cd3797 100644
--- a/src/components/editor/MaterialEditorWrapper.tsx
+++ b/src/components/editor/MaterialEditorWrapper.tsx
@@ -100,6 +100,7 @@ export const MaterialEditorWrapper = forwardRef<HTMLDivElement, MaterialEditorWr
             <button
               type="button"
               disabled={submitting}
+              aria-busy={submitting}
               onClick={handleSubmit}
               className="mde-button mde-button--filled relative overflow-hidden rounded-full bg-blue-600 px-5 py-2 text-sm font-medium uppercase tracking-wider text-white shadow transition hover:bg-blue-700 disabled:opacity-60"
             >
@@ -121,6 +122,9 @@ export const MaterialEditorWrapper = forwardRef<HTMLDivElement, MaterialEditorWr
             </button>
           ) : null}
         </footer>
+        <p role="status" aria-live="polite" className="sr-only">
+          {submitting ? `${submitLabel}, please wait…` : ''}
+        </p>
       </div>
     );
   },

From a177a1d150377285b528e27dde13cd85743e837f Mon Sep 17 00:00:00 2001
From: Ezedike-egwom Collins <ezedikecollins@gmail.com>
Date: Tue, 25 Aug 2026 23:55:33 +0100
Subject: [PATCH 4/4] test(a11y): cover alt-text field and publish status
 announcement

---
 .../editor/__tests__/accessibility.test.tsx   | 62 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/__tests__/accessibility.test.tsx b/src/components/editor/__tests__/accessibility.test.tsx
index d686c277..8e5556da 100644
--- a/src/components/editor/__tests__/accessibility.test.tsx
+++ b/src/components/editor/__tests__/accessibility.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import { CollaborativeEditingTools } from '../CollaborativeEditingTools';
 import { MediaEmbedder } from '../MediaEmbedder';
 import { ContentTemplateLibrary } from '../ContentTemplateLibrary';
+import { MaterialEditorWrapper } from '../MaterialEditorWrapper';
 
 // ─── CollaborativeEditingTools ────────────────────────────────────────────────
 
@@ -79,6 +80,32 @@ describe('MediaEmbedder accessibility', () => {
     const errorEl = screen.getByRole('alert');
     expect(input).toHaveAttribute('aria-describedby', errorEl.id);
   });
+
+  it('offers an alt-text field for images and passes it to onAddImage', () => {
+    const onAddImage = vi.fn();
+    render(<MediaEmbedder onAddImage={onAddImage} onAddYoutube={noop} />);
+    fireEvent.click(screen.getByRole('button', { name: /add image/i }));
+
+    fireEvent.change(screen.getByLabelText(/image url/i), {
+      target: { value: 'https://example.com/photo.png' },
+    });
+    fireEvent.change(screen.getByLabelText(/alt text/i), {
+      target: { value: 'A screenshot of the dashboard' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: /embed/i }));
+
+    expect(onAddImage).toHaveBeenCalledWith(
+      'https://example.com/photo.png',
+      'A screenshot of the dashboard',
+    );
+  });
+
+  it('does not show an alt-text field for YouTube embeds', () => {
+    render(<MediaEmbedder onAddImage={noop} onAddYoutube={noop} />);
+    fireEvent.click(screen.getByRole('button', { name: /add youtube video/i }));
+
+    expect(screen.queryByLabelText(/alt text/i)).not.toBeInTheDocument();
+  });
 });
 
 // ─── ContentTemplateLibrary ───────────────────────────────────────────────────
@@ -111,3 +138,36 @@ describe('ContentTemplateLibrary accessibility', () => {
     expect(hiddenEls.length).toBeGreaterThan(0);
   });
 });
+
+// ─── MaterialEditorWrapper ─────────────────────────────────────────────────────
+
+describe('MaterialEditorWrapper accessibility', () => {
+  it('marks the submit button aria-busy and announces status while submitting', async () => {
+    let resolveSubmit: () => void = () => {};
+    const onSubmit = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveSubmit = resolve;
+        }),
+    );
+
+    render(
+      <MaterialEditorWrapper title="Post Editor" onSubmit={onSubmit}>
+        <div>content</div>
+      </MaterialEditorWrapper>,
+    );
+
+    const publishButton = screen.getByRole('button', { name: /publish/i });
+    expect(publishButton).toHaveAttribute('aria-busy', 'false');
+
+    fireEvent.click(publishButton);
+
+    expect(publishButton).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByRole('status')).toHaveTextContent(/publish, please wait/i);
+
+    resolveSubmit();
+    await waitFor(() => {
+      expect(publishButton).toHaveAttribute('aria-busy', 'false');
+    });
+  });
+});