🗣️ Screen reader support for reactive output changes

fonsp · Dec 18, 2023 · b2504a8 · b2504a8
1 parent f6e8407
commit b2504a8
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/frontend/components/CellOutput.js b/frontend/components/CellOutput.js
@@ -84,8 +84,12 @@ export class CellOutput extends Component {
                 })}
                 translate=${allow_translate}
                 mime=${this.props.mime}
+                aria-live="polite"
+                aria-atomic="true"
+                aria-relevant="all"
+                aria-label=${this.props.rootassignee == null ? "result of unlabeled cell:" : `result of variable ${this.props.rootassignee}:`}
             >
-                <assignee translate=${false}>${prettyAssignee(this.props.rootassignee)}</assignee>
+                <assignee aria-hidden="true" translate=${false}>${prettyAssignee(this.props.rootassignee)}</assignee>
                 <${OutputBody} ...${this.props} />
             </pluto-output>
         `