Merge pull request #37517 from nextcloud/fix/36919-create-semantic-list-for-comments-in_comments_tab

Create semantic list for comments in comments tab

apps/comments/src/components/Comment.vue

@@ -20,7 +20,8 @@
   -
   -->
 <template>
-	<div v-show="!deleted"
+	<component :is="tag"
+		v-show="!deleted"
 		:class="{'comment--loading': loading}"
 		class="comment">
 		<!-- Comment header toolbar -->
@@ -97,7 +98,7 @@
 				@click="onExpand"
 				v-html="renderedContent" />
 		</div>
-	</div>
+	</component>
 </template>
 
 <script>
@@ -162,6 +163,11 @@ export default {
 			type: Function,
 			required: true,
 		},
+
+		tag: {
+			type: String,
+			default: 'div',
+		},
 	},
 
 	data() {

apps/comments/src/views/Comments.vue

@@ -40,18 +40,19 @@
 					<MessageReplyTextIcon />
 				</template>
 			</NcEmptyContent>
-
-			<!-- Comments -->
-			<Comment v-for="comment in comments"
-				v-else
-				:key="comment.props.id"
-				v-bind="comment.props"
-				:auto-complete="autoComplete"
-				:message.sync="comment.props.message"
-				:ressource-id="ressourceId"
-				:user-data="genMentionsData(comment.props.mentions)"
-				class="comments__list"
-				@delete="onDelete" />
+			<ul v-else>
+				<!-- Comments -->
+				<Comment v-for="comment in comments"
+					:key="comment.props.id"
+					tag="li"
+					v-bind="comment.props"
+					:auto-complete="autoComplete"
+					:message.sync="comment.props.message"
+					:ressource-id="ressourceId"
+					:user-data="genMentionsData(comment.props.mentions)"
+					class="comments__list"
+					@delete="onDelete" />
+			</ul>
 
 			<!-- Loading more message -->
 			<div v-if="loading && !isFirstLoading" class="comments__info icon-loading" />