feat: use view descriptions for accessibility

src/compile/model.ts

@@ -307,22 +307,29 @@ export abstract class Model {
     // Exclude "style"
     const {style: _, ...baseView} = view;
 
-    const e = {};
+    const e: VgEncodeEntry = {};
     for (const property of keys(baseView)) {
       const value = baseView[property];
       if (value !== undefined) {
         e[property] = signalOrValueRef(value);
       }
     }
+
     return e;
   }
 
   public assembleGroupEncodeEntry(isTopLevel: boolean): VgEncodeEntry {
-    let encodeEntry: VgEncodeEntry = undefined;
+    let encodeEntry: VgEncodeEntry = {};
     if (this.view) {
       encodeEntry = this.assembleEncodeFromView(this.view);
     }
+
     if (!isTopLevel) {
+      // Descriptions are already added to the top-level description so we only need to add them to the inner views.
+      if (this.description) {
+        encodeEntry['description'] = signalOrValueRef(this.description);
+      }
+
       // For top-level spec, we can set the global width and height signal to adjust the group size.
       // For other child specs, we have to manually set width and height in the encode entry.
       if (this.type === 'unit' || this.type === 'layer') {

test/compile/model.test.ts

@@ -99,5 +99,17 @@ describe('Model', () => {
         fill: {signal: '"red"'}
       });
     });
+
+    it('should support descriptions for non-top level models', () => {
+      const model = parseModel({
+        data: {values: []},
+        mark: 'point',
+        description: 'My awesome view'
+      });
+
+      expect(model.assembleGroupEncodeEntry(true)).toEqual({});
+
+      expect(model.assembleGroupEncodeEntry(false)['description']).toEqual({value: 'My awesome view'});
+    });
   });
 });