accessible_text_span 2.0.0 copy "accessible_text_span: ^2.0.0" to clipboard
accessible_text_span: ^2.0.0 copied to clipboard

A RichText variation that support keyboard navigation and focus for accessibility

codecov pub package

Features #

First import the widget

import 'package:accessible_text_span/accessible_text_span.dart';
copied to clipboard

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, spanStyle) {
    return (spanStyle ?? DefaultTextStyle.of(context).style).copyWith(
          decoration: TextDecoration.underline,
          backgroundColor: Colors.grey,
          color: Colors.purple,
        );
  },
),
copied to clipboard

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.

2
likes
150
points
224
downloads

Publisher

verified publishersilentcat.dev

Weekly Downloads

2024.08.07 - 2025.02.19

A RichText variation that support keyboard navigation and focus for accessibility

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on accessible_text_span