From 99d1482d72f07405cbdf2d9d9bf8734ae18e2181 Mon Sep 17 00:00:00 2001
From: Christopher Ng <chrng8@gmail.com>
Date: Fri, 19 Jan 2024 15:49:00 -0800
Subject: [PATCH] fix(a11y): Fix heading hierarchy in some places

Signed-off-by: Christopher Ng <chrng8@gmail.com>
---
 src/components/Faces/FaceCover.vue | 4 ++--
 src/mixins/FaceCover.scss          | 6 +++++-
 src/views/Albums.vue               | 8 ++++++--
 src/views/Places.vue               | 8 ++++++--
 src/views/SharedAlbums.vue         | 8 ++++++--
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/Faces/FaceCover.vue b/src/components/Faces/FaceCover.vue
index e42480cd36..817f87c1ed 100644
--- a/src/components/Faces/FaceCover.vue
+++ b/src/components/Faces/FaceCover.vue
@@ -32,9 +32,9 @@
 		</div>
 		<div class="face-cover__details">
 			<div v-if="!baseName.match(/^[0-9]+$/)" class="face-cover__details__first-line">
-				<h2 class="face-cover__details__name">
+				<span class="face-cover__details__name">
 					{{ baseName }}
-				</h2>
+				</span>
 			</div>
 			<div v-if="!small" class="face-cover__details__second-line">
 				{{ n('photos', '%n photos', '%n photos', face.props['nbItems']) }}
diff --git a/src/mixins/FaceCover.scss b/src/mixins/FaceCover.scss
index e8a4b70c04..5f40ee3e41 100644
--- a/src/mixins/FaceCover.scss
+++ b/src/mixins/FaceCover.scss
@@ -71,6 +71,10 @@
 		&__name {
 			flex-grow: 1;
 			margin: 0;
+			font-weight: bold;
+			font-size: 20px;
+			line-height: 30px;
+			color: var(--color-main-text);
 		}
 	}
 }
@@ -87,4 +91,4 @@
 		height: 60px !important;
 		--photos-face-width: 60px !important;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/views/Albums.vue b/src/views/Albums.vue
index 8b94dbf70b..70fa562923 100644
--- a/src/views/Albums.vue
+++ b/src/views/Albums.vue
@@ -45,9 +45,9 @@
 				:link="`/albums/${collection.basename}`"
 				:alt-img="t('photos', 'Cover photo for album {albumName}', { albumName: collection.basename })"
 				:cover-url="collection.lastPhoto | coverUrl">
-				<h2 class="album__name">
+				<span class="album__name">
 					{{ collection.basename }}
-				</h2>
+				</span>
 
 				<div slot="subtitle" class="album__details">
 					{{ collection.date }} ⸱ {{ n('photos', '%n item', '%n photos and videos', collection.nbItems,) }}
@@ -160,6 +160,10 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
+		font-size: 20px;
+		margin-bottom: 12px;
+		line-height: 30px;
+		color: var(--color-main-text);
 	}
 }
 
diff --git a/src/views/Places.vue b/src/views/Places.vue
index dc6a41bc76..bd8e288f15 100644
--- a/src/views/Places.vue
+++ b/src/views/Places.vue
@@ -37,9 +37,9 @@
 				:link="`/places/${collection.basename}`"
 				:alt-img="t('photos', 'Cover photo for place {placeName}', { placeName: collection.basename })"
 				:cover-url="collection.lastPhoto | coverUrl">
-				<h2 class="place__name">
+				<span class="place__name">
 					{{ collection.basename }}
-				</h2>
+				</span>
 
 				<div slot="subtitle" class="place__details">
 					{{ n('photos', '%n item', '%n photos and videos', collection.nbItems,) }}
@@ -127,6 +127,10 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
+		font-size: 20px;
+		margin-bottom: 12px;
+		line-height: 30px;
+		color: var(--color-main-text);
 	}
 }
 </style>
diff --git a/src/views/SharedAlbums.vue b/src/views/SharedAlbums.vue
index 74e83b0593..90264cbfb0 100644
--- a/src/views/SharedAlbums.vue
+++ b/src/views/SharedAlbums.vue
@@ -37,9 +37,9 @@
 			:alt-img="t('photos', 'Cover photo for shared album {albumName}.', { albumName: collection.basename })"
 			:data-test="collection.basename"
 			:cover-url="collection.lastPhoto | coverUrl">
-			<h2 class="album__name">
+			<span class="album__name">
 				{{ collection | albumOriginalName }}
-			</h2>
+			</span>
 
 			<div slot="subtitle" class="album__details">
 				{{ collection.date }} ⸱ {{ n('photos', '%n item', '%n photos and videos', collection.nbItems,) }}
@@ -140,6 +140,10 @@ export default {
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
+		font-size: 20px;
+		margin-bottom: 12px;
+		line-height: 30px;
+		color: var(--color-main-text);
 	}
 }
 </style>