Skip to content

Feature/acccessibility customizations #107

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

Merged
merged 3 commits into from
Jun 20, 2023
Merged

Feature/acccessibility customizations #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fc2385f
customizing accessibility text
AkYML Jun 14, 2023
d2c6891
Merge branch 'feature/bubbleChart' into feature/acccessibilityCustomi…
AkYML Jun 15, 2023
0ff653a
test accessibility dialog text
AkYML Jun 19, 2023
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
11 changes: 8 additions & 3 deletions YChartsLib/src/main/java/co/yml/charts/common/components/accessibility/BarInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,31 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
* Composable to display each bar item for given bar chart
* @param axisLabelDescription: Axis label description
* @param barDescription: Bar description
* @param titleTextSize: TextUnit title font size
* @param descriptionTextSize: TextUnit description font size
*/
@Composable
fun BarInfo(
axisLabelDescription: String,
barDescription: String, barColor: Color
barDescription: String, barColor: Color,
titleTextSize:TextUnit,
descriptionTextSize:TextUnit
) {
// Merge elements below for accessibility purposes
Row(modifier = Modifier
.padding(start = 10.dp, end = 10.dp)
.clickable { }
.semantics(mergeDescendants = true) {}, verticalAlignment = Alignment.CenterVertically
) {
Text(axisLabelDescription, fontSize = 12.sp)
Text(axisLabelDescription, fontSize = titleTextSize)
Spacer(modifier = Modifier.width(10.dp))
Column(
modifier = Modifier
Expand All @@ -48,7 +53,7 @@ fun BarInfo(
.background(barColor)
.size(20.dp)
)
Text(barDescription, fontSize = 12.sp)
Text(barDescription, fontSize = descriptionTextSize)
}
}
}
Expand Down
11 changes: 8 additions & 3 deletions YChartsLib/src/main/java/co/yml/charts/common/components/accessibility/BubblePointInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Expand All @@ -23,20 +24,24 @@ import androidx.compose.ui.unit.sp
* @param axisLabelDescription: Axis label description.
* @param pointDescription: Details of each point on the line.
* @param bubbleColor: Color of each bubble.
* @param titleTextSize: TextUnit title font size
* @param descriptionTextSize: TextUnit description font size
*/
@Composable
fun BubblePointInfo(
axisLabelDescription: String,
pointDescription: String,
bubbleColor: Color
bubbleColor: Color,
titleTextSize: TextUnit,
descriptionTextSize: TextUnit
) {
// Merge elements below for accessibility purposes
Row(modifier = Modifier
.padding(start = 10.dp, end = 10.dp)
.clickable { }
.semantics(mergeDescendants = true) {}, verticalAlignment = Alignment.CenterVertically
) {
Text(axisLabelDescription, fontSize = 12.sp)
Text(axisLabelDescription, fontSize = titleTextSize)
Spacer(modifier = Modifier.width(5.dp))
Column(
modifier = Modifier
Expand All @@ -50,7 +55,7 @@ fun BubblePointInfo(
.background(bubbleColor)
.size(20.dp)
)
Text(pointDescription, fontSize = 12.sp)
Text(pointDescription, fontSize = descriptionTextSize)
}
}
}
Expand Down
13 changes: 9 additions & 4 deletions YChartsLib/src/main/java/co/yml/charts/common/components/accessibility/CombinedChartInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import co.yml.charts.ui.barchart.models.GroupBar
Expand All @@ -32,6 +33,8 @@ import co.yml.charts.common.model.Point
* @param axisLabelDescription: Axis label description.
* @param barColorPaletteList: List of each bar colors for a given group bar.
* @param dividerColor: Divider color between each point items.
* @param titleTextSize: TextUnit title font size
* @param descriptionTextSize: TextUnit description font size
*/
@Composable
fun CombinedChartInfo(
Expand All @@ -40,15 +43,17 @@ fun CombinedChartInfo(
groupBar: GroupBar?,
axisLabelDescription: String,
barColorPaletteList: List<Color>,
dividerColor: Color
dividerColor: Color,
titleTextSize: TextUnit,
descriptionTextSize: TextUnit
) {
// Merge elements below for accessibility purposes
Row(modifier = Modifier
.padding(start = 10.dp, end = 10.dp)
.clickable { }
.semantics(mergeDescendants = true) {}, verticalAlignment = Alignment.CenterVertically
) {
Text(axisLabelDescription, fontSize = 12.sp)
Text(axisLabelDescription, fontSize = titleTextSize)
Spacer(modifier = Modifier.width(10.dp))
Column(
modifier = Modifier
Expand All @@ -66,7 +71,7 @@ fun CombinedChartInfo(
)
.size(10.dp)
)
Text(point.description, fontSize = 12.sp)
Text(point.description, fontSize = descriptionTextSize)
}
Spacer(modifier = Modifier.height(5.dp))
}
Expand All @@ -79,7 +84,7 @@ fun CombinedChartInfo(
.background(barColorPaletteList[index])
.size(20.dp)
)
Text(value.description, fontSize = 12.sp)
Text(value.description, fontSize = descriptionTextSize)
}
Spacer(modifier = Modifier.height(5.dp))
}
Expand Down
11 changes: 8 additions & 3 deletions YChartsLib/src/main/java/co/yml/charts/common/components/accessibility/GroupBarInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import co.yml.charts.ui.barchart.models.GroupBar
Expand All @@ -26,20 +27,24 @@ import co.yml.charts.ui.barchart.models.GroupBar
* @param axisLabelDescription: Axis label description.
* @param groupBar: Details of each group bar.
* @param barColorPaletteList: List of each bar colors for a given group bar.
* @param titleTextSize: TextUnit title font size
* @param descriptionTextSize: TextUnit description font size
*/
@Composable
fun GroupBarInfo(
groupBar: GroupBar,
axisLabelDescription: String,
barColorPaletteList: List<Color>
barColorPaletteList: List<Color>,
titleTextSize: TextUnit,
descriptionTextSize: TextUnit
) {
// Merge elements below for accessibility purposes
Row(modifier = Modifier
.padding(start = 10.dp, end = 10.dp)
.clickable { }
.semantics(mergeDescendants = true) {}, verticalAlignment = Alignment.CenterVertically
) {
Text(axisLabelDescription, fontSize = 12.sp)
Text(axisLabelDescription, fontSize =titleTextSize)
Spacer(modifier = Modifier.width(10.dp))
Column(
modifier = Modifier
Expand All @@ -54,7 +59,7 @@ fun GroupBarInfo(
.background(barColorPaletteList[index])
.size(20.dp)
)
Text(value.description, fontSize = 12.sp)
Text(value.description, fontSize = descriptionTextSize)
}
Spacer(modifier = Modifier.height(5.dp))
}
Expand Down
12 changes: 9 additions & 3 deletions YChartsLib/src/main/java/co/yml/charts/common/components/accessibility/LinePointInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

Expand All @@ -23,20 +24,25 @@ import androidx.compose.ui.unit.sp
* @param axisLabelDescription: Axis label description.
* @param pointDescription: Details of each point on the line.
* @param lineColor: Color of each line.
* @param titleTextSize: TextUnit title font size
* @param descriptionTextSize: TextUnit description font size
*
*/
@Composable
fun LinePointInfo(
axisLabelDescription: String,
pointDescription: String,
lineColor: Color
lineColor: Color,
titleTextSize: TextUnit,
descriptionTextSize: TextUnit
) {
// Merge elements below for accessibility purposes
Row(modifier = Modifier
.padding(start = 10.dp, end = 10.dp)
.clickable { }
.semantics(mergeDescendants = true) {}, verticalAlignment = Alignment.CenterVertically
) {
Text(axisLabelDescription, fontSize = 12.sp)
Text(axisLabelDescription, fontSize = titleTextSize)
Spacer(modifier = Modifier.width(5.dp))
Column(
modifier = Modifier
Expand All @@ -50,7 +56,7 @@ fun LinePointInfo(
.background(lineColor)
.size(20.dp)
)
Text(pointDescription, fontSize = 12.sp)
Text(pointDescription, fontSize = descriptionTextSize)
}
}
}
Expand Down
6 changes: 4 additions & 2 deletions YChartsLib/src/main/java/co/yml/charts/common/components/accessibility/SliceInfo.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import co.yml.charts.ui.piechart.models.PieChartData
Expand All @@ -20,9 +21,10 @@ import co.yml.charts.ui.piechart.models.PieChartData
* Composable to display each slice for a given pie chart.
* @param slice: Details of each slice in pie/ donut chart.
* @param slicePercentage: Percentage of each slice.
* @param textSize: TextUnit text font size
*/
@Composable
fun SliceInfo(slice: PieChartData.Slice, slicePercentage: Int) {
fun SliceInfo(slice: PieChartData.Slice, slicePercentage: Int, textSize: TextUnit) {
// Merge elements below for accessibility purposes
Row(modifier = Modifier
.clickable { }
Expand All @@ -40,7 +42,7 @@ fun SliceInfo(slice: PieChartData.Slice, slicePercentage: Int) {
.weight(1f)
.padding(top = 10.dp, bottom = 10.dp)
) {
Text(slice.sliceDescription(slicePercentage), fontSize = 12.sp)
Text(slice.sliceDescription(slicePercentage), fontSize = textSize)
}
}
}
10 changes: 8 additions & 2 deletions YChartsLib/src/main/java/co/yml/charts/common/model/AccessibilityConfig.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ package co.yml.charts.common.model

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import co.yml.charts.common.utils.ChartConstants

/**
Expand All @@ -13,13 +15,17 @@ import co.yml.charts.common.utils.ChartConstants
* @param popUpTopRightButtonDescription: Content description of the button visible on the accessibility popUp at the top right.
* @param dividerColor: Defines the color for the divider used in the accessibility popUp
* @param dividerThickness: Defines the thickness for the divider in Dp used in the accessibility popUp
* @param titleTextSize: Defines the font-size of titles used in the accessibility popUp
* @param descriptionTextSize: Defines the font-size of descriptions used in the accessibility popUp
*/
data class AccessibilityConfig(
val chartDescription: String = ChartConstants.CHART_DESCRIPTION,
val shouldHandleBackWhenTalkBackPopUpShown: Boolean = true,
val popUpTopRightButtonTitle: String = ChartConstants.POPUP_TOP_RIGHT_BUTTON_TITLE,
val popUpTopRightButtonDescription: String = ChartConstants.POPUP_TOP_RIGHT_BUTTON_DESCRIPTION,
val dividerColor: Color = Color.Gray,
val dividerThickness: Dp = 2.dp
)
val dividerThickness: Dp = 2.dp,
val titleTextSize: TextUnit = 14.sp,
val descriptionTextSize: TextUnit = 14.sp,
)

3 changes: 3 additions & 0 deletions YChartsLib/src/main/java/co/yml/charts/common/model/LegendsConfig.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

/**
* LegendsConfig data class params used in config label in graph.
Expand All @@ -19,6 +21,7 @@ import androidx.compose.ui.unit.dp
* */
data class LegendsConfig(
val legendLabelList: List<LegendLabel>,
val textSize: TextUnit = 14.sp,
val gridColumnCount: Int = 1,
val gridPaddingHorizontal: Dp = 8.dp,
val gridPaddingVertical: Dp = 8.dp,
Expand Down
4 changes: 3 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/barchart/BarChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,9 @@ fun BarChart(modifier: Modifier, barChartData: BarChartData) {
)
},
chartData[index].description,
chartData[index].color
chartData[index].color,
accessibilityConfig.titleTextSize,
accessibilityConfig.descriptionTextSize
)
ItemDivider(
thickness = accessibilityConfig.dividerThickness,
Expand Down
4 changes: 3 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/barchart/GroupBarChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,9 @@ fun GroupBarChart(modifier: Modifier, groupBarChartData: GroupBarChartData) {
xAxisData.axisLabelDescription(
xAxisData.labelData(index)
),
barPlotData.barColorPaletteList
barPlotData.barColorPaletteList,
accessibilityConfig.titleTextSize,
accessibilityConfig.descriptionTextSize
)
ItemDivider(
thickness = accessibilityConfig.dividerThickness,
Expand Down
4 changes: 3 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/barchart/StackedBarChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,9 @@ fun StackedBarChart(
xAxisData.axisLabelDescription(
xAxisData.labelData(index)
),
barPlotData.barColorPaletteList
barPlotData.barColorPaletteList,
accessibilityConfig.titleTextSize,
accessibilityConfig.descriptionTextSize
)
ItemDivider(
thickness = accessibilityConfig.dividerThickness,
Expand Down
5 changes: 3 additions & 2 deletions YChartsLib/src/main/java/co/yml/charts/ui/bubblechart/BubbleChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,8 +251,9 @@ fun BubbleChart(modifier: Modifier, bubbleChartData: BubbleChartData) {
)
),
bubbles[index].center.description,
bubbles[index].bubbleStyle.solidColor
?: bubbles[index].bubbleStyle.gradientColors.first()
bubbles[index].bubbleStyle.solidColor,
accessibilityConfig.titleTextSize,
accessibilityConfig.descriptionTextSize
)
ItemDivider(
thickness = accessibilityConfig.dividerThickness,
Expand Down
4 changes: 3 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/combinedchart/CombinedChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,9 @@ fun CombinedChart(modifier: Modifier, combinedChartData: CombinedChartData) {
xAxisData.labelData(index)
),
barColorPaletteList = barPlotData.barColorPaletteList,
dividerColor = accessibilityConfig.dividerColor
dividerColor = accessibilityConfig.dividerColor,
accessibilityConfig.titleTextSize,
accessibilityConfig.descriptionTextSize
)
ItemDivider(
thickness = accessibilityConfig.dividerThickness,
Expand Down
4 changes: 3 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/linechart/LineChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,9 @@ fun LineChart(modifier: Modifier, lineChartData: LineChartData) {
)
),
point.description,
linePlotData.lines[lineIndex].lineStyle.color
linePlotData.lines[lineIndex].lineStyle.color,
accessibilityConfig.titleTextSize,
accessibilityConfig.descriptionTextSize
)

ItemDivider(
Expand Down
3 changes: 2 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/DonutPieChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,8 @@ fun DonutPieChart(
items(pieChartData.slices.size) { index ->
SliceInfo(
pieChartData.slices[index],
proportions[index].roundToInt()
proportions[index].roundToInt(),
accessibilityConfig.descriptionTextSize
)
}
}
Expand Down
3 changes: 2 additions & 1 deletion YChartsLib/src/main/java/co/yml/charts/ui/piechart/charts/PieChart.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,8 @@ fun PieChart(
LazyColumn {
items(pieChartData.slices.size) { index ->
SliceInfo(
pieChartData.slices[index], proportions[index].roundToInt()
pieChartData.slices[index], proportions[index].roundToInt(),
accessibilityConfig.descriptionTextSize
)
}
}
Expand Down
Loading