Merge pull request #20574 from wordpress-mobile/feature/reader-custom…

…ization-a11y [Reader Customization] Improve Reading Preferences sheet accessibility
wordpress-mobile · Apr 4, 2024 · 2ff2002 · 2ff2002
2 parents 368b64a + 9a1bd49
commit 2ff2002
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 13 deletions.
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/models/ReaderReadingPreferences.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/models/ReaderReadingPreferences.kt
@@ -168,14 +168,32 @@ data class ReaderReadingPreferences @JvmOverloads constructor(
         ),
     }
 
-    enum class FontSize(val value: Int) {
-        EXTRA_SMALL(10),
-        SMALL(12),
+    enum class FontSize(
+        @StringRes val displayNameRes: Int,
+        val value: Int,
+    ) {
+        EXTRA_SMALL(
+            displayNameRes = R.string.reader_preferences_font_size_extra_small,
+            value = 10,
+        ),
+        SMALL(
+            displayNameRes = R.string.reader_preferences_font_size_small,
+            value = 12,
+        ),
 
         @FallbackValue
-        NORMAL(16),
-        LARGE(20),
-        EXTRA_LARGE(24);
+        NORMAL(
+            displayNameRes = R.string.reader_preferences_font_size_normal,
+            value = 16,
+        ),
+        LARGE(
+            displayNameRes = R.string.reader_preferences_font_size_large,
+            value = 20,
+        ),
+        EXTRA_LARGE(
+            displayNameRes = R.string.reader_preferences_font_size_extra_large,
+            value = 24,
+        );
 
         val multiplier: Float
             get() = value / DEFAULT.value.toFloat()

diff --git a/...wordpress/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesButtons.kt b/...wordpress/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesButtons.kt
@@ -28,6 +28,12 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.selected
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -65,10 +71,16 @@ private fun ReadingPreferenceButton(
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
     verticalSpacing: Dp = buttonSpacing,
+    buttonTypeContentDescription: String? = null,
     preview: @Composable () -> Unit,
 ) {
     Column(
         modifier = modifier
+            .semantics {
+                role = Role.Button
+                if (isSelected) selected = true
+                buttonTypeContentDescription?.let { contentDescription = it }
+            }
             .width(buttonWidth)
             .background(
                 color = MaterialTheme.colors.surface,
@@ -113,6 +125,7 @@ fun ReadingPreferencesThemeButton(
     ReadingPreferenceButton(
         label = stringResource(theme.displayNameRes),
         isSelected = isSelected,
+        buttonTypeContentDescription = stringResource(R.string.reader_preferences_screen_theme_label),
         onClick = onClick,
     ) {
         Column(
@@ -148,18 +161,20 @@ fun ReadingPreferencesFontFamilyButton(
         label = stringResource(fontFamily.displayNameRes),
         isSelected = isSelected,
         verticalSpacing = 0.dp,
+        buttonTypeContentDescription = stringResource(R.string.reader_preferences_screen_font_family_label),
         onClick = onClick,
     ) {
         Text(
-            text = stringResource(R.string.reader_preferences_font_family_preview),
+            text = stringResource(R.string.reader_preferences_screen_font_family_preview),
             style = TextStyle(
                 fontFamily = fontFamily.toComposeFontFamily(),
                 fontSize = fontFamilyButtonPreviewSize,
                 fontWeight = FontWeight.Medium,
                 platformStyle = PlatformTextStyle(
                     includeFontPadding = false
                 )
-            )
+            ),
+            modifier = Modifier.clearAndSetSemantics { },
         )
     }
 }

diff --git a/...ss/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesFontSizeSlider.kt b/...ss/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesFontSizeSlider.kt
@@ -26,6 +26,10 @@ import androidx.compose.ui.graphics.compositeOver
 import androidx.compose.ui.layout.Layout
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.semantics
+import androidx.compose.ui.semantics.stateDescription
 import androidx.compose.ui.text.PlatformTextStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.FontFamily
@@ -79,8 +83,17 @@ fun ReadingPreferencesFontSizeSlider(
             val sliderColors = SliderDefaults.colors(
                 thumbColor = MaterialTheme.colors.onSurface,
             )
+
+            val contentDescriptionLabel = stringResource(R.string.reader_preferences_screen_font_size_label)
+            val selectedFontSizeLabel = stringResource(selectedFontSize.displayNameRes)
+
             Slider(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .semantics {
+                        contentDescription = contentDescriptionLabel
+                        stateDescription = selectedFontSizeLabel
+                    },
                 value = selectedIndex.toFloat(),
                 onValueChange = {
                     val newIndex = it.toInt()
@@ -116,13 +129,15 @@ private fun FontSizePreviewLabels(
 ) {
     val sliderPaddingX = with(LocalDensity.current) { totalThumbSize.toPx() / 2 }
     Layout(
-        modifier = Modifier.fillMaxWidth(),
+        modifier = Modifier
+            .fillMaxWidth()
+            .clearAndSetSemantics { },
         content = {
             ReaderReadingPreferences.FontSize.values().forEach { fontSize ->
                 val isSelected = fontSize == selectedFontSize
 
                 Text(
-                    text = stringResource(R.string.reader_preferences_font_size_preview),
+                    text = stringResource(R.string.reader_preferences_screen_font_size_preview),
                     style = TextStyle(
                         fontFamily = previewFontFamily,
                         fontSize = fontSize.value.sp,

diff --git a/...dpress/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesPreviewTag.kt b/...dpress/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesPreviewTag.kt
@@ -14,6 +14,9 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.semantics.role
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.font.FontFamily
 import androidx.core.content.res.ResourcesCompat
 import org.wordpress.android.R
@@ -42,6 +45,9 @@ fun ReadingPreferencesPreviewTag(
 
     Box(
         modifier = Modifier
+            .semantics(mergeDescendants = true) {
+                role = Role.Button
+            }
             .heightIn(min = minHeight)
             .border(
                 width = strokeWidth,

diff --git a/.../wordpress/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesScreen.kt b/.../wordpress/android/ui/reader/views/compose/readingpreferences/ReadingPreferencesScreen.kt
@@ -33,6 +33,8 @@ import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.buildAnnotatedString
@@ -261,6 +263,7 @@ private fun ReadingPreferencesPreviewFeedback(
         )
     }
 
+    val buttonLabel = stringResource(R.string.reader_preferences_screen_preview_text_feedback_label)
     ClickableText(
         text = annotatedString,
         style = textStyle,
@@ -273,6 +276,14 @@ private fun ReadingPreferencesPreviewFeedback(
                     }
                 }
         },
+        modifier = Modifier.semantics {
+            onClick(
+                label = buttonLabel,
+            ) {
+                onSendFeedbackClick()
+                true
+            }
+        },
     )
 }
 

diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
@@ -1705,7 +1705,10 @@
     <!-- translators: %s is replaced with the string in reader_preferences_screen_preview_text_feedback_link, so please translate both in a way that the full final sentence make sense -->
     <string name="reader_preferences_screen_preview_text_feedback">This is a new feature still in development. To help us improve it %s.</string>
     <string name="reader_preferences_screen_preview_text_feedback_link">send your feedback</string>
+    <!-- translators: this is the accessibility label for this action and the verb should likely be translated in the infinitive, here's the usage context in English: "Double tap to 'send your feedback'." -->
+    <string name="reader_preferences_screen_preview_text_feedback_label">send your feedback</string>
 
+    <string name="reader_preferences_screen_theme_label">Color Scheme</string>
     <string name="reader_preferences_theme_system">Default</string>
     <string name="reader_preferences_theme_soft">Soft</string>
     <string name="reader_preferences_theme_sepia">Sepia</string>
@@ -1714,12 +1717,19 @@
     <string name="reader_preferences_theme_h4x0r">h4x0r</string>
     <string name="reader_preferences_theme_candy">Candy</string>
 
+    <string name="reader_preferences_screen_font_family_label">Font</string>
+    <string name="reader_preferences_screen_font_family_preview" translatable="false">Aa</string>
     <string name="reader_preferences_font_family_serif" translatable="false">Serif</string>
     <string name="reader_preferences_font_family_sans" translatable="false">Sans</string>
     <string name="reader_preferences_font_family_mono" translatable="false">Mono</string>
 
-    <string name="reader_preferences_font_family_preview" translatable="false">Aa</string>
-    <string name="reader_preferences_font_size_preview" translatable="false">A</string>
+    <string name="reader_preferences_screen_font_size_label">Font Size</string>
+    <string name="reader_preferences_font_size_extra_small">Extra small</string>
+    <string name="reader_preferences_font_size_small">Small</string>
+    <string name="reader_preferences_font_size_normal">Normal</string>
+    <string name="reader_preferences_font_size_large">Large</string>
+    <string name="reader_preferences_font_size_extra_large">Extra large</string>
+    <string name="reader_preferences_screen_font_size_preview" translatable="false">A</string>
 
     <!-- editor -->
     <string name="editor_post_saved_online">Post saved online</string>