diff --git a/package-lock.json b/package-lock.json index 47f2a9e2..85217a34 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,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" }, "devDependencies": { @@ -8309,9 +8309,9 @@ } }, "node_modules/marked": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/marked/-/marked-18.1.3.tgz", - "integrity": "sha512-9ChMH8EVVgjgID49nsL6IWxWk5c6GtAsq/xw7U1ggkjkU5AGuv68oLTVlFRtvcUYZtpbNyjyvGo3YDu0fGapiw==", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-18.2.0.tgz", + "integrity": "sha512-KaeL+tAbtvI930q7HE2PN5lYXYdT8EiSmxHlN6F3rsfb57wd5mp5W5TLazpdj4inTQBJdgjYwbs40W/0VUGU+Q==", "license": "MIT", "bin": { "marked": "bin/marked.js" @@ -10098,9 +10098,9 @@ "license": "MIT" }, "node_modules/solid-ui": { - "version": "5.0.2-8", - "resolved": "https://registry.npmjs.org/solid-ui/-/solid-ui-5.0.2-8.tgz", - "integrity": "sha512-xMWmA4gLYSZ+drhk5DrnKdPn4QlDX8vB534YsaaktPJrJaT6/KhhLynO3peS341F+9I5P+Q2C2CiOGbfSgQqoA==", + "version": "5.0.2-9", + "resolved": "https://registry.npmjs.org/solid-ui/-/solid-ui-5.0.2-9.tgz", + "integrity": "sha512-jWeZQHNIMXtEivwYAL+ixg1KjwoN4rGjFQLGbfteXMfSPeudrqibuybwd/q9PvfAr5Q52w2xWAGaYim6z7pIEw==", "license": "MIT", "dependencies": { "@awesome.me/webawesome": "^3.9.0", diff --git a/package.json b/package.json index d241390a..924c3c44 100644 --- a/package.json +++ b/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": { diff --git a/src/RDFXMLPane.ts b/src/RDFXMLPane.ts index 0617deeb..e45dcb36 100644 --- a/src/RDFXMLPane.ts +++ b/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 diff --git a/src/components/editor-card/EditorCard.ts b/src/components/editor-card/EditorCard.ts index d3dd4300..66b66c85 100644 --- a/src/components/editor-card/EditorCard.ts +++ b/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)}`) } diff --git a/src/n3Pane.ts b/src/n3Pane.ts index db76751b..258fd5cb 100644 --- a/src/n3Pane.ts +++ b/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 diff --git a/test/unit/rdfSerializationPanes.test.ts b/test/unit/rdfSerializationPanes.test.ts new file mode 100644 index 00000000..fa42475b --- /dev/null +++ b/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.') + }) +})