Skip to content

ReadingBlock

Overview

A trait that extends Voicing, adding support for "Reading Blocks" of the voicing feature. "Reading Blocks" are UI components in the application that have unique functionality with respect to Voicing.

  • Reading Blocks are generally around graphical objects that are not otherwise interactive (like Text).
  • They have a unique focus highlight to indicate they can be clicked on to hear voiced content.
  • When activated with press or click readingBlockNameResponse is spoken.
  • ReadingBlock content is always spoken if the voicingManager is enabled, ignoring Properties of responseCollector.
  • While speaking, a yellow highlight will appear over the Node composed with ReadingBlock.
  • While voicing is enabled, reading blocks will be added to the focus order.

This trait is to be composed with Nodes and assumes that the Node is composed with ParallelDOM. It uses Node to support mouse/touch input and ParallelDOM to support being added to the focus order and alternative input.

@author Jesse Greenberg (PhET Interactive Simulations)

Type ReadingBlockNode

Export a type that lets you check if your Node is composed with ReadingBlock

import type { ReadingBlockNode } from 'scenerystack/scenery';

Node & TReadingBlock

Type ReadingBlockOptions

import type { ReadingBlockOptions } from 'scenerystack/scenery';
  • readingBlockTagName?: string | null
  • readingBlockDisabledTagName?: string | null
  • readingBlockNameResponse?: VoicingResponse
  • readingBlockHintResponse?: VoicingResponse
  • readingBlockResponsePatternCollection?: ResponsePatternCollection
  • readingBlockActiveHighlight?: null | Shape | Node
  • & StrictOmit<VoicingOptions, UnsupportedVoicingOptions>

Type TReadingBlock

import type { TReadingBlock } from 'scenerystack/scenery';
  • readingBlockActiveHighlightChangedEmitter: TEmitter
  • readingBlockTagName: string | null
  • readingBlockDisabledTagName: string | null
  • readingBlockResponsePatternCollection: ResponsePatternCollection
  • readingBlockActiveHighlight: Highlight
  • & TVoicing<SuperType>

Source Code

See the source for ReadingBlock.ts in the scenery repository.