code editor accessibility

Author: SharonStrats

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "solid-ui",
-	"version": "5.0.2-8",
+	"version": "5.0.2-9",
 	"description": "UI library for Solid applications",
 	"main": "dist/index.cjs.js",
 	"types": "dist/index.d.ts",

package.json

@@ -18,16 +18,27 @@ export class CodeEditor {
   private _view: EditorView | null = null
   private _languageCompartment: Compartment | null = null
   private _editableCompartment: Compartment | null = null
+  private _readOnlyCompartment: Compartment | null = null
+  private _accessibilityCompartment: Compartment | null = null
   private _onDirtyChange?: (dirty: boolean) => void
   private _isDirty = false
 
-  async initialize (container: HTMLElement, initialDoc = '', contentType: string = 'text/turtle', theme: ThemeMode = 'dark', onDirtyChange?: (dirty: boolean) => void) {
+  async initialize (
+    container: HTMLElement,
+    initialDoc = '',
+    contentType: string = 'text/turtle',
+    theme: ThemeMode = 'dark',
+    onDirtyChange?: (dirty: boolean) => void,
+    accessibility?: { label?: string, description?: string }
+  ) {
     if (this._view) {
       this._view.destroy()
     }
 
     this._languageCompartment = new Compartment()
     this._editableCompartment = new Compartment()
+    this._readOnlyCompartment = new Compartment()
+    this._accessibilityCompartment = new Compartment()
     this._onDirtyChange = onDirtyChange
     this._isDirty = false
     const languageExtension = await this._getLanguageExtension(contentType)
@@ -43,6 +54,11 @@ export class CodeEditor {
         }),
         this._languageCompartment.of(languageExtension),
         this._editableCompartment.of(EditorView.editable.of(true)),
+        this._readOnlyCompartment.of(EditorState.readOnly.of(false)),
+        this._accessibilityCompartment.of(EditorView.contentAttributes.of({
+          ...(accessibility?.label ? { 'aria-label': accessibility.label } : {}),
+          ...(accessibility?.description ? { 'aria-description': accessibility.description } : {})
+        })),
         syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
         lineNumbers(),
         history(),
@@ -94,9 +110,23 @@ export class CodeEditor {
   setReadOnly (readOnly: boolean) {
     if (!this._view) return
     const editableCompartment = this._editableCompartment
-    if (!editableCompartment) return
+    const readOnlyCompartment = this._readOnlyCompartment
+    if (!editableCompartment || !readOnlyCompartment) return
     this._view.dispatch({
-      effects: editableCompartment.reconfigure(EditorView.editable.of(!readOnly))
+      effects: [
+        editableCompartment.reconfigure(EditorView.editable.of(!readOnly)),
+        readOnlyCompartment.reconfigure(EditorState.readOnly.of(readOnly))
+      ]
+    })
+  }
+
+  setAccessibility (accessibility: { label?: string, description?: string }) {
+    if (!this._view || !this._accessibilityCompartment) return
+    this._view.dispatch({
+      effects: this._accessibilityCompartment.reconfigure(EditorView.contentAttributes.of({
+        ...(accessibility.label ? { 'aria-label': accessibility.label } : {}),
+        ...(accessibility.description ? { 'aria-description': accessibility.description } : {})
+      }))
     })
   }
 

src/lib/code-editor/CodeEditor.ts

@@ -12,7 +12,10 @@ vi.mock('@codemirror/state', () => {
   }
 
   const EditorState = {
-    create: vi.fn((config) => ({ ...config }))
+    create: vi.fn((config) => ({ ...config })),
+    readOnly: {
+      of: vi.fn((value) => ({ type: 'readOnly', value }))
+    }
   }
 
   return { Compartment, EditorState }
@@ -47,6 +50,9 @@ vi.mock('@codemirror/view', () => {
   EditorView.editable = {
     of: vi.fn((value) => ({ type: 'editable', value }))
   }
+  EditorView.contentAttributes = {
+    of: vi.fn((value) => ({ type: 'contentAttributes', value }))
+  }
   EditorView.theme = vi.fn((spec, options) => ({ type: 'theme', spec, options }))
   EditorView.lineWrapping = { type: 'lineWrapping' }
   EditorView.updateListener = {
@@ -162,7 +168,10 @@ describe('CodeEditor', () => {
 
     editor.setReadOnly(true)
     expect(view.dispatch).toHaveBeenLastCalledWith({
-      effects: { type: 'reconfigure', value: { type: 'editable', value: false } }
+      effects: [
+        { type: 'reconfigure', value: { type: 'editable', value: false } },
+        { type: 'reconfigure', value: { type: 'readOnly', value: true } }
+      ]
     })
 
     editor.focusEditor()
@@ -201,4 +210,59 @@ describe('CodeEditor', () => {
     )
     expect(keymapExtension.value[0]).toMatchObject({ key: 'Tab' })
   })
+
+  it('exposes an accessible name and description on the editing surface', async () => {
+    const editor = new CodeEditor()
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    await editor.initialize(
+      container,
+      'generated content',
+      'text/n3',
+      'dark',
+      undefined,
+      {
+        label: 'Generated N3 for https://pod.example/card',
+        description: 'Generated N3 serialization. This content is read-only.'
+      }
+    )
+
+    const attributes = createdViews[0].state.extensions.find(
+      extension => extension.type === 'compartment-of' &&
+        extension.value.type === 'contentAttributes'
+    ).value
+    expect(attributes.value).toEqual({
+      'aria-label': 'Generated N3 for https://pod.example/card',
+      'aria-description': 'Generated N3 serialization. This content is read-only.'
+    })
+  })
+
+  it('updates the accessible description when editor mode changes', async () => {
+      const editor = new CodeEditor()
+      const container = document.createElement('div')
+      document.body.appendChild(container)
+
+      await editor.initialize(container, 'content', 'text/plain', 'dark', undefined, {
+        label: 'Source editor for https://pod.example/file.txt',
+        description: 'Read-only source content.'
+      })
+      editor.setAccessibility({
+        label: 'Source editor for https://pod.example/file.txt',
+        description: 'Editable source content.'
+      })
+
+      expect(createdViews[0].dispatch).toHaveBeenLastCalledWith({
+        effects: {
+          type: 'reconfigure',
+          value: {
+            type: 'contentAttributes',
+            value: {
+              'aria-label': 'Source editor for https://pod.example/file.txt',
+              'aria-description': 'Editable source content.'
+            }
+          }
+        }
+    })
+  })
 })