From 6afc5fbe9e3fb71cfd63a04551c5fbef336c2c25 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt <hey@jancborchardt.net>
Date: Thu, 24 Jan 2019 17:02:44 +0100
Subject: [PATCH] Accessibility: Add description text, simplify structure

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
---
 apps/accessibility/src/App.vue | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
index 03054af1c8c..8983ecc1976 100644
--- a/apps/accessibility/src/App.vue
+++ b/apps/accessibility/src/App.vue
@@ -1,20 +1,21 @@
 <template>
-	<div id="accessibility">
-		<div id="themes" class="section">
-			<h2>{{t('accessibility', 'Themes')}}</h2>
-			<div class="themes-list preview-list">
-				<preview v-for="preview in themes" :preview="preview"
-						 :key="preview.id" :selected="selected.theme"
-						 v-on:select="selectTheme"></preview>
-			</div>
+	<div id="accessibility" class="section">
+		<h2>{{t('accessibility', 'Accessibility')}}</h2>
+		<p class="settings-hint">
+			{{t('accessibility', 'Universal access is very important to us. We follow web standards and check to make everything usable also without mouse, and assistive software such as screenreaders.')}}</br>
+			We aim to be compliant with the <a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">Web Content Accessibility Guidelines</a>  2.1 on AA level, with the high contrast theme even on AAA level.</br>
+			If you find any issues, don’t hesitate to report them on <a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">our issue tracker</a>. And if you want to get involved, come join <a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">our design team</a>!
+		</p>
+
+		<div class="themes-list preview-list">
+			<preview v-for="preview in themes" :preview="preview"
+					 :key="preview.id" :selected="selected.theme"
+					 v-on:select="selectTheme"></preview>
 		</div>
-		<div id="fonts" class="section">
-			<h2>{{t('accessibility', 'Fonts')}}</h2>
-			<div class="fonts-list preview-list">
-				<preview v-for="preview in fonts" :preview="preview"
-						 :key="preview.id" :selected="selected.font"
-						 v-on:select="selectFont"></preview>
-			</div>
+		<div class="fonts-list preview-list">
+			<preview v-for="preview in fonts" :preview="preview"
+					 :key="preview.id" :selected="selected.font"
+					 v-on:select="selectFont"></preview>
 		</div>
 	</div>
 </template>