rdfxml and n3 accessibility

package.json

@@ -74,7 +74,7 @@
     "rdflib": "2.4.1",
     "solid-logic": "6.0.1-6",
     "solid-namespace": "^0.5.4",
-    "solid-ui": "5.0.2-8",
+    "solid-ui": "5.0.2-9",
     "source-pane": "4.0.1-0"
   },
   "overrides": {

src/RDFXMLPane.ts

@@ -67,9 +67,14 @@ export const RDFXMLPane: RDFXMLPaneDefinition = {
     const source = myDocument.createElement('solid-panes-editor-card') as HTMLElement & {
       contentType?: string
       content?: string
+      accessibilityLabel?: string
+      accessibilityDescription?: string
     }
     source.contentType = 'application/rdf+xml'
     source.content = serializedContent
+    source.accessibilityLabel = `Generated RDF/XML for ${subject.uri}`
+    source.accessibilityDescription =
+      'Generated RDF/XML serialization. This content is read-only.'
 
     div.appendChild(source)
     return div

src/components/editor-card/EditorCard.ts

@@ -19,6 +19,12 @@ export default class EditorCard extends WebComponent {
   @property()
   accessor content: string | undefined
 
+  @property()
+  accessor accessibilityLabel: string | undefined
+
+  @property()
+  accessor accessibilityDescription: string | undefined
+
   getEditor () {
     return this._editor
   }
@@ -41,7 +47,17 @@ export default class EditorCard extends WebComponent {
       const { CodeEditor } = await import('solid-ui')
       this._editor = new CodeEditor()
       try {
-        await this._editor.initialize(editorDiv, this.content ?? '', this.contentType ?? '', 'dark')
+        await this._editor.initialize(
+          editorDiv,
+          this.content ?? '',
+          this.contentType ?? '',
+          'dark',
+          undefined,
+          {
+            label: this.accessibilityLabel,
+            description: this.accessibilityDescription
+          }
+        )
       } catch (err) {
         throw new Error(`Error initializing code editor: ${err instanceof Error ? err.message : String(err)}`)
       }

src/n3Pane.ts

@@ -68,9 +68,14 @@ export const n3Pane: N3PaneLike = {
     const source = myDocument.createElement('solid-panes-editor-card') as HTMLElement & {
       contentType?: string
       content?: string
+      accessibilityLabel?: string
+      accessibilityDescription?: string
     }
     source.contentType = 'text/n3'
     source.content = serializedContent
+    source.accessibilityLabel = `Generated N3 for ${subject.uri}`
+    source.accessibilityDescription =
+      'Generated N3 serialization. This content is read-only.'
 
     div.appendChild(source)
     return div

test/unit/rdfSerializationPanes.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { graph, namedNode } from 'rdflib'
+import { RDFXMLPane } from '../../src/RDFXMLPane'
+import { n3Pane } from '../../src/n3Pane'
+
+function renderPane (pane: typeof RDFXMLPane | typeof n3Pane) {
+  const store = graph()
+  const subject = namedNode('https://pod.example/card')
+  store.add(subject, namedNode('https://pod.example/name'), namedNode('https://pod.example/name'))
+  const context = {
+    dom: document,
+    session: { store }
+  } as any
+
+  return pane.render(subject, context).querySelector('solid-panes-editor-card') as HTMLElement & {
+    contentType?: string
+    accessibilityLabel?: string
+    accessibilityDescription?: string
+  }
+}
+
+describe('RDF serialization panes', () => {
+  it('labels generated RDF/XML as a read-only serialization for the resource', () => {
+    const source = renderPane(RDFXMLPane)
+
+    expect(source.contentType).toBe('application/rdf+xml')
+    expect(source.accessibilityLabel).toBe('Generated RDF/XML for https://pod.example/card')
+    expect(source.accessibilityDescription)
+      .toBe('Generated RDF/XML serialization. This content is read-only.')
+  })
+
+  it('labels generated N3 as a read-only serialization for the resource', () => {
+    const source = renderPane(n3Pane)
+
+    expect(source.contentType).toBe('text/n3')
+    expect(source.accessibilityLabel).toBe('Generated N3 for https://pod.example/card')
+    expect(source.accessibilityDescription)
+      .toBe('Generated N3 serialization. This content is read-only.')
+  })
+})