Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility fixes #179

Merged
merged 11 commits into from
Aug 12, 2022
Merged

Accessibility fixes #179

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
cdce140
page.on_keyboard_event handler
FeodorFitsner Aug 11, 2022
71a94b0
Fix control tooltips
FeodorFitsner Aug 11, 2022
27fa14b
page.show_semantics_debugger
FeodorFitsner Aug 11, 2022
a6209dd
PopupMenuButton.content added
FeodorFitsner Aug 11, 2022
fc345c1
Disabled container should not be clickable/hoverable
FeodorFitsner Aug 11, 2022
1058f84
Text.semantics_label
FeodorFitsner Aug 11, 2022
c25569c
Merge semantics for checkbox, radio and switch
FeodorFitsner Aug 11, 2022
bdd54bf
Semantics control
FeodorFitsner Aug 11, 2022
20f1c72
Fix Text.semanticsLabel
FeodorFitsner Aug 11, 2022
ff9da13
Close #178 Allow FloatingActionButton with content only
FeodorFitsner Aug 11, 2022
4daa8e3
StatefulWidget cleanup and dispose fixes
FeodorFitsner Aug 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 0 additions & 10 deletions client/lib/controls/alert_dialog.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,16 +32,6 @@ class AlertDialogControl extends StatefulWidget {
class _AlertDialogControlState extends State<AlertDialogControl> {
bool _open = false;

@override
void initState() {
super.initState();
}

@override
void dispose() {
super.dispose();
}

Widget _createAlertDialog() {
bool disabled = widget.control.isDisabled || widget.parentDisabled;
var titleCtrls =
Expand Down
10 changes: 0 additions & 10 deletions client/lib/controls/banner.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,6 @@ class BannerControl extends StatefulWidget {
class _BannerControlState extends State<BannerControl> {
bool _open = false;

@override
void initState() {
super.initState();
}

@override
void dispose() {
super.dispose();
}

Widget _createBanner() {
bool disabled = widget.control.isDisabled || widget.parentDisabled;
var leadingCtrls =
Expand Down
54 changes: 30 additions & 24 deletions client/lib/controls/checkbox.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,21 +28,26 @@ class CheckboxControl extends StatefulWidget {

class _CheckboxControlState extends State<CheckboxControl> {
bool? _value;
final FocusNode _focusNode = FocusNode();
late final FocusNode _focusNode;

@override
void initState() {
super.initState();
_focusNode.addListener(() {
ws.pageEventFromWeb(
eventTarget: widget.control.id,
eventName: _focusNode.hasFocus ? "focus" : "blur",
eventData: "");
});
_focusNode = FocusNode();
_focusNode.addListener(_onFocusChange);
}

void _onFocusChange() {
ws.pageEventFromWeb(
eventTarget: widget.control.id,
eventName: _focusNode.hasFocus ? "focus" : "blur",
eventData: "");
}

@override
void dispose() {
_focusNode.removeListener(_onFocusChange);
_focusNode.dispose();
super.dispose();
}

Expand Down Expand Up @@ -108,23 +113,24 @@ class _CheckboxControlState extends State<CheckboxControl> {
style: TextStyle(color: Theme.of(context).disabledColor))
: MouseRegion(
cursor: SystemMouseCursors.click, child: Text(label));
result = GestureDetector(
onTap: !disabled
? () {
bool? newValue;
if (!tristate) {
newValue = !_value!;
} else if (tristate && _value == null) {
newValue = false;
} else if (tristate && _value == false) {
newValue = true;
}
onChange(newValue);
}
: null,
child: labelPosition == LabelPosition.right
? Row(children: [checkbox, labelWidget])
: Row(children: [labelWidget, checkbox]));
result = MergeSemantics(
child: GestureDetector(
onTap: !disabled
? () {
bool? newValue;
if (!tristate) {
newValue = !_value!;
} else if (tristate && _value == null) {
newValue = false;
} else if (tristate && _value == false) {
newValue = true;
}
onChange(newValue);
}
: null,
child: labelPosition == LabelPosition.right
? Row(children: [checkbox, labelWidget])
: Row(children: [labelWidget, checkbox])));
}

return constrainedControl(result, widget.parent, widget.control);
Expand Down
18 changes: 9 additions & 9 deletions client/lib/controls/container.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,10 @@ class ContainerControl extends StatelessWidget {
border: parseBorder(Theme.of(context), control, "border"),
borderRadius: parseBorderRadius(control, "borderRadius"));

if ((onClick || onLongPress || onHover) && ink) {
if ((onClick || onLongPress || onHover) && ink && !disabled) {
var ink = Ink(
child: InkWell(
onTap: !disabled && (onClick || onHover)
onTap: onClick || onHover
? () {
debugPrint("Container ${control.id} clicked!");
ws.pageEventFromWeb(
Expand All @@ -113,7 +113,7 @@ class ContainerControl extends StatelessWidget {
eventData: control.attrs["data"] ?? "");
}
: null,
onLongPress: !disabled && (onLongPress || onHover)
onLongPress: onLongPress || onHover
? () {
debugPrint("Container ${control.id} long pressed!");
ws.pageEventFromWeb(
Expand All @@ -122,7 +122,7 @@ class ContainerControl extends StatelessWidget {
eventData: control.attrs["data"] ?? "");
}
: null,
onHover: !disabled && onHover
onHover: onHover
? (value) {
debugPrint("Container ${control.id} hovered!");
ws.pageEventFromWeb(
Expand Down Expand Up @@ -172,10 +172,10 @@ class ContainerControl extends StatelessWidget {
decoration: boxDecor,
child: child);

if (onClick || onLongPress || onHover) {
if ((onClick || onLongPress || onHover) && !disabled) {
container = MouseRegion(
cursor: SystemMouseCursors.click,
onEnter: !disabled && onHover
onEnter: onHover
? (value) {
debugPrint(
"Container's mouse region ${control.id} entered!");
Expand All @@ -185,7 +185,7 @@ class ContainerControl extends StatelessWidget {
eventData: "true");
}
: null,
onExit: !disabled && onHover
onExit: onHover
? (value) {
debugPrint(
"Container's mouse region ${control.id} exited!");
Expand All @@ -197,7 +197,7 @@ class ContainerControl extends StatelessWidget {
: null,
child: GestureDetector(
child: container,
onTapDown: !disabled && onClick
onTapDown: onClick
? (details) {
debugPrint("Container ${control.id} clicked!");
ws.pageEventFromWeb(
Expand All @@ -207,7 +207,7 @@ class ContainerControl extends StatelessWidget {
"${details.localPosition.dx}:${details.localPosition.dy} ${details.globalPosition.dx}:${details.globalPosition.dy}");
}
: null,
onLongPress: !disabled && onLongPress
onLongPress: onLongPress
? () {
debugPrint("Container ${control.id} clicked!");
ws.pageEventFromWeb(
Expand Down
14 changes: 13 additions & 1 deletion client/lib/controls/create_control.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import 'progress_ring.dart';
import 'radio.dart';
import 'radio_group.dart';
import 'row.dart';
import 'semantics.dart';
import 'shader_mask.dart';
import 'slider.dart';
import 'snack_bar.dart';
Expand Down Expand Up @@ -182,6 +183,12 @@ Widget createControl(Control? parent, String id, bool parentDisabled) {
control: controlView.control,
children: controlView.children,
parentDisabled: parentDisabled);
case ControlType.semantics:
return SemanticsControl(
parent: parent,
control: controlView.control,
children: controlView.children,
parentDisabled: parentDisabled);
case ControlType.shaderMask:
return ShaderMaskControl(
parent: parent,
Expand Down Expand Up @@ -337,7 +344,12 @@ Widget _opacity(Widget widget, Control? parent, Control control) {

Widget _tooltip(Widget widget, Control? parent, Control control) {
var tooltip = control.attrString("tooltip");
return tooltip != null
return tooltip != null &&
![
ControlType.iconButton,
ControlType.floatingActionButton,
ControlType.popupMenuButton
].contains(control.type)
? Tooltip(
message: tooltip,
padding: const EdgeInsets.all(4.0),
Expand Down
28 changes: 19 additions & 9 deletions client/lib/controls/dropdown.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,30 @@ class DropdownControl extends StatefulWidget {
class _DropdownControlState extends State<DropdownControl> {
String? _value;
bool _focused = false;
final FocusNode _focusNode = FocusNode();
late final FocusNode _focusNode;

@override
void initState() {
super.initState();
_focusNode.addListener(() {
setState(() {
_focused = _focusNode.hasFocus;
});
ws.pageEventFromWeb(
eventTarget: widget.control.id,
eventName: _focusNode.hasFocus ? "focus" : "blur",
eventData: "");
_focusNode = FocusNode();
_focusNode.addListener(_onFocusChange);
}

void _onFocusChange() {
setState(() {
_focused = _focusNode.hasFocus;
});
ws.pageEventFromWeb(
eventTarget: widget.control.id,
eventName: _focusNode.hasFocus ? "focus" : "blur",
eventData: "");
}

@override
void dispose() {
_focusNode.removeListener(_onFocusChange);
_focusNode.dispose();
super.dispose();
}

@override
Expand Down
30 changes: 18 additions & 12 deletions client/lib/controls/floating_action_button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ class FloatingActionButtonControl extends StatelessWidget {
Color? bgColor = HexColor.fromString(
Theme.of(context), control.attrString("bgColor", "")!);
var contentCtrls = children.where((c) => c.name == "content");
var tooltip = control.attrString("tooltip");
bool autofocus = control.attrBool("autofocus", false)!;
bool disabled = control.isDisabled || parentDisabled;

Expand All @@ -43,37 +44,42 @@ class FloatingActionButtonControl extends StatelessWidget {
eventData: control.attrs["data"] ?? "");
};

if (text == null && icon == null) {
return const ErrorControl("FAB doesn't have a text, nor icon.");
if (text == null && icon == null && contentCtrls.isEmpty) {
return const ErrorControl(
"FAB doesn't have a text, nor icon, nor content.");
}

Widget button;
if (contentCtrls.isNotEmpty) {
button = FloatingActionButton(
autofocus: autofocus,
onPressed: onPressed,
tooltip: tooltip,
child: createControl(control, contentCtrls.first.id, disabled));
} else if (icon != null && text == null) {
button = FloatingActionButton(
autofocus: autofocus,
onPressed: onPressed,
child: Icon(icon),
backgroundColor: bgColor,
);
autofocus: autofocus,
onPressed: onPressed,
child: Icon(icon),
backgroundColor: bgColor,
tooltip: tooltip);
} else if (icon == null && text != null) {
button = FloatingActionButton(
autofocus: autofocus,
onPressed: onPressed,
child: Text(text),
backgroundColor: bgColor,
tooltip: tooltip,
);
} else if (icon != null && text != null) {
button = FloatingActionButton.extended(
autofocus: autofocus,
onPressed: onPressed,
label: Text(text),
icon: Icon(icon),
backgroundColor: bgColor);
autofocus: autofocus,
onPressed: onPressed,
label: Text(text),
icon: Icon(icon),
backgroundColor: bgColor,
tooltip: tooltip,
);
} else {
return const ErrorControl("FAB doesn't have a text, nor icon.");
}
Expand Down
3 changes: 3 additions & 0 deletions client/lib/controls/icon_button.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ class IconButtonControl extends StatelessWidget {
Color? bgColor = HexColor.fromString(
Theme.of(context), control.attrString("bgColor", "")!);
double? iconSize = control.attrDouble("iconSize");
var tooltip = control.attrString("tooltip");
var contentCtrls = children.where((c) => c.name == "content");
bool autofocus = control.attrBool("autofocus", false)!;
bool selected = control.attrBool("selected", false)!;
Expand Down Expand Up @@ -76,6 +77,7 @@ class IconButtonControl extends StatelessWidget {
color: iconColor,
),
iconSize: iconSize,
tooltip: tooltip,
style: style,
isSelected: selected,
selectedIcon: selectedIcon != null
Expand All @@ -88,6 +90,7 @@ class IconButtonControl extends StatelessWidget {
onPressed: onPressed,
iconSize: iconSize,
style: style,
tooltip: tooltip,
isSelected: selected,
selectedIcon: selectedIcon != null
? Icon(selectedIcon, color: selectedIconColor)
Expand Down
5 changes: 0 additions & 5 deletions client/lib/controls/navigation_rail.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,6 @@ class _NavigationRailControlState extends State<NavigationRailControl> {
int? _selectedIndex;
dynamic _dispatch;

@override
void initState() {
super.initState();
}

void _destinationChanged(int index) {
_selectedIndex = index;
debugPrint("Selected index: $_selectedIndex");
Expand Down
Loading