@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/vue/editor/LoomaEditor.d.ts

@@ -61,6 +61,11 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
+    /** Accessible name of the editing surface, which is a text box to assistive technology. */
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     extensions: {
         type: PropType<AnyExtension[]>;
         default: () => never[];
@@ -122,6 +127,11 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
         type: StringConstructor;
         default: string;
     };
+    /** Accessible name of the editing surface, which is a text box to assistive technology. */
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
     extensions: {
         type: PropType<AnyExtension[]>;
         default: () => never[];
@@ -158,6 +168,7 @@ export declare const LoomaEditor: import("vue").DefineComponent<import("vue").Ex
     onImageActivate?: ((_detail: LoomaImageActivationDetail) => any) | undefined;
     onImageRenditionError?: ((_detail: LoomaImageRenditionErrorDetail) => any) | undefined;
 }>, {
+    label: string;
     placeholder: string;
     modelValue: JSONContent;
     editable: boolean;

package/vue/editor/index.js

@@ -268,6 +268,11 @@ var LoomaEditor = defineComponent({
 			type: String,
 			default: "Type “/” for commands, or start writing…"
 		},
+		/** Accessible name of the editing surface, which is a text box to assistive technology. */
+		label: {
+			type: String,
+			default: "Document"
+		},
 		extensions: {
 			type: Array,
 			default: () => []
@@ -403,6 +408,11 @@ var LoomaEditor = defineComponent({
 			],
 			content: props.modelValue,
 			editable: props.editable,
+			editorProps: { attributes: {
+				role: "textbox",
+				"aria-multiline": "true",
+				"aria-label": props.label
+			} },
 			onCreate: ({ editor: instance }) => emit("ready", instance),
 			onFocus: ({ editor: instance }) => rememberSelection(instance),
 			onSelectionUpdate: ({ editor: instance }) => rememberSelection(instance),
@@ -416,6 +426,13 @@ var LoomaEditor = defineComponent({
 			}
 		});
 		watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
+		watch(() => props.label, (label) => {
+			editor.value?.setOptions({ editorProps: { attributes: {
+				role: "textbox",
+				"aria-multiline": "true",
+				"aria-label": label
+			} } });
+		});
 		watch(() => props.resolveImageAttributes, () => {
 			const instance = editor.value;
 			if (instance) imageDelivery.reset(instance);