Sonar fixes (#166)

* Fix scope declaration in lang

* Rename event listener composition

* Rename compositions

* Don't export app from main

* Fix naming smell

* Add roles to asides

* Add rel to a tag in logo

* exclude storybook files from sonar cloud

* Fix a11y issues

sonar-project.properties

@@ -1,14 +1,13 @@
 sonar.organization=directus
 sonar.projectKey=app-next
 
-sonar.sources=./src
-sonar.exclusions=./src/**/*.test.ts,./src/**/*.story.ts
-sonar.tests=./src
+sonar.sources=src
+sonar.exclusions=src/**/*.story.ts
+sonar.test.sources=src/**/*.test.ts
+sonar.test.exclusions=src/**/*.test.ts
 
-sonar.test.inclusions=./src/**/*.test.ts
-
-sonar.javascript.lcov.reportPaths=./coverage/lcov.info
-sonar.testExecutionReportPaths=./coverage/sonar.xml
+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+sonar.testExecutionReportPaths=coverage/sonar.xml
 
 sonar.pullrequest.provider=github
 sonar.pullrequest.github.repository=directus/app-next

src/components/v-table/_table-header.vue

@@ -1,10 +1,10 @@
 <template>
 	<thead class="v-table_table-header" :class="{ dragging }">
 		<tr :class="{ fixed }">
-			<th v-if="showManualSort" class="manual cell" @click="toggleManualSort">
+			<th v-if="showManualSort" class="manual cell" @click="toggleManualSort" scope="col">
 				<v-icon name="sort" class="drag-handle" small />
 			</th>
-			<th v-if="showSelect" class="select cell">
+			<th v-if="showSelect" class="select cell" scope="col">
 				<v-checkbox
 					:inputValue="allItemsSelected"
 					:indeterminate="someItemsSelected"
@@ -17,6 +17,7 @@
 				:class="getClassesForHeader(header)"
 				:style="getStyleForHeader(header, index)"
 				class="cell"
+				scope="col"
 			>
 				<div class="content" @click="changeSort(header)">
 					<slot :name="`header.${header.value}`" :header="header">{{ header.text }}</slot>
@@ -35,7 +36,7 @@
 
 <script lang="ts">
 import { defineComponent, ref, PropType } from '@vue/composition-api';
-import useEventListener from '@/compositions/event-listener';
+import useEventListener from '@/compositions/use-event-listener';
 import { Header, Sort } from './types';
 import { throttle, clone } from 'lodash';
 

src/components/v-table/v-table.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="v-table" :class="{ loading }">
-		<table>
+		<table :summary="_headers.map(header => header.text).join(', ')">
 			<table-header
 				:headers.sync="_headers"
 				:sort.sync="_sort"
@@ -17,7 +17,7 @@
 				</template>
 			</table-header>
 			<thead v-if="loading" class="loading-indicator">
-				<th :colspan="_headers.length">
+				<th :colspan="_headers.length" scope="colgroup">
 					<v-progress-linear indeterminate v-if="loading" />
 				</th>
 			</thead>

src/compositions/readme.md

@@ -21,7 +21,7 @@ The composition removes the event handler whenever the component is unmounted.
 
 ```js
 import { defineComponent } from '@vue/composition-api';
-import useEventListener from '@/compositions/event-listener';
+import useEventListener from '@/compositions/use-event-listener';
 
 export default defineComponent({
 	setup() {
@@ -66,7 +66,7 @@ Returns ref string time from current datetime based on date-fns formatDistance.
 
 ```js
 import { defineComponent } from '@vue/composition-api';
-import useTimeFromNow from '@/compositions/time-from-now';
+import useTimeFromNow from '@/compositions/use-time-from-now';
 
 export default defineComponent({
 	setup() {

src/compositions/use-event-listener.test.ts

@@ -1,5 +1,5 @@
 import { ref } from '@vue/composition-api';
-import useEventListener from './event-listener';
+import useEventListener from './use-event-listener';
 import mountComposition from '../../.jest/mount-composition';
 
 describe('Compositions / Event Listener', () => {

src/compositions/use-time-from-now.test.ts

@@ -1,5 +1,5 @@
 import { Ref } from '@vue/composition-api';
-import useTimeFromNow from './time-from-now';
+import useTimeFromNow from './use-time-from-now';
 import mountComposition from '../../.jest/mount-composition';
 import mockdate from 'mockdate';
 

src/compositions/use-time-from-now.ts

@@ -1,7 +1,7 @@
 import { onMounted, onUnmounted, ref } from '@vue/composition-api';
 import formatDistance from 'date-fns/formatDistance';
 
-export default function useFormatDistance(date: Date | number, autoUpdate = 60000) {
+export default function useTimeFromNow(date: Date | number, autoUpdate = 60000) {
 	let interval: number;
 
 	const formatOptions = {

src/compositions/use-window-size.test.ts

@@ -1,5 +1,5 @@
 import { watch } from '@vue/composition-api';
-import useWindowSize from './window-size';
+import useWindowSize from './use-window-size';
 import mountComposition from '../../.jest/mount-composition';
 
 describe('Compositions / Window Size', () => {

src/lang/index.ts

@@ -5,7 +5,7 @@ import { merge } from 'lodash';
 import enUSBase from './en-US/index.json';
 import enUSInterfaces from './en-US/interfaces.json';
 import enUSLayouts from './en-US/layouts.json';
-import dateTimeFormats from './en-US/date-format.json';
+import defaultDateTimeFormats from './en-US/date-format.json';
 
 Vue.use(VueI18n);
 
@@ -16,7 +16,7 @@ export const i18n = new VueI18n({
 		'en-US': merge(enUSBase, enUSInterfaces, enUSLayouts)
 	},
 	dateTimeFormats: {
-		'en-US': dateTimeFormats
+		'en-US': defaultDateTimeFormats
 	},
 	silentTranslationWarn: true
 });

src/main.ts

@@ -15,10 +15,8 @@ import './interfaces/register';
 
 Vue.config.productionTip = false;
 
-const app = new Vue({
+new Vue({
 	render: h => h('router-view'),
 	router,
 	i18n
 }).$mount('#app');
-
-export default app;

src/modules/register.ts

@@ -6,8 +6,15 @@ const moduleRoutes: RouteConfig[] = modules.map(module => module.routes).flat();
 
 replaceRoutes(routes => insertBeforeProjectWildcard(routes, moduleRoutes));
 
-export function insertBeforeProjectWildcard(routes: RouteConfig[], moduleRoutes: RouteConfig[]) {
+export function insertBeforeProjectWildcard(
+	currentRoutes: RouteConfig[],
+	routesToBeAdded: RouteConfig[]
+) {
 	// Find the index of the /:project/* route, so we can insert the module routes right above that
-	const wildcardIndex = routes.findIndex(route => route.path === '/:project/*');
-	return [...routes.slice(0, wildcardIndex), ...moduleRoutes, ...routes.slice(wildcardIndex)];
+	const wildcardIndex = currentRoutes.findIndex(route => route.path === '/:project/*');
+	return [
+		...currentRoutes.slice(0, wildcardIndex),
+		...routesToBeAdded,
+		...currentRoutes.slice(wildcardIndex)
+	];
 }

src/views/private-view/module-bar-logo/module-bar-logo.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="module-bar-logo">
-		<img class="custom-logo" v-if="customLogoPath" :src="customLogoPath" />
+		<img class="custom-logo" v-if="customLogoPath" :src="customLogoPath" alt="Project Logo" />
 		<div
 			v-else
 			class="logo"

src/views/private-view/private-view.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="private-view">
-		<aside class="navigation" :class="{ 'is-open': navOpen }">
+		<aside role="navigation" class="navigation" :class="{ 'is-open': navOpen }">
 			<module-bar />
 			<div class="module-nav alt-colors">
 				<div
@@ -31,6 +31,7 @@
 			</main>
 		</div>
 		<aside
+			role="contentinfo"
 			class="drawer alt-colors"
 			:class="{ 'is-open': drawerOpen }"
 			@click="drawerOpen = true"

src/views/public/_logo.vue

@@ -1,5 +1,5 @@
 <template functional>
-	<a href="https://directus.io" target="_blank" class="logo">
+	<a href="https://directus.io" rel="noopener noreferrer" target="_blank" class="logo">
 		<img
 			v-tooltip.right="{ classes: ['inverted'], content: `Directus v${props.version}` }"
 			alt="Directus Logo"