How I'm currently tackling tts (text to speech) right now

[jessebot]

I know that support for screen readers is on the roadmap, but I'm trying to keep accessibility in mind with all code I write, so I wanted to accommodate text to speech before releasing my app in a week or two. Here's some of the methods I've included in my app in order to use text to speech when the user focuses a new element, or when they press the f5 key. (I also include an option to read screen titles as well) It's not perfect, but I'm doing my best:

click me for python code for an app with text to speech features

from os import system
from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.events import DescendantFocus
from textual.widgets import Footer, Button, DataTable, Input, Static, Label, Switch, Select

class BaseApp(App):

    # in particular, I am not sure that f5 is the best key for speak, but it is the default diction key on a mac keyboard
    BINDINGS = [
                Binding(key="c",
                        key_display="c",
                        action="request_config",
                        description="Config"),
                Binding(key="f",
                        key_display="f",
                        action="toggle_footer",
                        description="Toggle footer"),
                Binding(key="f5",
                        key_display="f5",
                        description="Speak",
                        action="app.say",
                        show=True)
                ]

    def __init__(self, user_config: dict = INITIAL_USR_CONFIG) -> None:
        self.cfg = user_config
        self.show_footer = self.cfg['smol_k8s_lab']['tui']['show_footer']

        # configure global accessibility
        accessibility_opts = self.cfg['smol_k8s_lab']['tui']['accessibility']
        
        # text to speech options
        tts = accessibility_opts['text_to_speech']
        self.speak_on_focus = tts['on_focus']
        self.speak_screen_titles = tts['screen_titles']
        self.speak_on_key_press = tts['on_key_press']
        self.speech_program = tts['speech_program']
        
        # this bell allows you to just ring a bell instead of reading the whole element
        self.bell_on_focus = accessibility_opts['bell']['on_focus']
        self.bell_on_error = accessibility_opts['bell']['on_error']
        super().__init__()
        
    def compose(self) -> ComposeResult:
        """
        Compose app with screens
        """
        # Footer to show keys
        footer = Footer()

        if not self.show_footer:
            footer.display = False
        yield footer
        
    def on_mount(self) -> None:
        """
        read screen title if enabled
        """
        if self.speak_screen_titles:
            self.action_say("Welcome to smol-k8s-lab. Press C to configure "
                                      "accessibility options.")
                            
    def action_say(self, text_for_speech: str = "") -> None:
        """ 
        Use the configured speech program to read a string aloud. If no string
        is passed in, and self.speak_on_key_press is True, we read the currently
        focused element id
        """
        if text_for_speech:
            # we remove parentheses and some rich styling before speaking so that os.system doesn't complain
            text_for_speech = text_for_speech.replace("(", "").replace(")", "")
            text_for_speech = text_for_speech.replace("[i]", "").replace("[/]", "")
            system(f"{self.speech_program} {text_for_speech}")

        elif not text_for_speech:
            if self.speak_on_key_press:
                system(f"{self.speech_program} element is {self.app.focused.id}")

    @on(DescendantFocus)
    def on_focus(self, event: DescendantFocus) -> None:
        """ 
        on focus of each descendent of this app, if text to speech is enabled,
        say the id of each element and the value or label if possible as well as the tooltip
        """
        if self.speak_on_focus:
            id = event.widget.id
            self.action_say(f"element is {id}")

            # input fields
            if isinstance(event.widget, Input):
                content = event.widget.value
                placeholder = event.widget.placeholder
                if content:
                    self.action_say(f"value is {content}")
                elif placeholder:
                    self.action_say(f"place holder text is {placeholder}")

            # buttons
            elif isinstance(event.widget, Button):
                self.action_say(f"button text is {event.widget.label}")

            # switches
            elif isinstance(event.widget, Switch) or isinstance(event.widget, Select):
                self.action_say(f"value is {event.widget.value}")

            # also read the tooltip if there is one
            tooltip = event.widget.tooltip
            if tooltip:
                self.action_say(f"tooltip is {tooltip}")

        if self.bell_on_focus:
            self.app.action_bell()

    def action_request_config(self) -> None:
        """ 
        if the user pressed 'c', show the TUI config screen, which include accessibility options
        """
        self.push_screen(TuiConfigScreen(self.cfg['smol_k8s_lab']['tui']))       

In the code above, INITIAL_USR_CONFIG is a dictionary from a config file that looks like this:

---
smol_k8s_lab:
  # this is useful for learning smol-k8s-lab or verifying your configuration
  tui:
    # if this is set to true, we'll always launch smol-k8s-lab in interactive mode :)
    # else you need to pass in --interactive or -i to use the interactive Terminal UI
    enabled: true
    # show bottom footer help bar
    show_footer: true
    # accessibility options
    accessibility:
      bell:
        # ring the bell on each new focused item
        on_focus: true
        # weather or not to ring the built in terminal bell when something is wrong
        on_error: true
      text_to_speech: 
        # use a specific program for text to speech - this needs to be a full path, macOS default: say
        speech_program: say
        # read the screen title and description
        screen_titles: true
        # read the element aloud each time you switch focus to a new element
        on_focus: false
        # press shift+s to read the element id and value/tooltip
        on_key_press: true

If you are curious, this is what the accesibility screen looks like, though I am still working on it:

click me for the accessibility screen python code example

#!/usr/bin/env python3.11
from smol_k8s_lab.tui.util import bool_option, input_field
from textual import on
from textual.app import ComposeResult
from textual.binding import Binding
from textual.containers import Grid
from textual.screen import Screen
from textual.widgets import Footer, Header, Input, Label, Switch
from textual.widget import Widget

class TuiConfigScreen(Screen):
    """
    Textual app to configure smol-k8s-lab itself
    """
    CSS_PATH = ["./css/tui_config.tcss"]

    BINDINGS = [Binding(key="b,q,escape",
                        key_display="b",
                        action="app.pop_screen",
                        description="Back"),
                Binding(key="n",
                        show=False,
                        action="app.bell")]

    def __init__(self, config: dict) -> None:
        self.cfg = config
        super().__init__()

    def compose(self) -> ComposeResult:
        """
        Compose app with tabbed content.
        """
        # header to be cute
        yield Header()

        # Footer to show help keys, if enabled
        footer = Footer()
        footer.display = False
        yield footer

        with Grid(id="general-config-screen"):
            # tui config for hide_footer, enabled, and k9s
            yield TuiConfig(self.cfg)

            # accessibility options config
            yield AccessibilityWidget(self.cfg['accessibility'])

    def on_mount(self) -> None:
        """
        screen and box border styling and read the screen title aloud
        """
        self.title = "ʕ ᵔᴥᵔʔ smol k8s lab"
        sub_title = (
                "Screen title: Configure Terminal UI and Accessibility features"
                )
        self.sub_title = sub_title

        # turn on the footer if it's enabled in the root app cfg
        if self.app.cfg['smol_k8s_lab']['tui']['show_footer']:
            self.query_one(Footer).display = True

        if self.app.speak_screen_titles:
            self.app.action_say(
                    self.sub_title + ". There are 2 boxes on the screen. Box 1: "
                    "Configure Terminal UI. Box 2: Configure Accessibility. Focus"
                    " starts on Box 1."
                    )

class TuiConfig(Widget):
    def __init__(self, config: dict) -> None:
        self.cfg = config
        super().__init__()

    def compose(self) -> ComposeResult:
        """
        Compose widget for configuring the tui experience
        """

        with Grid(id="tui-config"):
            yield Label("These parameters are all related to the TUI itself.",
                        classes="soft-text")
            with Grid(classes="triple-switch-row"):
                yield bool_option(
                        label="enabled:",
                        name="enabled",
                        switch_value=self.cfg['enabled'],
                        tooltip=("Enable tui mode by default. Otherwise, you"
                                      " need to pass in the interactive flag on the "
                                      "command line each time"))

                yield bool_option(
                        label="footer:",
                        name="show_footer",
                        switch_value=self.cfg['show_footer'],
                        tooltip="show the footer at the bottom of the screen"
                        )

                yield bool_option(
                        label="k9s:",
                        name="k9s-enabled",
                        switch_value=self.cfg['k9s']['enabled'],
                        tooltip="launch k9s, a k8s TUI dashboard when cluster is up"
                        )

            with Grid(classes="k9s-input-row"):
                yield input_field(
                        label="k9s command:",
                        name="k9s-command",
                        initial_value=self.cfg['k9s']['command'],
                        placeholder="command to run when k9s starts",
                        tooltip="if k9s is enabled, run this command when it starts"
                        )

    def on_mount(self) -> None:
        """
        box border styling
        """
        tui_title = "🖥️ [i]Configure[/] [#C1FF87]Terminal UI"
        self.get_widget_by_id("tui-config").border_title = tui_title

    @on(Switch.Changed)
    def update_parent_config_for_switch(self, event: Switch.Changed) -> None:
        """
        update the parent app's config file yaml obj
        """
        truthy_value = event.value
        switch_name = event.switch.name

        parent_cfg = self.app.cfg['smol_k8s_lab']['tui']

        if "k9s" in switch_name:
            name = switch_name.replace("k9s-","")
            self.cfg['k9s'][name] = truthy_value
            parent_cfg['k9s'][name] = truthy_value
        else:
            self.cfg[switch_name] = truthy_value
            parent_cfg[switch_name] = truthy_value

        self.app.write_yaml()

    @on(Input.Changed)
    def update_parent_config_for_input(self, event: Input.Changed) -> None:
        input = event.input
        input_name = event.input.name

        if "k9s" in input_name:
            name = input_name.replace("k9s-","")
            self.cfg['k9s'][name] = input.value
            self.app.cfg['smol_k8s_lab']['tui']['k9s'][name] = input.value
        else:
            self.app.cfg['smol_k8s_lab']['tui'][input.name] = input.value

        self.app.write_yaml()


class AccessibilityWidget(Widget):
    def __init__(self, config: dict) -> None:
        """
        Accessibility widget to allow for configuring the bell and text to speech
        """
        self.cfg = config
        super().__init__()

    def compose(self) -> ComposeResult:
        """
        Compose widget for configuring the tui experience
        """
        with Grid(id="accessibility-config"):

            yield Label("These parameters are all related to accessibility, "
                        "both in the TUI and CLI.",
                        classes="help-text")

            with Grid(id="bell-row"):

                yield bool_option(
                        label="bell on focus:",
                        name="bell-focus",
                        switch_value=self.cfg['bell']['on_focus'],
                        tooltip=(
                            "Ring the terminal bell each time your focus "
                            "changes to another element on the screen.")
                        )

                yield bool_option(
                        label="bell on error:",
                        name="bell-behavior",
                        switch_value=self.cfg['bell']['on_error'],
                        tooltip=(
                            "Ring the terminal bell anytime there's a warning "
                            "or error"
                            )
                )

            with Grid(id="tts-row"):
                yield bool_option(
                        label="text to speech screen titles:",
                        name="text-to-speech-screen-titles",
                        switch_value=self.cfg['text_to_speech']['screen_titles'],
                        tooltip=(
                            "Read each screen title and description aloud."
                            )
                        )

                yield bool_option(
                        label="text to speech on key press:",
                        name="text-to-speech-on-key-press",
                        switch_value=self.cfg['text_to_speech']['on_focus'],
                        tooltip=(
                            "Only read the element if the f5 key is pressed. "
                            "This key will be configurable in the future."
                            )
                        )

                yield bool_option(
                        label="text to speech on focus:",
                        name="text-to-speech-on-focus",
                        switch_value=self.cfg['text_to_speech']['on_focus'],
                        tooltip=(
                            "On each focus of a new element on the screen, "
                            "read the element id, and value/tooltip if available. \n"
                            )
                        )

            yield input_field(
                    label="speech program:",
                    name="speech-program",
                    initial_value=self.cfg['text_to_speech']['speech_program'],
                    placeholder="name of program for speech",
                    tooltip=(
                        "If text to speech is enabled, this is the name of"
                        " the command line interface speech program. On "
                        "macOS, we default to 'say'. On Linux we default to espeak"
                        )
                    )

    def on_mount(self) -> None:
        """
        box border styling
        """
        title = "♿️ [i]Configure[/] [#C1FF87]Accessibility"
        self.get_widget_by_id("accessibility-config").border_title = title

Here is a short demo of the text to speech feature (Sorry for not having subtitles. I don't know how to generate them yet):

Screen.Recording.2023-10-18.at.09.23.12.mov

I am overall still working on this, and I'm still not sure how to accommodate reading Label() gracefully, but I thought it might be helpful to others working on the same feature, as I couldn't find any other examples in the current discussions.

Thanks for your time!