Accessibility: Simplify design, more obvious selectability

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

apps/accessibility/css/style.scss

@@ -1,59 +1,49 @@
+#accessibility {
+	max-width: 800px;
+}
+
+#accessibility a {
+	border-bottom: 1px dotted;
+
+	&:hover,
+	&:focus {
+		border-bottom-style: solid;
+	}
+}
+
 .preview-list {
 	display: flex;
-	flex-wrap: wrap;
+	flex-direction: column;
 }
+
 .preview {
 	display: flex;
-	flex-direction: column;
+	justify-content: flex-start;
-	min-width: 250px;
+	margin: 1em;
-	max-width: 400px;
+	margin-left: 0;
-	flex: 1 1 300px;
-	border: 1px solid var(--color-border);
-	padding: 10px;
-	border-radius: var(--border-radius);
-	transition: all 200ms ease-in-out;
-	filter: drop-shadow(0 1px 2px var(--color-box-shadow));
-	background-color: var(--color-main-background);
-	opacity: 0.9;
-	margin: 10px;
 	position: relative;
+
 	&,
 	* {
-		cursor: pointer;
 		user-select: none;
 	}
-	&:hover,
+
-	&:focus,
-	&.selected {
-		filter: drop-shadow(0 1px 4px var(--color-box-shadow));
-		opacity: 1;
-	}
 	.preview-image {
-		height: 200px;
+		flex-basis: 200px;
+		flex-shrink: 0;
+		margin-right: 1em;
 		background-position: top left;
 		background-size: cover;
 		background-repeat: no-repeat;
+		border-radius: var(--border-radius);
 	}
-	h3 {
+
+	.preview-description {
 		display: flex;
-		justify-content: space-between;
+		flex-direction: column;
-		line-height: 1em;
+
-		align-items: center;
+		label {
-	}
+			padding: 12px 0;
-	p {
+		}
-		text-align: justify;
-	}
-	.icon-checkmark-color {
-		transition: all 100ms ease-in-out;
-		border-radius: 1em;
-		padding: 4px 5px 4px 20px;
-		background-position: 4px center;
-		opacity: 0;
-		visibility: hidden;
-	}
-	&.selected .icon-checkmark-color {
-		opacity: 1;
-		visibility: visible;
-		box-shadow: 0 0 0 1px var(--color-success);
 	}
 }

apps/accessibility/lib/AccessibilityProvider.php

@@ -75,7 +75,7 @@ class AccessibilityProvider {
 				'id'    => 'fontdyslexic',
 				'img'   => $this->urlGenerator->imagePath($this->appName, 'font-opendyslexic.jpg'),
 				'title' => $this->l->t('Dyslexia font'),
-				'text'  => $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia. The typeface was created by Abelardo Gonzalez, who released it through an open-source license.')
+				'text'  => $this->l->t('OpenDyslexic is a free typeface/font designed to mitigate some of the common reading errors caused by dyslexia.')
 			]
 		);
 	}

apps/accessibility/src/App.vue

@@ -1,21 +1,18 @@
 <template>
 	<div id="accessibility" class="section">
 		<h2>{{t('accessibility', 'Accessibility')}}</h2>
-		<p class="settings-hint">
+		<p>
-			{{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>
+			{{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.')}} 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>
-			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">
+		<div class="preview-list">
 			<preview v-for="preview in themes" :preview="preview"
-					 :key="preview.id" :selected="selected.theme"
+				 :key="preview.id" :selected="selected.theme"
-					 v-on:select="selectTheme"></preview>
+				 v-on:select="selectTheme"></preview>
-		</div>
-		<div class="fonts-list preview-list">
 			<preview v-for="preview in fonts" :preview="preview"
-					 :key="preview.id" :selected="selected.font"
+				 :key="preview.id" :selected="selected.font"
-					 v-on:select="selectFont"></preview>
+				 v-on:select="selectFont"></preview>
 		</div>
 	</div>
 </template>

apps/accessibility/src/components/itemPreview.vue

@@ -1,13 +1,13 @@
 <template>
-	<a :class="{preview: true, selected: preview.id === selected}"
+	<div :class="{preview: true}">
-	   href="#" @click="selectItem">
 		<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
-		<h3>
+		<div class="preview-description">
-			<span>{{preview.title}}</span>
+			<h3>{{preview.title}}</h3>
-			<div class="icon-checkmark-color">{{t('accessibility', 'enabled')}}</div>
+			<p>{{preview.text}}</p>
-		</h3>
+			<input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" v-model="selected" />
-		<p>{{preview.text}}</p>
+			<label :for="'accessibility-' + preview.id" @click="selectItem">{{t('accessibility', 'Enable')}}</label>
-	</a>
+		</div>
+	</div>
 </template>
 
 <script>