Merge pull request #1007 from guraooo/improve-a11y-profile-card

Improved accessibility on the ProfileCardScreen
DroidKaigi · Sep 8, 2024 · e4ac971 · e4ac971
2 parents 2d83ed6 + 6047fd8
commit e4ac971
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/feature/profilecard/src/commonMain/composeResources/values-ja/strings.xml b/feature/profilecard/src/commonMain/composeResources/values-ja/strings.xml
@@ -10,9 +10,12 @@
     <string name="link">リンク</string>
     <string name="image">画像</string>
     <string name="add_image">画像を追加</string>
+    <string name="delete">削除する</string>
     <string name="enter_validate_format">%1$sを入力してください</string>
     <string name="add_validate_format">%1$sを追加してください</string>
     <string name="url_is_invalid">URLの形式が正しくありません</string>
+    <string name="flip">裏返す</string>
+    <string name="qrcode">QRコード</string>
     <string name="share">共有する</string>
     <string name="edit">編集する</string>
     <string name="share_description">DroidKaigiのプロフィールカードを作成しました！イベントでつながりましょう。#DroidKaigi</string>

diff --git a/feature/profilecard/src/commonMain/composeResources/values/strings.xml b/feature/profilecard/src/commonMain/composeResources/values/strings.xml
@@ -10,9 +10,12 @@
     <string name="link">Link</string>
     <string name="image">Image</string>
     <string name="add_image">Add Image</string>
+    <string name="delete">Delete</string>
     <string name="enter_validate_format">Please enter a %1$s</string>
     <string name="add_validate_format">Please add %1$s</string>
     <string name="url_is_invalid">The URL format is incorrect</string>
+    <string name="flip">Flip</string>
+    <string name="qrcode">QR code</string>
     <string name="share">Share</string>
     <string name="edit">Edit</string>
     <string name="share_description">Check out my DroidKaigi Profile Card! Let's connect at the event. #DroidKaigi</string>

diff --git a/...ard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/ProfileCardScreen.kt b/...ard/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/ProfileCardScreen.kt
@@ -3,7 +3,6 @@ package io.github.droidkaigi.confsched.profilecard
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -21,6 +20,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.selection.selectable
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.KeyboardActions
@@ -97,6 +97,7 @@ import com.preat.peekaboo.image.picker.toImageBitmap
 import conference_app_2024.feature.profilecard.generated.resources.add_image
 import conference_app_2024.feature.profilecard.generated.resources.card_type
 import conference_app_2024.feature.profilecard.generated.resources.create_card
+import conference_app_2024.feature.profilecard.generated.resources.delete
 import conference_app_2024.feature.profilecard.generated.resources.edit
 import conference_app_2024.feature.profilecard.generated.resources.icon_share
 import conference_app_2024.feature.profilecard.generated.resources.image
@@ -627,7 +628,7 @@ private fun ImagePickerWithError(
                     Icon(
                         modifier = Modifier.padding(4.dp),
                         imageVector = Icons.Default.Close,
-                        contentDescription = null,
+                        contentDescription = stringResource(ProfileCardRes.string.delete),
                     )
                 }
             }
@@ -700,12 +701,12 @@ private fun CardTypeImage(
 
     Image(
         painter = painterResource(ProfileCardRes.drawable.card_type),
-        contentDescription = null,
+        contentDescription = cardType.toString(),
         modifier = modifier
             .selectedBorder(isSelected, selectedBorderColor, painter)
             .clip(RoundedCornerShape(2.dp))
             .background(colorMap[cardType]!!)
-            .clickable { onClickImage(cardType) }
+            .selectable(isSelected) { onClickImage(cardType) }
             .padding(top = 36.dp, start = 30.dp, end = 30.dp, bottom = 36.dp),
     )
 }
@@ -829,17 +830,15 @@ internal fun CardScreen(
                             .testTag(ProfileCardShareButtonTestTag)
                             .padding(horizontal = 16.dp, vertical = 8.dp),
                     ) {
-                        val shareLabel = stringResource(ProfileCardRes.string.share)
-
                         Icon(
                             painter = painterResource(ProfileCardRes.drawable.icon_share),
-                            contentDescription = shareLabel,
+                            contentDescription = null,
                             tint = Color.Black,
                             modifier = Modifier.size(18.dp),
                         )
                         Spacer(Modifier.width(8.dp))
                         Text(
-                            text = shareLabel,
+                            text = stringResource(ProfileCardRes.string.share),
                             modifier = Modifier.padding(8.dp),
                             style = MaterialTheme.typography.labelLarge,
                             color = Color.Black,

diff --git a/...rd/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/FlipCard.kt b/...rd/src/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/FlipCard.kt
@@ -23,11 +23,14 @@ import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
+import conference_app_2024.feature.profilecard.generated.resources.flip
 import io.github.droidkaigi.confsched.droidkaigiui.WithDeviceOrientation
+import io.github.droidkaigi.confsched.profilecard.ProfileCardRes
 import io.github.droidkaigi.confsched.profilecard.ProfileCardUiState.Card
 import io.github.droidkaigi.confsched.profilecard.hologramaticEffect
 import io.github.droidkaigi.confsched.profilecard.tiltEffect
 import kotlinx.coroutines.delay
+import org.jetbrains.compose.resources.stringResource
 
 const val ProfileCardFlipCardTestTag = "ProfileCardFlipCardTestTag"
 
@@ -57,7 +60,9 @@ internal fun FlipCard(
             modifier = modifier
                 .testTag(ProfileCardFlipCardTestTag)
                 .size(width = 300.dp, height = 380.dp)
-                .clickable { isFlipped = isFlipped.not() }
+                .clickable(onClickLabel = stringResource(ProfileCardRes.string.flip)) {
+                    isFlipped = isFlipped.not()
+                }
                 .draggable(
                     orientation = Orientation.Horizontal,
                     state = rememberDraggableState { delta ->

diff --git a/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/FlipCardBack.kt b/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/profilecard/component/FlipCardBack.kt
@@ -21,6 +21,7 @@ import conference_app_2024.feature.profilecard.generated.resources.card_back_ora
 import conference_app_2024.feature.profilecard.generated.resources.card_back_pink
 import conference_app_2024.feature.profilecard.generated.resources.card_back_white
 import conference_app_2024.feature.profilecard.generated.resources.card_back_yellow
+import conference_app_2024.feature.profilecard.generated.resources.qrcode
 import io.github.droidkaigi.confsched.designsystem.theme.KaigiTheme
 import io.github.droidkaigi.confsched.model.ProfileCard
 import io.github.droidkaigi.confsched.model.ProfileCardType.Flamingo
@@ -34,6 +35,7 @@ import io.github.droidkaigi.confsched.profilecard.ProfileCardRes
 import io.github.droidkaigi.confsched.profilecard.ProfileCardUiState.Card
 import io.github.droidkaigi.confsched.profilecard.toCardUiState
 import org.jetbrains.compose.resources.painterResource
+import org.jetbrains.compose.resources.stringResource
 import org.jetbrains.compose.ui.tooling.preview.Preview
 import qrcode.QRCode
 
@@ -70,7 +72,7 @@ internal fun FlipCardBack(
         )
         Image(
             painter = painter,
-            contentDescription = null,
+            contentDescription = stringResource(ProfileCardRes.string.qrcode),
             modifier = Modifier.size(160.dp),
         )
     }