accessible_text_span 2.0.0
accessible_text_span: ^2.0.0 copied to clipboard
A RichText variation that support keyboard navigation and focus for accessibility

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, spanStyle) {
return (spanStyle ?? 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.