accessible_text_span 1.0.2

accessible_text_span: ^1.0.2 copied to clipboard

Features #

First import the widget

import 'package:accessible_text_span/accessible_text_span.dart';

When implementing accessibility, enabling keyboard navigation for interactive elements is crucial.

However, due to a current limitation (Flutter issue #138692), navigating and interacting with a TextSpan is not yet supported.

This package is designed to address this limitation by providing a solution to make TextSpan accessible for both TalkBack and keyboard navigation when the user pressing TAB or ENTER

Usage #

AccessibleRichText(
  TextSpan(
    children: [
      TextSpan(
        text: "link 1",
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // on link tap or activated by keyboard
          },
      ),
      const TextSpan(
        text: "and ",
      ),
      TextSpan(
        text: "link 2",
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            // on link tap or activated by keyboard
          },
      ),
    ],
  ),
  focusedStyle: (context) {
    return DefaultTextStyle.of(context).style.copyWith(
          decoration: TextDecoration.underline,
          backgroundColor: Colors.grey,
          color: Colors.purple,
        );
  },
),

Replace the Text.rich or RichText widget in your app with the AccessibleRichText widget.

To make a specific TextSpan focusable, it must include a TextSpan.recognizer of type TapGestureRecognizer.

The visual representation of a focused TextSpan can be customized using the AccessibleRichText.focusedStyle property.

For manual manipulation and management of FocusNode, you can create and provide your own instance of FocusableTextSpanBuilder.

Pressing TAB will navigating through created focusable TextSpan while ENTER will activate the associated TapGestureRecognizer.onTap function.