flutter/flutter-wonderous-app
1
0
Fork 0
mirror of https://github.com/gskinnerTeam/flutter-wonderous-app.git synced 2025-08-06 18:24:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #207 from gskinnerTeam/accessibility-pass-semanticslabels

Browse Source 
Accessibility Pass - Semantics Labels
This commit is contained in:
Alex Garneau
2025-04-07 14:22:32 -06:00
committed by GitHub
parent f9610c07bc 839d7b54f9
commit 7b04cac32b
1 changed files with 89 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart
View File

@ -133,34 +133,42 @@ class _OpenedTimeRange extends StatelessWidget {
final TimeRangePainter painter; final TimeRangePainter painter;
final void Function() onClose; final void Function() onClose;
List<Widget> _buildChineseDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) { Widget _buildChineseDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) {
return [ return MergeSemantics(
Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle), child: Row(
Gap($styles.insets.xxs), children: [
Text(startYr.abs().toString(), style: headingTextStyle), Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle),
Text($strings.year, style: captionTextStyle), Gap($styles.insets.xxs),
Gap($styles.insets.xs), Text(startYr.abs().toString(), style: headingTextStyle),
Text('~', style: captionTextStyle), Text($strings.year, style: captionTextStyle),
Gap($styles.insets.xs), Gap($styles.insets.xs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle), Text('~', style: captionTextStyle),
Gap($styles.insets.xxs), Gap($styles.insets.xs),
Text(endYr.abs().toString(), style: headingTextStyle), Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle),
Text($strings.year, style: captionTextStyle), Gap($styles.insets.xxs),
]; Text(endYr.abs().toString(), style: headingTextStyle),
Text($strings.year, style: captionTextStyle),
],
),
);
} }
List<Widget> _buildDefaultDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) { Widget _buildDefaultDateLayout(TextStyle headingTextStyle, TextStyle captionTextStyle, int startYr, int endYr) {
return [ return MergeSemantics(
Text(startYr.abs().toString(), style: headingTextStyle), child: Row(
Gap($styles.insets.xxs), children: [
Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle), Text(startYr.abs().toString(), style: headingTextStyle),
Gap($styles.insets.xs), Gap($styles.insets.xxs),
Text('—', style: captionTextStyle), Text(StringUtils.getYrSuffix(startYr), style: captionTextStyle),
Gap($styles.insets.xs), Gap($styles.insets.xs),
Text(endYr.abs().toString(), style: headingTextStyle), Text('—', style: captionTextStyle),
Gap($styles.insets.xxs), Gap($styles.insets.xs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle), Text(endYr.abs().toString(), style: headingTextStyle),
]; Gap($styles.insets.xxs),
Text(StringUtils.getYrSuffix(endYr.round()), style: captionTextStyle),
],
),
);
} }
@override @override
@ -181,16 +189,16 @@ class _OpenedTimeRange extends StatelessWidget {
Gap($styles.insets.xl), Gap($styles.insets.xl),
Spacer(), Spacer(),
if (localeLogic.strings.localeName == 'zh') ...{ if (localeLogic.strings.localeName == 'zh') ...{
..._buildChineseDateLayout(headingTextStyle, captionTextStyle, startYr, endYr), _buildChineseDateLayout(headingTextStyle, captionTextStyle, startYr, endYr),
} else ...{ } else ...{
..._buildDefaultDateLayout(headingTextStyle, captionTextStyle, startYr, endYr), _buildDefaultDateLayout(headingTextStyle, captionTextStyle, startYr, endYr),
}, },
Spacer(), Spacer(),
SizedBox( SizedBox(
width: $styles.insets.xl, width: $styles.insets.xl,
child: AppBtn.from( child: AppBtn.from(
onPressed: onClose, onPressed: onClose,
semanticLabel: $strings.expandingTimeSelectorSemanticSelector, semanticLabel: $strings.circleButtonsSemanticClose,
enableFeedback: false, // handled when panelController changes. enableFeedback: false, // handled when panelController changes.
icon: AppIcons.close, icon: AppIcons.close,
iconSize: 20, iconSize: 20,
@ -206,60 +214,67 @@ class _OpenedTimeRange extends StatelessWidget {
// Timeframe slider // Timeframe slider
SizedBox( SizedBox(
height: $styles.insets.lg * 2, height: $styles.insets.lg * 2,
child: Stack(children: [ child: Stack(
// grid lines: children: [
Container( // grid lines:
decoration: BoxDecoration( Container(
borderRadius: BorderRadius.circular($styles.corners.md), decoration: BoxDecoration(
color: Color.lerp($styles.colors.black, Colors.black, 0.2), borderRadius: BorderRadius.circular($styles.corners.md),
), color: Color.lerp($styles.colors.black, Colors.black, 0.2),
child: Row( ),
mainAxisAlignment: MainAxisAlignment.spaceEvenly, child: Row(
children: timelineGrid, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
), children: timelineGrid,
),
// results visualization:
Positioned.fill(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth),
child: RepaintBoundary(
child: CustomPaint(painter: painter),
), ),
), ),
),
// wonder minimap: // results visualization:
Positioned.fill( Positioned.fill(
child: Padding( child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth, vertical: 12), padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth),
child: WondersTimelineBuilder( child: RepaintBoundary(
crossAxisGap: 6, child: CustomPaint(painter: painter),
minSize: 16, ),
selectedWonders: [wonder.type], ),
timelineBuilder: (_, __, sel) => Container( ),
decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(sel ? 0.75 : 0.25), // wonder minimap:
borderRadius: BorderRadius.circular(999), Positioned.fill(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: RangeSelector.handleWidth, vertical: 12),
child: WondersTimelineBuilder(
crossAxisGap: 6,
minSize: 16,
selectedWonders: [wonder.type],
timelineBuilder: (_, __, sel) => Container(
decoration: BoxDecoration(
color: $styles.colors.offWhite.withOpacity(sel ? 0.75 : 0.25),
borderRadius: BorderRadius.circular(999),
),
), ),
), ),
), ),
), ),
),
// Time slider itself // Time slider itself
Positioned.fill( Positioned.fill(
child: RangeSelector( child: MergeSemantics(
key: ValueKey('RangeSelectorIsWonderTime'), child: Semantics(
min: wondersLogic.timelineStartYear * 1.0, label: $strings.bottomScrubberSemanticTimeline,
max: wondersLogic.timelineEndYear * 1.0, child: RangeSelector(
minDelta: 500, key: ValueKey('RangeSelectorIsWonderTime'),
start: startYear, min: wondersLogic.timelineStartYear * 1.0,
end: endYear, max: wondersLogic.timelineEndYear * 1.0,
onUpdated: onChange, minDelta: 500,
start: startYear,
end: endYear,
onUpdated: onChange,
),
),
),
), ),
), ],
]), ),
), ),
Gap(safeBottom), Gap(safeBottom),