fix(a11y): Fix heading hierarchy in some places

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud · Feb 2, 2024 · 0face99 · 0face99
1 parent f47d336
commit 0face99
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git 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
@@ -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;
 	}
-}
+}
diff --git 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
@@ -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
@@ -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>