Merge pull request #41439 from nextcloud/fix/41310-Create_possibility_to_open_an_app_details_via_keyboard

Add link for opening app details

Author: ShGKme

apps/settings/css/settings.css

@@ -650,14 +650,6 @@ span.version {
 		margin: 5px 0;
 	}
 
-	.app-name, .app-image * {
-		cursor: pointer;
-	}
-
-	.app-summary {
-		opacity: .7;
-	}
-
 	.app-image-icon .icon-settings-dark {
 		width: 100%;
 		height: 150px;
@@ -671,6 +663,10 @@ span.version {
 
 	.actions {
 		margin-top: 10px;
+
+		button {
+			margin: 10px 0;
+		}
 	}
 }
 
@@ -881,10 +877,6 @@ span.version {
 	$toolbar-padding: 8px;
 	$toolbar-height: 44px + $toolbar-padding * 2;
 
-	.section {
-		cursor: pointer;
-	}
-
 	.app-list-move {
 		transition: transform 1s;
 	}

apps/settings/css/settings.css.map

@@ -23,12 +23,10 @@
 <template>
 	<component :is="listView ? `tr` : `li`"
 		class="section"
-		:class="{ selected: isSelected }"
-		@click="showAppDetails">
+		:class="{ selected: isSelected }">
 		<component :is="dataItemTag"
 			class="app-image app-image-icon"
-			:headers="getDataItemHeaders(`app-table-col-icon`)"
-			@click="showAppDetails">
+			:headers="getDataItemHeaders(`app-table-col-icon`)">
 			<div v-if="(listView && !app.preview) || (!listView && !screenshotLoaded)" class="icon-settings-dark" />
 
 			<svg v-else-if="listView && app.preview"
@@ -48,9 +46,11 @@
 		</component>
 		<component :is="dataItemTag"
 			class="app-name"
-			:headers="getDataItemHeaders(`app-table-col-name`)"
-			@click="showAppDetails">
-			{{ app.name }}
+			:headers="getDataItemHeaders(`app-table-col-name`)">
+			<router-link class="app-name--link" :to="{ name: 'apps-details',	params: { category: category, id: app.id }}"
+				:aria-label="t('settings', 'Show details for {appName} app', { appName:app.name })">
+				{{ app.name }}
+			</router-link>
 		</component>
 		<component :is="dataItemTag"
 			v-if="!listView"
@@ -185,19 +185,6 @@ export default {
 
 	},
 	methods: {
-		async showAppDetails(event) {
-			if (event.currentTarget.tagName === 'INPUT' || event.currentTarget.tagName === 'A') {
-				return
-			}
-			try {
-				await this.$router.push({
-					name: 'apps-details',
-					params: { category: this.category, id: this.app.id },
-				})
-			} catch (e) {
-				// we already view this app
-			}
-		},
 		prefix(prefix, content) {
 			return prefix + '_' + content
 		},
@@ -217,4 +204,14 @@ export default {
 .app-image img {
 	width: 100%;
 }
+
+.app-name--link::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
 </style>

apps/settings/css/settings.scss

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<img :src="scoreImage" class="app-score-image">
+	<img :src="scoreImage" :alt="t('settings', 'Rating: {score}/10', {score:appScore})" class="app-score-image">
 </template>
 <script>
 import { imagePath } from '@nextcloud/router'
@@ -30,11 +30,13 @@ export default {
 	name: 'AppScore',
 	props: ['score'],
 	computed: {
+		appScore() {
+			return Math.round(this.score * 10)
+		},
 		scoreImage() {
-			const score = Math.round(this.score * 10)
-			const imageName = 'rating/s' + score + '.svg'
+			const imageName = 'rating/s' + this.appScore + '.svg'
 			return imagePath('core', imageName)
-		},
+		}
 	},
 }
 </script>

apps/settings/src/components/AppList/AppItem.vue

@@ -125,7 +125,7 @@ describe('Settings: App management', { testIsolation: true }, () => {
 
 	it('View app details', () => {
 		// When I click on the "QA testing" app
-		cy.get('#apps-list').contains('tr', 'QA testing').click({ force: true })
+		cy.get('#apps-list').contains('a', 'QA testing').click({ force: true })
 		// I see that the app details are shown
 		cy.get('#app-sidebar-vue')
 			.should('be.visible')