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

feat: Add custom accessibility annotations to AnnotatedStringResource #1402

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft
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
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ import com.adevinta.spark.SparkFeatureFlag
import com.adevinta.spark.SparkTheme
import com.adevinta.spark.catalog.configurator.ConfiguratorComponentsScreen
import com.adevinta.spark.catalog.examples.ComponentsScreen
import com.adevinta.spark.catalog.accessibility.AccessibilityDemoScreen
import com.adevinta.spark.catalog.icons.IconDemoScreen
import com.adevinta.spark.catalog.model.Component
import com.adevinta.spark.catalog.tabbar.CatalogTabBar
Expand Down Expand Up @@ -269,6 +270,10 @@ internal fun ComponentActivity.CatalogApp(
CatalogHomeScreen.Icons -> IconDemoScreen(
contentPadding = innerPadding,
)

CatalogHomeScreen.Accessibility -> AccessibilityDemoScreen(
contentPadding = innerPadding,
)
}
}
},
Expand Down Expand Up @@ -304,7 +309,7 @@ private fun HomeTabBar(
}
}

public enum class CatalogHomeScreen { Examples, Configurator, Icons }
public enum class CatalogHomeScreen { Examples, Configurator, Icons, Accessibility }

/**
* The default light scrim, as defined by androidx and the platform:
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright (c) 2024 Adevinta
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
package com.adevinta.spark.catalog.accessibility

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
public fun AccessibilityDemoScreen(
contentPadding: PaddingValues,
modifier: Modifier = Modifier,
) {
val navController = rememberNavController()

NavHost(
modifier = modifier,
navController = navController,
startDestination = Accessibility,
builder = {
composable(route = Accessibility) {
AccessibilityScreen(contentPadding)
}
},
)
}

internal const val Accessibility = "accessibility"
Original file line number Diff line number Diff line change
@@ -0,0 +1,185 @@
/*
* Copyright (c) 2024 Adevinta
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
package com.adevinta.spark.catalog.accessibility

import android.content.Intent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.consumeWindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.adevinta.spark.SparkTheme
import com.adevinta.spark.catalog.R
import com.adevinta.spark.components.buttons.ButtonOutlined
import com.adevinta.spark.components.divider.DividerIntent
import com.adevinta.spark.components.divider.HorizontalDivider
import com.adevinta.spark.components.spacer.VerticalSpacer
import com.adevinta.spark.components.text.Text
import com.adevinta.spark.icons.SparkIcons
import com.adevinta.spark.icons.WheelOutline
import com.adevinta.spark.res.annotatedStringResource
import com.adevinta.spark.tokens.highlight

@Composable
public fun AccessibilityScreen(
contentPadding: PaddingValues,
modifier: Modifier = Modifier,
) {
val context = LocalContext.current
val accessibilityTypes: List<AccessibilityType> by remember {
mutableStateOf(getAllAccessibilityRes())
}
Column(
modifier = modifier.fillMaxSize(),
) {
ButtonOutlined(
icon = SparkIcons.WheelOutline,
onClick = {
context.startActivity(Intent(android.provider.Settings.ACTION_ACCESSIBILITY_SETTINGS))
},
modifier = Modifier.padding(16.dp),
) {
Text(text = stringResource(id = R.string.accessibility_settings_shortcut))
}

LazyColumn(
modifier = modifier
.consumeWindowInsets(contentPadding)
.fillMaxSize()
.padding(horizontal = 16.dp),
contentPadding = contentPadding,
verticalArrangement = Arrangement.spacedBy(8.dp),
) {
items(accessibilityTypes.size) { index ->
val accessibilityType = accessibilityTypes[index]
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Text(text = stringResource(id = R.string.accessibility_settings_type_label))
Text(
text = stringResource(id = accessibilityType.type),
style = SparkTheme.typography.body1.highlight,
)
}
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Text(text = stringResource(id = R.string.accessibility_settings_input_label))
Text(
text = annotatedStringResource(id = accessibilityType.input),
color = SparkTheme.colors.support,
)
}
Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
Text(text = stringResource(id = R.string.accessibility_settings_result_label))
Text(
text = annotatedStringResource(id = accessibilityType.result),
color = SparkTheme.colors.accent,
)
}
VerticalSpacer(8.dp)
HorizontalDivider(intent = DividerIntent.Outline)
}
}
}
}

private data class AccessibilityType(
val type: Int,
val input: Int,
val result: Int,
)

private fun getAllAccessibilityRes() = listOf(
AccessibilityType(
type = R.string.accessibility_settings_cardinal_type,
input = R.string.accessibility_settings_cardinal_input,
result = R.string.accessibility_settings_cardinal_result,
),
AccessibilityType(
type = R.string.accessibility_settings_date_type,
input = R.string.accessibility_settings_date_input,
result = R.string.accessibility_settings_date_result,
),
AccessibilityType(
type = R.string.accessibility_settings_decimal_type,
input = R.string.accessibility_settings_decimal_input,
result = R.string.accessibility_settings_decimal_result,
),
AccessibilityType(
type = R.string.accessibility_settings_digits_type,
input = R.string.accessibility_settings_digits_input,
result = R.string.accessibility_settings_digits_result,
),
AccessibilityType(
type = R.string.accessibility_settings_electronic_type,
input = R.string.accessibility_settings_electronic_input,
result = R.string.accessibility_settings_electronic_result,
),
AccessibilityType(
type = R.string.accessibility_settings_fraction_type,
input = R.string.accessibility_settings_fraction_input,
result = R.string.accessibility_settings_fraction_result,
),
AccessibilityType(
type = R.string.accessibility_settings_measure_type,
input = R.string.accessibility_settings_measure_input,
result = R.string.accessibility_settings_measure_result,
),
AccessibilityType(
type = R.string.accessibility_settings_money_type,
input = R.string.accessibility_settings_money_input,
result = R.string.accessibility_settings_money_result,
),
AccessibilityType(
type = R.string.accessibility_settings_ordinal_type,
input = R.string.accessibility_settings_ordinal_input,
result = R.string.accessibility_settings_ordinal_result,
),
AccessibilityType(
type = R.string.accessibility_settings_telephone_type,
input = R.string.accessibility_settings_telephone_input,
result = R.string.accessibility_settings_telephone_result,
),
AccessibilityType(
type = R.string.accessibility_settings_text_type,
input = R.string.accessibility_settings_text_input,
result = R.string.accessibility_settings_text_result,
),
AccessibilityType(
type = R.string.accessibility_settings_time_type,
input = R.string.accessibility_settings_time_input,
result = R.string.accessibility_settings_time_result,
),
AccessibilityType(
type = R.string.accessibility_settings_verbatim_type,
input = R.string.accessibility_settings_verbatim_input,
result = R.string.accessibility_settings_verbatim_result,
),
)
44 changes: 44 additions & 0 deletions catalog/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,50 @@

<string name="icons_screen_search_helper">Search Spark Icon</string>

<string name="accessibility_settings_shortcut">Accessibility settings</string>
<string name="accessibility_settings_type_label">Accessibility Span Type:</string>
<string name="accessibility_settings_input_label">Input:</string>
<string name="accessibility_settings_result_label">Result:</string>
<string name="accessibility_settings_cardinal_type">cardinal</string>
<string name="accessibility_settings_cardinal_input">There are 3 apples</string>
<string name="accessibility_settings_cardinal_result">There are <annotation tts="cardinal">3</annotation> apples</string>
<string name="accessibility_settings_date_type">date</string>
<string name="accessibility_settings_date_input">11/12/2024</string>
<string name="accessibility_settings_date_result"><annotation tts="date">11/12/2024</annotation></string>
<string name="accessibility_settings_decimal_type">decimal</string>
<string name="accessibility_settings_decimal_input">18,12</string>
<string name="accessibility_settings_decimal_result"><annotation tts="decimal">18,12</annotation></string>
<string name="accessibility_settings_digits_type">digits</string>
<string name="accessibility_settings_digits_input">1234567890</string>
<string name="accessibility_settings_digits_result"><annotation tts="digits">1234567890</annotation></string>
<string name="accessibility_settings_electronic_type">electronic</string>
<string name="accessibility_settings_electronic_input">protocol://username:password@domain:port/path?query_string#fragment_id</string>
<string name="accessibility_settings_electronic_result"><annotation tts="electronic">protocol://username:password@domain:port/path?query_string#fragment_id</annotation></string>
<string name="accessibility_settings_fraction_type">fraction</string>
<string name="accessibility_settings_fraction_input">18/12</string>
<string name="accessibility_settings_fraction_result"><annotation tts="fraction">18/12</annotation></string>
<string name="accessibility_settings_measure_type">measure</string>
<string name="accessibility_settings_measure_input">18kg 28L et 250km/h</string>
<string name="accessibility_settings_measure_result"><annotation tts="measure">18kg 28L et 250km/h</annotation></string>
<string name="accessibility_settings_money_type">money</string>
<string name="accessibility_settings_money_input">1 000 €</string>
<string name="accessibility_settings_money_result"><annotation tts="money">1 000 €</annotation></string>
<string name="accessibility_settings_ordinal_type">ordinal</string>
<string name="accessibility_settings_ordinal_input">the 2nd best</string>
<string name="accessibility_settings_ordinal_result">the <annotation tts="ordinal">2nd</annotation> best</string>
<string name="accessibility_settings_telephone_type">telephone</string>
<string name="accessibility_settings_telephone_input">+33612345678</string>
<string name="accessibility_settings_telephone_result"><annotation tts="telephone">+33612345678</annotation></string>
<string name="accessibility_settings_text_type">text</string>
<string name="accessibility_settings_text_input">This is a pretty text</string>
<string name="accessibility_settings_text_result"><annotation tts="text">This is a pretty text</annotation></string>
<string name="accessibility_settings_time_type">time</string>
<string name="accessibility_settings_time_input">18:12</string>
<string name="accessibility_settings_time_result"><annotation tts="time">18:12</annotation></string>
<string name="accessibility_settings_verbatim_type">verbatim</string>
<string name="accessibility_settings_verbatim_input">L.G.T.M</string>
<string name="accessibility_settings_verbatim_result"><annotation tts="verbatim">L.G.T.M</annotation></string>

<string name="spark_text_link_paragraph_example_"><annotation color="neutral" typography="body1">This is Adevinta </annotation><annotation color="main" typography="body1"><u><b>Privacy &amp; Policy</b></u></annotation><annotation color="neutral" typography="body1"> also lots of extra information you maybe interested in or should I inform you about that extra information. you might be not knowing it</annotation></string>

<string name="spark_text_link_short_example_"><annotation color="neutral" typography="display2">Learn Kotlin Programming </annotation><annotation color="success" typography="display3"><u><b>https://kotlinlang.org</b></u></annotation></string>
Expand Down
4 changes: 4 additions & 0 deletions spark/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ android {
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
}

compileOptions.isCoreLibraryDesugaringEnabled = true

testOptions {
unitTests.isIncludeAndroidResources = true
unitTests.isReturnDefaultValues = true
Expand Down Expand Up @@ -91,4 +93,6 @@ dependencies {
androidTestImplementation(libs.androidx.test.runner)
androidTestImplementation(libs.androidx.compose.ui.test)
androidTestImplementation(libs.androidx.compose.ui.testManifest)

coreLibraryDesugaring(libs.desugarJdkLibs)
}
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ package com.adevinta.spark.res

import android.content.res.Resources
import android.graphics.Typeface
import android.telephony.PhoneNumberUtils
import android.text.Annotation
import android.text.Spanned
import android.text.SpannedString
Expand Down Expand Up @@ -66,10 +67,15 @@ import androidx.core.text.toHtml
import com.adevinta.spark.PreviewTheme
import com.adevinta.spark.R
import com.adevinta.spark.SparkTheme
import com.adevinta.spark.res.SparkStringAnnotations.toAccessibilitySpan
import com.adevinta.spark.tokens.SparkColors
import com.adevinta.spark.tokens.SparkTypography
import kotlinx.collections.immutable.PersistentMap
import kotlinx.collections.immutable.persistentMapOf
import java.text.DecimalFormatSymbols
import java.time.LocalDateTime
import java.time.format.DateTimeFormatter
import java.util.Locale

/**
* Load an annotated string resource with formatting.
Expand Down Expand Up @@ -291,16 +297,25 @@ private fun CharSequence.asAnnotatedString(
): AnnotatedString {
if (this !is Spanned) return AnnotatedString(this.toString())
return buildAnnotatedString {
append(this@asAnnotatedString.toString())
var annotatedString = this@asAnnotatedString
getSpans(0, length, Any::class.java).forEach {
val start = getSpanStart(it)
val end = getSpanEnd(it)
buildWithSpan(it, start, end, density, colors, typography)
annotatedString = annotatedString.buildWithAccessibilitySpan(it, start, end)
}
append(annotatedString)
getSpans(0, length, Any::class.java).forEach {
val start = getSpanStart(it)
val end = getSpanEnd(it)
buildWithSpanStyle(it, start, end, density, colors, typography)
Comment on lines +304 to +310
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure to fully understand why we duplicated this part of the code. Can't we merge the tts handling with the already existing buildWithSpan which is already parsing the entire string/annotations once?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's the frustrating part, TtsSpan in spannable uses metadata to add info for Tts to better read the words but this is not possible yet in compose and AnnotatedStrings (well only Verbatim is possible for now)

So the only way I found was to actually reformat the string itself to make it more readable by Tts.

The first part with buildWithAccessibilitySpan updates the strings before using append, and the second part with buildWithSpanStyle only adds styling to the annotated string (and so needs to be done after the append)

But if you know how to extend the TtsAnnotation from Compose, or a better way to do this I'm all ears πŸ™

}
}
}

private fun AnnotatedString.Builder.buildWithSpan(
/**
* Update the [AnnotatedString] from `start` to `end` with the provided [SpanStyle], [Density], [SparkColors] and [SparkTypography].
*/
private fun AnnotatedString.Builder.buildWithSpanStyle(
it: Any,
start: Int,
end: Int,
Expand Down
Loading