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.

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

fix: [MDS-498] Add missing Semantics and semanticLabels #135

Merged
merged 1 commit into from
Apr 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions lib/src/widgets/accordion/accordion_item.dart
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,9 @@ class MoonAccordionItem<T> extends StatefulWidget {
/// {@macro flutter.widgets.Focus.focusNode}.
final FocusNode? focusNode;

/// The semantic label for the accordion.
final String? semanticLabel;

/// A widget to display before the title.
///
/// Typically a [CircleAvatar] widget.
Expand Down Expand Up @@ -191,6 +194,7 @@ class MoonAccordionItem<T> extends StatefulWidget {
this.transitionCurve,
this.autofocus = false,
this.focusNode,
this.semanticLabel,
this.leading,
required this.title,
this.trailing,
Expand Down Expand Up @@ -438,6 +442,7 @@ class _MoonAccordionItemState<T> extends State<MoonAccordionItem<T>> with Single
_getTextColor(context, effectiveBackgroundColor: resolvedBackgroundColor ?? effectiveBackgroundColor);

return Semantics(
label: widget.semanticLabel,
enabled: _isExpanded,
focused: _isFocused,
child: FocusableActionDetector(
Expand Down
5 changes: 5 additions & 0 deletions lib/src/widgets/checkbox/checkbox.dart
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,9 @@ class MoonCheckbox extends StatefulWidget {
/// {@macro flutter.widgets.Focus.autofocus}
final bool autofocus;

/// The semantic label for the checkbox.
final String? semanticLabel;

/// MDS checkbox widget.
const MoonCheckbox({
super.key,
Expand All @@ -69,6 +72,7 @@ class MoonCheckbox extends StatefulWidget {
this.inactiveColor,
this.focusNode,
this.autofocus = false,
this.semanticLabel,
});

static Widget withLabel(
Expand Down Expand Up @@ -224,6 +228,7 @@ class _MoonCheckboxState extends State<MoonCheckbox> with TickerProviderStateMix
});

return Semantics(
label: widget.semanticLabel,
checked: widget.value ?? false,
mixed: widget.tristate ? widget.value == null : null,
child: TouchTargetPadding(
Expand Down
34 changes: 23 additions & 11 deletions lib/src/widgets/modal/modal.dart
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,23 @@ import 'package:moon_design/src/theme/theme.dart';
import 'package:moon_design/src/utils/extensions.dart';

class MoonModal extends StatelessWidget {
/// The background color of the modal.
final Color? backgroundColor;

/// The border radius of the modal.
final BorderRadius? borderRadius;

/// The semantic label for the modal.
final String? semanticLabel;

/// The child of the modal.
final Widget child;

const MoonModal({
super.key,
this.backgroundColor,
this.borderRadius,
this.semanticLabel,
required this.child,
});

Expand Down Expand Up @@ -42,19 +51,22 @@ class MoonModal extends StatelessWidget {
final BorderRadius effectiveBorderRadius =
borderRadius ?? context.moonTheme?.modalTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm;

return IconTheme(
data: IconThemeData(color: effectiveTextColor),
child: DefaultTextStyle(
style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
child: Center(
child: Container(
decoration: ShapeDecoration(
color: effectiveBackgroundColor,
shape: SmoothRectangleBorder(
borderRadius: effectiveBorderRadius.smoothBorderRadius,
return Semantics(
label: semanticLabel,
child: IconTheme(
data: IconThemeData(color: effectiveTextColor),
child: DefaultTextStyle(
style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
child: Center(
child: Container(
decoration: ShapeDecoration(
color: effectiveBackgroundColor,
shape: SmoothRectangleBorder(
borderRadius: effectiveBorderRadius.smoothBorderRadius,
),
),
child: child,
),
child: child,
),
),
),
Expand Down
57 changes: 32 additions & 25 deletions lib/src/widgets/popover/popover.dart
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,9 @@ class MoonPopover extends StatefulWidget {
/// `RouteObserver` used to listen for route changes that will hide the popover when the widget's route is not active.
final RouteObserver<PageRoute<dynamic>>? routeObserver;

/// The semantic label for the popover.
final String? semanticLabel;

/// The widget that its placed inside the popover and functions as its content.
final Widget content;

Expand All @@ -100,6 +103,7 @@ class MoonPopover extends StatefulWidget {
this.transitionCurve,
this.popoverShadows,
this.routeObserver,
this.semanticLabel,
required this.content,
required this.child,
});
Expand Down Expand Up @@ -433,33 +437,36 @@ class MoonPopoverState extends State<MoonPopover> with RouteAware, SingleTickerP
popoverTargetGlobalRight: popoverTargetGlobalRight.dx,
);

return GestureDetector(
behavior: HitTestBehavior.translucent,
onTapDown: _handleTap,
child: UnconstrainedBox(
child: CompositedTransformFollower(
link: _layerLink,
showWhenUnlinked: false,
offset: popoverPositionParameters.offset,
followerAnchor: popoverPositionParameters.followerAnchor,
targetAnchor: popoverPositionParameters.targetAnchor,
child: RepaintBoundary(
child: FadeTransition(
opacity: _curvedAnimation!,
child: DefaultTextStyle(
style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
child: Container(
key: _popoverKey,
constraints: BoxConstraints(maxWidth: popoverPositionParameters.toolTipMaxWidth),
padding: effectiveContentPadding,
decoration: ShapeDecoration(
color: effectiveBackgroundColor,
shadows: effectivePopoverShadows,
shape: SmoothRectangleBorder(
borderRadius: effectiveBorderRadius.smoothBorderRadius,
return Semantics(
label: widget.semanticLabel,
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTapDown: _handleTap,
child: UnconstrainedBox(
child: CompositedTransformFollower(
link: _layerLink,
showWhenUnlinked: false,
offset: popoverPositionParameters.offset,
followerAnchor: popoverPositionParameters.followerAnchor,
targetAnchor: popoverPositionParameters.targetAnchor,
child: RepaintBoundary(
child: FadeTransition(
opacity: _curvedAnimation!,
child: DefaultTextStyle(
style: DefaultTextStyle.of(context).style.copyWith(color: effectiveTextColor),
child: Container(
key: _popoverKey,
constraints: BoxConstraints(maxWidth: popoverPositionParameters.toolTipMaxWidth),
padding: effectiveContentPadding,
decoration: ShapeDecoration(
color: effectiveBackgroundColor,
shadows: effectivePopoverShadows,
shape: SmoothRectangleBorder(
borderRadius: effectiveBorderRadius.smoothBorderRadius,
),
),
child: widget.content,
),
child: widget.content,
),
),
),
Expand Down
26 changes: 17 additions & 9 deletions lib/src/widgets/progress/circular_progress.dart
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,9 @@ class MoonCircularProgress extends StatelessWidget {
/// Stroke cap of the circular progress widget.
final StrokeCap? strokeCap;

/// The semantic label for the circular progress widget.
final String? semanticLabel;

/// MDS circular progress widget.
const MoonCircularProgress({
super.key,
Expand All @@ -45,6 +48,7 @@ class MoonCircularProgress extends StatelessWidget {
this.color,
this.backgroundColor,
this.strokeCap,
this.semanticLabel,
});

MoonCircularProgressSizeProperties _getMoonCircularProgressSize(
Expand Down Expand Up @@ -82,15 +86,19 @@ class MoonCircularProgress extends StatelessWidget {
final double effectiveSize = sizeValue ?? effectiveMoonCircularProgressSize.progressSizeValue;
final double effectiveStrokeWidth = strokeWidth ?? effectiveMoonCircularProgressSize.progressStrokeWidth;

return SizedBox(
height: effectiveSize,
width: effectiveSize,
child: MoonCircularProgressIndicator(
value: value,
strokeWidth: effectiveStrokeWidth,
color: effectiveColor,
backgroundColor: effectiveBackgroundColor,
strokeCap: effectiveStrokeCap,
return Semantics(
label: semanticLabel,
value: "${value * 100}%",
child: SizedBox(
height: effectiveSize,
width: effectiveSize,
child: MoonCircularProgressIndicator(
value: value,
strokeWidth: effectiveStrokeWidth,
color: effectiveColor,
backgroundColor: effectiveBackgroundColor,
strokeCap: effectiveStrokeCap,
),
),
);
}
Expand Down
30 changes: 19 additions & 11 deletions lib/src/widgets/progress/linear_progress.dart
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,24 @@ class MoonLinearProgress extends StatelessWidget {
/// Size of the linear progress widget.
final MoonLinearProgressSize? progressSize;

/// Value of the progress widget.
/// Value of the linear progress widget.
final double value;

/// Height of the progress widget.
/// Height of the linear progress widget.
final double? height;

/// Color of the progress widget.
/// Color of the linear progress widget.
final Color? color;

/// Background color of the progress widget.
/// Background color of the linear progress widget.
final Color? backgroundColor;

/// Border radius value of the progress widget.
/// Border radius value of the linear progress widget.
final double? borderRadiusValue;

/// The semantic label for the linear progress widget.
final String? semanticLabel;

/// MDS linear progress widget.
const MoonLinearProgress({
super.key,
Expand All @@ -41,6 +44,7 @@ class MoonLinearProgress extends StatelessWidget {
this.color,
this.backgroundColor,
this.borderRadiusValue,
this.semanticLabel,
});

MoonLinearProgressSizeProperties _getMoonProgressSize(
Expand Down Expand Up @@ -75,12 +79,16 @@ class MoonLinearProgress extends StatelessWidget {
final double effectiveBorderRadiusValue = borderRadiusValue ?? effectiveProgressSize.borderRadiusValue;
final double effectiveHeight = height ?? effectiveProgressSize.progressHeight;

return MoonLinearProgressIndicator(
value: value,
borderRadiusValue: effectiveBorderRadiusValue,
minHeight: effectiveHeight,
color: effectiveColor,
backgroundColor: effectiveBackgroundColor,
return Semantics(
label: semanticLabel,
value: "${value * 100}%",
child: MoonLinearProgressIndicator(
value: value,
borderRadiusValue: effectiveBorderRadiusValue,
minHeight: effectiveHeight,
color: effectiveColor,
backgroundColor: effectiveBackgroundColor,
),
);
}
}
5 changes: 5 additions & 0 deletions lib/src/widgets/radio/radio.dart
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,9 @@ class MoonRadio<T> extends StatefulWidget {
/// {@macro flutter.widgets.Focus.autofocus}
final bool autofocus;

/// The semantic label for the radio.
final String? semanticLabel;

/// MDS radio widget.
const MoonRadio({
super.key,
Expand All @@ -81,6 +84,7 @@ class MoonRadio<T> extends StatefulWidget {
this.inactiveColor,
this.focusNode,
this.autofocus = false,
this.semanticLabel,
});

static Widget withLabel<T>(
Expand Down Expand Up @@ -219,6 +223,7 @@ class _RadioState<T> extends State<MoonRadio<T>> with TickerProviderStateMixin,
});

return Semantics(
label: widget.semanticLabel,
inMutuallyExclusiveGroup: true,
checked: widget._selected,
child: TouchTargetPadding(
Expand Down
5 changes: 5 additions & 0 deletions lib/src/widgets/switch/switch.dart
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@ class MoonSwitch extends StatefulWidget {
/// {@macro flutter.widgets.Focus.focusNode}.
final FocusNode? focusNode;

/// The semantic label for the switch.
final String? semanticLabel;

/// The widget to display when the switch is on (left slot).
final Widget? activeTrackWidget;

Expand Down Expand Up @@ -92,6 +95,7 @@ class MoonSwitch extends StatefulWidget {
this.duration,
this.curve,
this.focusNode,
this.semanticLabel,
this.activeTrackWidget,
this.inactiveTrackWidget,
this.activeThumbWidget,
Expand Down Expand Up @@ -381,6 +385,7 @@ class _MoonSwitchState extends State<MoonSwitch> with SingleTickerProviderStateM
final Color inactiveTextColor = _getTextOrIconColor(backgroundColor: effectiveInactiveTrackColor);

return Semantics(
label: widget.semanticLabel,
toggled: widget.value,
child: FocusableActionDetector(
enabled: _isInteractive,
Expand Down
Loading