Skip to content

Commit 1699267

Browse files
BiancaMihailaBiancaMihaila
authored
feat: Update keyboard behaviour on CentreAlignedScreen (#412)
[Tutorial for writing good descriptions]: https://cbea.ms/git-commit/ [//]: # (Be mindful that the PR title also needs to follow conventional commit standards) # DCMAW-18936: Update keyboard behaviour on CentreAlignedScreen - up/ down arrow includes scroll and clickable elemnts in the order they appear on the screen or how the layout is done - tab only recognised and sees clickable elements [//]: # (e.g. "- Create 'androidLibrary' Gradle module.") ## Evidence of the change **Up/ Down Arrow** [Screen_recording_20260407_152738.webm](https://github.com/user-attachments/assets/ec586bd6-3833-41f4-b1e2-8d34702d3398) **Tab** [Screen_recording_20260407_152852.webm](https://github.com/user-attachments/assets/3bb54cfd-a20f-4b89-ab06-c0a0663eaa17) [//]: # (Screenshots / uploaded videos go here) ## Checklist ### Before creating the pull request - [x] Commit messages that conform to conventional commit messages. - [x] Ran the app locally ensuring it builds. - [x] Tests pass locally. - [x] Pull request has a clear title with a short description about the feature or update. - [x] Created a `draft` pull request if it's not ready for review. ### Before the CODEOWNERS review the pull request - [x] Complete all Acceptance Criteria within Jira ticket. - [x] Self-review code. - [x] Successfully run changes on a testing device. - [x] Complete automated Testing: * [x] Unit Tests. * [x] Integration Tests. * [x] Instrumentation / Emulator Tests. - [x] Review [Accessibility considerations]. - [ ] Handle PR comments. ### Before merging the pull request - [ ] [Sonar cloud report] passes inspections for your PR. - [ ] Resolve all comments. [Sonar cloud report]: https://sonarcloud.io/project/overview?id=di-mobile-android-ui [Accessibility considerations]: https://developer.android.com/guide/topics/ui/accessibility/testing
1 parent 0ad2bfd commit 1699267

6 files changed

Lines changed: 149 additions & 3 deletions

File tree

‎patterns/src/main/java/uk/gov/android/ui/patterns/centrealignedscreen/CentreAlignedScreen.kt‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package uk.gov.android.ui.patterns.centrealignedscreen
22

3+
import android.annotation.SuppressLint
34
import androidx.compose.foundation.Image
45
import androidx.compose.foundation.background
56
import androidx.compose.foundation.layout.Arrangement
@@ -9,15 +10,17 @@ import androidx.compose.foundation.layout.fillMaxWidth
910
import androidx.compose.foundation.layout.padding
1011
import androidx.compose.foundation.lazy.LazyColumn
1112
import androidx.compose.foundation.lazy.LazyListScope
13+
import androidx.compose.foundation.lazy.LazyListState
14+
import androidx.compose.foundation.lazy.rememberLazyListState
1215
import androidx.compose.material3.MaterialTheme.colorScheme
1316
import androidx.compose.material3.Text
1417
import androidx.compose.runtime.Composable
1518
import androidx.compose.ui.Alignment
1619
import androidx.compose.ui.Modifier
1720
import androidx.compose.ui.graphics.vector.ImageVector
1821
import androidx.compose.ui.layout.SubcomposeLayout
22+
import androidx.compose.ui.platform.LocalConfiguration
1923
import androidx.compose.ui.platform.LocalDensity
20-
import androidx.compose.ui.platform.LocalWindowInfo
2124
import androidx.compose.ui.platform.testTag
2225
import androidx.compose.ui.res.painterResource
2326
import androidx.compose.ui.res.stringResource
@@ -43,6 +46,7 @@ import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenDefault
4346
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenDefaults.NoPadding
4447
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenDefaults.VerticalPadding
4548
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenTestTag.BODY_LAZY_COLUMN_TEST_TAG
49+
import uk.gov.android.ui.patterns.leftalignedscreen.bringIntoView
4650
import uk.gov.android.ui.patterns.utils.clearListSemanticsForTalkBack
4751
import uk.gov.android.ui.theme.m3.GdsTheme
4852
import uk.gov.android.ui.theme.m3.Typography
@@ -74,6 +78,7 @@ private const val ONE_THIRD = 1f / 3f
7478
* @param secondaryButton primary action button. Use of [GdsButton] composable is recommended (optional).
7579
* @param tertiaryButton primary action button. Use of [GdsButton] composable is recommended (optional).
7680
*/
81+
@SuppressLint("ConfigurationScreenWidthHeight")
7782
@Suppress("LongMethod")
7883
@SuppressWarnings("squid:S107")
7984
@Composable
@@ -87,7 +92,7 @@ fun CentreAlignedScreen(
8792
secondaryButton: (@Composable () -> Unit)? = null,
8893
tertiaryButton: (@Composable () -> Unit)? = null,
8994
) {
90-
val screenHeight = LocalWindowInfo.current.containerSize.height.dp
95+
val screenHeight = LocalConfiguration.current.screenHeightDp.dp
9196
val thresholdHeight = screenHeight * ONE_THIRD
9297
val density = LocalDensity.current
9398

@@ -292,12 +297,15 @@ private fun MainContent(
292297
arrangement: Arrangement.Vertical =
293298
Arrangement.spacedBy(VerticalPadding, Alignment.CenterVertically),
294299
) {
300+
val scrollState: LazyListState = rememberLazyListState()
295301
LazyColumn(
296302
verticalArrangement = arrangement,
297303
modifier = modifier
298304
.fillMaxSize()
305+
.bringIntoView(scrollState)
299306
.testTag(BODY_LAZY_COLUMN_TEST_TAG)
300307
.clearListSemanticsForTalkBack(),
308+
state = scrollState,
301309
) {
302310
image?.let {
303311
item { image(HorizontalPadding) }

‎patterns/src/test/snapshots/images/uk.gov.android.ui.patterns.centrealignedscreen_GdsCentreAlignedScreenshotTest_testScreenshot[18_GdsContent].png‎

697 Bytes
Loading

‎patterns/src/test/snapshots/images/uk.gov.android.ui.patterns.centrealignedscreen_GdsCentreAlignedScreenshotTest_testScreenshot[19_GdsContent].png‎

638 Bytes
Loading

‎uitestwrapper/src/main/java/uk/gov/android/ui/testwrapper/patterns/Patterns.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import uk.gov.android.ui.componentsv2.heading.GdsHeadingAlignment
1515
import uk.gov.android.ui.componentsv2.heading.GdsHeadingStyle
1616
import uk.gov.android.ui.patterns.loadingscreen.LoadingScreen
1717
import uk.gov.android.ui.testwrapper.DetailItem
18+
import uk.gov.android.ui.testwrapper.patterns.centrealignedscreen.CentreAlignedScreenDemo
19+
import uk.gov.android.ui.testwrapper.patterns.centrealignedscreen.CentreAlignedScrollableScreenDemo
1820
import uk.gov.android.ui.testwrapper.patterns.leftalignedscreen.LeftAlignedScreenDemo
1921
import uk.gov.android.ui.testwrapper.patterns.leftalignedscreen.LeftAlignedScreenNoTitleDemo
2022
import uk.gov.android.ui.theme.smallPadding
@@ -55,9 +57,13 @@ fun PatternDetail(
5557
LOADING_SCREEN -> LoadingScreen()
5658
LEFT_ALIGNED_SCREEN -> LeftAlignedScreenDemo()
5759
LEFT_ALIGNED_SCREEN_NO_TITLE -> LeftAlignedScreenNoTitleDemo()
60+
CENTRED_ALIGNED_SCREEN -> CentreAlignedScreenDemo()
61+
CENTRED_ALIGNED_SCROLLABLE_SCREEN -> CentreAlignedScrollableScreenDemo()
5862
}
5963
}
6064

6165
const val LOADING_SCREEN = "loadingScreen"
6266
const val LEFT_ALIGNED_SCREEN = "leftAlignedScreen"
6367
const val LEFT_ALIGNED_SCREEN_NO_TITLE = "leftAlignedScreenNoTitle"
68+
const val CENTRED_ALIGNED_SCREEN = "centreAlignedScreen"
69+
const val CENTRED_ALIGNED_SCROLLABLE_SCREEN = "centreAlignedScrollableScreen"

‎uitestwrapper/src/main/java/uk/gov/android/ui/testwrapper/patterns/PatternsDestination.kt‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ sealed class PatternsDestination(
6565

6666
fun entries() =
6767
listOf(
68-
Placeholder(text = "Center Aligned Screen"),
6968
Placeholder(text = "Dialog"),
7069
Placeholder(text = "Error Screen"),
7170
DetailedItem(
@@ -80,6 +79,28 @@ sealed class PatternsDestination(
8079
label = LEFT_ALIGNED_SCREEN_NO_TITLE,
8180
name = "Left Aligned Screen No Title",
8281
),
82+
DetailItem(
83+
label = CENTRED_ALIGNED_SCREEN,
84+
name = "Centred Aligned Screen",
85+
),
86+
DetailItem(
87+
label = CENTRED_ALIGNED_SCROLLABLE_SCREEN,
88+
name = "Centred Aligned Scrollable Screen",
89+
),
90+
),
91+
),
92+
DetailedItem(
93+
text = "Centre Aligned Screen",
94+
items =
95+
listOf(
96+
DetailItem(
97+
label = CENTRED_ALIGNED_SCREEN,
98+
name = "Centred Aligned Screen",
99+
),
100+
DetailItem(
101+
label = CENTRED_ALIGNED_SCROLLABLE_SCREEN,
102+
name = "Centred Aligned Scrollable Screen",
103+
),
83104
),
84105
),
85106
DetailedItem(

‎uitestwrapper/src/main/java/uk/gov/android/ui/testwrapper/patterns/centrealignedscreen/CentreAlignedScreenDemo.kt‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
package uk.gov.android.ui.testwrapper.patterns.centrealignedscreen
2+
3+
import android.annotation.SuppressLint
4+
import androidx.compose.runtime.Composable
5+
import kotlinx.collections.immutable.PersistentList
6+
import kotlinx.collections.immutable.persistentListOf
7+
import uk.gov.android.ui.componentsv2.list.ListTitle
8+
import uk.gov.android.ui.componentsv2.list.TitleType
9+
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreen
10+
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenBodyContent
11+
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenButton
12+
import uk.gov.android.ui.patterns.centrealignedscreen.CentreAlignedScreenImage
13+
import uk.gov.android.ui.componentsv2.R as componentsR
14+
15+
@SuppressLint("ComposeModifierMissing")
16+
@Composable
17+
fun CentreAlignedScreenDemo() {
18+
CentreAlignedScreen(
19+
title = "Centre Aligned Screen",
20+
image = CentreAlignedScreenImage(
21+
componentsR.drawable.ic_vector_image,
22+
"Description",
23+
),
24+
body = persistentListOf(
25+
CentreAlignedScreenBodyContent.Text(
26+
"Centre aligned screen allows you to display information with a centered image and text.",
27+
),
28+
CentreAlignedScreenBodyContent.BulletList(
29+
title = ListTitle(
30+
text = "Bullet list",
31+
titleType = TitleType.Text,
32+
),
33+
items = persistentListOf(
34+
"This is a bullet point",
35+
"This is another bullet point",
36+
),
37+
),
38+
),
39+
supportingText = "This is supporting text",
40+
primaryButton = CentreAlignedScreenButton(
41+
text = "Primary Button",
42+
onClick = {},
43+
),
44+
secondaryButton = CentreAlignedScreenButton(
45+
text = "Secondary Button",
46+
onClick = {},
47+
),
48+
)
49+
}
50+
51+
@SuppressLint("ComposeModifierMissing")
52+
@Composable
53+
fun CentreAlignedScrollableScreenDemo() {
54+
CentreAlignedScreen(
55+
title = "Centre Aligned Screen",
56+
image = CentreAlignedScreenImage(
57+
componentsR.drawable.ic_vector_image,
58+
"Description",
59+
),
60+
body = persistentListOf(
61+
CentreAlignedScreenBodyContent.Text(
62+
"Centre aligned screen allows you to display information with a centered image and text.",
63+
),
64+
CentreAlignedScreenBodyContent.BulletList(
65+
title = ListTitle(
66+
text = "Bullet list",
67+
titleType = TitleType.Text,
68+
),
69+
items = listItems(),
70+
),
71+
),
72+
supportingText = "This is supporting text",
73+
primaryButton = CentreAlignedScreenButton(
74+
text = "Primary Button",
75+
onClick = {},
76+
),
77+
secondaryButton = CentreAlignedScreenButton(
78+
text = "Secondary Button",
79+
onClick = {},
80+
),
81+
)
82+
}
83+
84+
private fun listItems(): PersistentList<String> {
85+
return persistentListOf(
86+
"Item one",
87+
"Item two",
88+
"Item three",
89+
"Item four",
90+
"Item five",
91+
"Item six",
92+
"Item seven",
93+
"Item eight",
94+
"Item nine",
95+
"Item ten",
96+
"Item eleven",
97+
"Item twelve",
98+
"Item thirteen",
99+
"Item fourteen",
100+
"Item fifteen",
101+
"Item sixteen",
102+
"Item seventeen",
103+
"Item eighteen",
104+
"Item nineteen",
105+
"Item twenty",
106+
"Item twenty one",
107+
"Item twenty two",
108+
"Item twenty three",
109+
"Item twenty four",
110+
)
111+
}

0 commit comments

Comments
 (0)