Skip to content

Commit 894aefe

Browse files
cynthia-sgcynthia-sg
authored
Some UI improvements (#1819)
* Fix scroll to go back from project to search page Signed-off-by: Cintia Sánchez García <[email protected]> * Add mark to mobile when filters are selected Signed-off-by: Cintia Sánchez García <[email protected]> * Add some aria labels Signed-off-by: Cintia Sánchez García <[email protected]> * Upgrade clo-ui to 0.5.2 Signed-off-by: Cintia Sánchez García <[email protected]> * Update snapshots tests Signed-off-by: Cintia Sánchez García <[email protected]> * Fix some tests Signed-off-by: Cintia Sánchez García <[email protected]> --------- Signed-off-by: Cintia Sánchez García <[email protected]>
1 parent 350e5c5 commit 894aefe

27 files changed

+507
-39
lines changed

‎web/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"dependencies": {
77
"apexcharts": "3.49.0",
88
"classnames": "^2.5.1",
9-
"clo-ui": "https://github.com/cncf/clo-ui.git#v0.5.1",
9+
"clo-ui": "https://github.com/cncf/clo-ui.git#v0.5.2",
1010
"lodash": "^4.17.21",
1111
"moment": "^2.30.1",
1212
"nth-check": "^2.0.1",

‎web/src/layout/common/ProjectDropdown.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@ const ProjectDropdown = (props: Props) => {
4646
e.stopPropagation();
4747
setVisibleDropdown(!visibleDropdown);
4848
}}
49+
aria-label={`Open project options for ${props.projectDisplayName || props.projectName}`}
50+
aria-expanded={visibleDropdown}
51+
aria-haspopup="true"
4952
>
5053
<VscThreeBars />
5154
</button>

‎web/src/layout/common/__snapshots__/ProjectDropdown.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ exports[`ProjectDropdown creates snapshot 1`] = `
66
class="ms-auto position-relative"
77
>
88
<button
9+
aria-expanded="false"
10+
aria-haspopup="true"
11+
aria-label="Open project options for proj"
912
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
1013
data-testid="dropdown-btn"
1114
type="button"

‎web/src/layout/detail/report/OptionCell.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@ describe('OptionCell', () => {
137137
const icons = screen.getAllByTestId('error-icon');
138138
expect(icons).toHaveLength(2);
139139

140-
const dropdown = screen.getByRole('complementary');
140+
const dropdown = screen.getByRole('complementary', { hidden: true });
141141

142142
expect(dropdown).not.toHaveClass('show');
143143

‎web/src/layout/detail/report/Row.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ const Row = (props: Props) => {
3333
const color = getCategoryColor(props.score);
3434
const [options, setOptions] = useState<ReportOption[]>([]);
3535
const tmplsNumber = props.recommendedTemplates ? props.recommendedTemplates.length : 0;
36+
const scoreValue = props.score ?? 0;
37+
const clampedScore = Math.max(0, Math.min(100, scoreValue));
38+
const barWidth = clampedScore === 0 ? 1 : clampedScore;
3639

3740
useEffect(() => {
3841
setOptions(sortChecks(props.data));
@@ -58,7 +61,11 @@ const Row = (props: Props) => {
5861
<div
5962
className={`progress-bar ${styles.progressbar}`}
6063
role="progressbar"
61-
style={{ width: `${props.score || 1}%`, backgroundColor: `var(--clo-${color})` }}
64+
style={{ width: `${barWidth}%`, backgroundColor: `var(--clo-${color})` }}
65+
aria-valuenow={clampedScore}
66+
aria-valuemin={0}
67+
aria-valuemax={100}
68+
aria-label={`${props.label} score for ${props.repoName}`}
6269
/>
6370
</div>
6471
</div>

‎web/src/layout/detail/report/__snapshots__/Row.test.tsx.snap‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ exports[`Row creates snapshot 1`] = `
3636
class="progress rounded-0 progress"
3737
>
3838
<div
39+
aria-label="label score for repo"
40+
aria-valuemax="100"
41+
aria-valuemin="0"
42+
aria-valuenow="90"
3943
class="progress-bar progressbar"
4044
role="progressbar"
4145
style="width: 90%;"

‎web/src/layout/detail/repositories/RepositoryDropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const RepositoryDropdown = (props: Props) => {
3131
<button
3232
data-testid="dropdown-btn"
3333
type="button"
34+
aria-label="Open dropdown menu"
3435
className={`btn btn-sm btn-primary text-white rounded-0 lh-1 ${styles.btn}`}
3536
onClick={(e: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => {
3637
e.preventDefault();

‎web/src/layout/detail/repositories/__snapshots__/RepositoryDropdown.test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ exports[`RepositoryDropdown creates snapshot 1`] = `
66
class="ms-auto position-relative"
77
>
88
<button
9+
aria-label="Open dropdown menu"
910
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
1011
data-testid="dropdown-btn"
1112
type="button"

‎web/src/layout/detail/repositories/__snapshots__/index.test.tsx.snap‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1009,6 +1009,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
10091009
class="ms-auto position-relative"
10101010
>
10111011
<button
1012+
aria-label="Open dropdown menu"
10121013
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
10131014
data-testid="dropdown-btn"
10141015
type="button"
@@ -1118,6 +1119,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
11181119
class="progress rounded-0 progress"
11191120
>
11201121
<div
1122+
aria-label="Documentation score for spec"
1123+
aria-valuemax="100"
1124+
aria-valuemin="0"
1125+
aria-valuenow="60"
11211126
class="progress-bar progressbar"
11221127
role="progressbar"
11231128
style="width: 60%;"
@@ -2510,6 +2515,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
25102515
class="progress rounded-0 progress"
25112516
>
25122517
<div
2518+
aria-label="License score for spec"
2519+
aria-valuemax="100"
2520+
aria-valuemin="0"
2521+
aria-valuenow="80"
25132522
class="progress-bar progressbar"
25142523
role="progressbar"
25152524
style="width: 80%;"
@@ -2904,6 +2913,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
29042913
class="progress rounded-0 progress"
29052914
>
29062915
<div
2916+
aria-label="Best Practices score for spec"
2917+
aria-valuemax="100"
2918+
aria-valuemin="0"
2919+
aria-valuenow="25"
29072920
class="progress-bar progressbar"
29082921
role="progressbar"
29092922
style="width: 25%;"
@@ -3437,6 +3450,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
34373450
class="progress rounded-0 progress"
34383451
>
34393452
<div
3453+
aria-label="Security score for spec"
3454+
aria-valuemax="100"
3455+
aria-valuemin="0"
3456+
aria-valuenow="0"
34403457
class="progress-bar progressbar"
34413458
role="progressbar"
34423459
style="width: 1%;"
@@ -3898,6 +3915,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
38983915
class="ms-auto position-relative"
38993916
>
39003917
<button
3918+
aria-label="Open dropdown menu"
39013919
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
39023920
data-testid="dropdown-btn"
39033921
type="button"
@@ -4007,6 +4025,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
40074025
class="progress rounded-0 progress"
40084026
>
40094027
<div
4028+
aria-label="Documentation score for sdk-go"
4029+
aria-valuemax="100"
4030+
aria-valuemin="0"
4031+
aria-valuenow="90"
40104032
class="progress-bar progressbar"
40114033
role="progressbar"
40124034
style="width: 90%;"
@@ -4539,6 +4561,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
45394561
class="progress rounded-0 progress"
45404562
>
45414563
<div
4564+
aria-label="License score for sdk-go"
4565+
aria-valuemax="100"
4566+
aria-valuemin="0"
4567+
aria-valuenow="100"
45424568
class="progress-bar progressbar"
45434569
role="progressbar"
45444570
style="width: 100%;"
@@ -5072,6 +5098,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
50725098
class="ms-auto position-relative"
50735099
>
50745100
<button
5101+
aria-label="Open dropdown menu"
50755102
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
50765103
data-testid="dropdown-btn"
50775104
type="button"
@@ -5181,6 +5208,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
51815208
class="progress rounded-0 progress"
51825209
>
51835210
<div
5211+
aria-label="Documentation score for sdk-javascript"
5212+
aria-valuemax="100"
5213+
aria-valuemin="0"
5214+
aria-valuenow="90"
51845215
class="progress-bar progressbar"
51855216
role="progressbar"
51865217
style="width: 90%;"
@@ -5713,6 +5744,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
57135744
class="progress rounded-0 progress"
57145745
>
57155746
<div
5747+
aria-label="License score for sdk-javascript"
5748+
aria-valuemax="100"
5749+
aria-valuemin="0"
5750+
aria-valuenow="100"
57165751
class="progress-bar progressbar"
57175752
role="progressbar"
57185753
style="width: 100%;"
@@ -6246,6 +6281,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
62466281
class="ms-auto position-relative"
62476282
>
62486283
<button
6284+
aria-label="Open dropdown menu"
62496285
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
62506286
data-testid="dropdown-btn"
62516287
type="button"
@@ -6355,6 +6391,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
63556391
class="progress rounded-0 progress"
63566392
>
63576393
<div
6394+
aria-label="Documentation score for sdk-csharp"
6395+
aria-valuemax="100"
6396+
aria-valuemin="0"
6397+
aria-valuenow="70"
63586398
class="progress-bar progressbar"
63596399
role="progressbar"
63606400
style="width: 70%;"
@@ -6887,6 +6927,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
68876927
class="progress rounded-0 progress"
68886928
>
68896929
<div
6930+
aria-label="License score for sdk-csharp"
6931+
aria-valuemax="100"
6932+
aria-valuemin="0"
6933+
aria-valuenow="100"
68906934
class="progress-bar progressbar"
68916935
role="progressbar"
68926936
style="width: 100%;"
@@ -7420,6 +7464,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
74207464
class="ms-auto position-relative"
74217465
>
74227466
<button
7467+
aria-label="Open dropdown menu"
74237468
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
74247469
data-testid="dropdown-btn"
74257470
type="button"
@@ -7529,6 +7574,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
75297574
class="progress rounded-0 progress"
75307575
>
75317576
<div
7577+
aria-label="Documentation score for sdk-java"
7578+
aria-valuemax="100"
7579+
aria-valuemin="0"
7580+
aria-valuenow="70"
75327581
class="progress-bar progressbar"
75337582
role="progressbar"
75347583
style="width: 70%;"
@@ -8061,6 +8110,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
80618110
class="progress rounded-0 progress"
80628111
>
80638112
<div
8113+
aria-label="License score for sdk-java"
8114+
aria-valuemax="100"
8115+
aria-valuemin="0"
8116+
aria-valuenow="100"
80648117
class="progress-bar progressbar"
80658118
role="progressbar"
80668119
style="width: 100%;"
@@ -8594,6 +8647,7 @@ exports[`RepositoriesList creates snapshot 1`] = `
85948647
class="ms-auto position-relative"
85958648
>
85968649
<button
8650+
aria-label="Open dropdown menu"
85978651
class="btn btn-sm btn-primary text-white rounded-0 lh-1 btn"
85988652
data-testid="dropdown-btn"
85998653
type="button"
@@ -8703,6 +8757,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
87038757
class="progress rounded-0 progress"
87048758
>
87058759
<div
8760+
aria-label="Documentation score for sdk-python"
8761+
aria-valuemax="100"
8762+
aria-valuemin="0"
8763+
aria-valuenow="70"
87068764
class="progress-bar progressbar"
87078765
role="progressbar"
87088766
style="width: 70%;"
@@ -9235,6 +9293,10 @@ exports[`RepositoriesList creates snapshot 1`] = `
92359293
class="progress rounded-0 progress"
92369294
>
92379295
<div
9296+
aria-label="License score for sdk-python"
9297+
aria-valuemax="100"
9298+
aria-valuemin="0"
9299+
aria-valuenow="100"
92389300
class="progress-bar progressbar"
92399301
role="progressbar"
92409302
style="width: 100%;"

‎web/src/layout/search/RepositorySection.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ describe('RepositorySection', () => {
7070

7171
const content = screen.getByText('Repositories');
7272
expect(content).toBeInTheDocument();
73-
const dropdown = screen.getByRole('complementary');
73+
const dropdown = screen.getByRole('complementary', { hidden: true });
7474

7575
expect(dropdown).not.toHaveClass('show');
7676

0 commit comments

Comments
 (0)