diff --git a/apps/accessibility/css/style.scss b/apps/accessibility/css/style.scss
index 5c262605f06ac269612ee52cba7e4f86089f8be6..b00aa5d06fef1f87cb0585946a766db82879eff6 100644
--- a/apps/accessibility/css/style.scss
+++ b/apps/accessibility/css/style.scss
@@ -1,59 +1,63 @@
+// Rules we could port to the rest of Nextcloud too
+
+// Proper highlight for links and focus feedback
+#accessibility a {
+ font-weight: bold;
+
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+}
+
+// Highlight checkbox label in bold for focus feedback
+// Drawback: Text width increases a bit
+#accessibility .checkbox:focus + label {
+ font-weight: bold;
+}
+
+// Limit width of settings sections for readability
+#accessibility.section p {
+ max-width: 800px;
+}
+
+// End of rules we could port to rest of Nextcloud
+
+
+
.preview-list {
display: flex;
- flex-wrap: wrap;
+ flex-direction: column;
+ max-width: 800px;
}
+
.preview {
display: flex;
- flex-direction: column;
- min-width: 250px;
- max-width: 400px;
- 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;
+ justify-content: flex-start;
+ margin-top: 3em;
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;
- line-height: 1em;
- align-items: center;
- }
- 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);
+ flex-direction: column;
+
+ label {
+ padding: 12px 0;
+ }
}
}
diff --git a/apps/accessibility/js/accessibility.js b/apps/accessibility/js/accessibility.js
index fe3942d61be3fa8f6b39941e9568754a249dd91a..061695673e901f110ded16f018baf812e0def126 100644
Binary files a/apps/accessibility/js/accessibility.js and b/apps/accessibility/js/accessibility.js differ
diff --git a/apps/accessibility/js/accessibility.js.map b/apps/accessibility/js/accessibility.js.map
index ea6797a3b34b2d86a8e0ab2610a817a04195b298..be782cbc902fe1035f972fa54f20cff461146ee7 100644
Binary files a/apps/accessibility/js/accessibility.js.map and b/apps/accessibility/js/accessibility.js.map differ
diff --git a/apps/accessibility/lib/AccessibilityProvider.php b/apps/accessibility/lib/AccessibilityProvider.php
index c1a69b55f4d21c5f3f81b28404663836cadfef01..6bd548680e9b4597975c512a22ab69c4c1288469 100644
--- a/apps/accessibility/lib/AccessibilityProvider.php
+++ b/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.')
]
);
}
diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue
index 03054af1c8c4a62c95ae3743edef5246bd410518..2a3316e59a11485de3d0f04351184140ea9c8db2 100644
--- a/apps/accessibility/src/App.vue
+++ b/apps/accessibility/src/App.vue
@@ -1,20 +1,16 @@
<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>
- <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 id="accessibility" class="section">
+ <h2>{{t('accessibility', 'Accessibility')}}</h2>
+ <p v-html="description" />
+ <p v-html="descriptionDetail" />
+
+ <div class="preview-list">
+ <preview v-for="preview in themes" :preview="preview"
+ :key="preview.id" :selected="selected.theme"
+ v-on:select="selectTheme"></preview>
+ <preview v-for="preview in fonts" :preview="preview"
+ :key="preview.id" :selected="selected.font"
+ v-on:select="selectFont"></preview>
</div>
</div>
</template>
@@ -52,6 +48,36 @@ export default {
theme: this.serverData.theme,
font: this.serverData.font
};
+ },
+ description() {
+ // using the `t` replace method escape html, we have to do it manually :/
+ return 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 {guidelines} 2.1 on AA level,
+ with the high contrast theme even on AAA level.`
+ )
+ .replace('{guidelines}', this.guidelinesLink)
+ },
+ guidelinesLink() {
+ return `<a target="_blank" href="https://www.w3.org/WAI/standards-guidelines/wcag/" rel="noreferrer nofollow">${t('accessibility', 'Web Content Accessibility Guidelines')}</a>`
+ },
+ descriptionDetail() {
+ return t(
+ 'accessibility',
+ `If you find any issues, don’t hesitate to report them on {issuetracker}.
+ And if you want to get involved, come join {designteam}!`
+ )
+ .replace('{issuetracker}', this.issuetrackerLink)
+ .replace('{designteam}', this.designteamLink)
+ },
+ issuetrackerLink() {
+ return `<a target="_blank" href="https://github.com/nextcloud/server/issues/" rel="noreferrer nofollow">${t('accessibility', 'our issue tracker')}</a>`
+ },
+ designteamLink() {
+ return `<a target="_blank" href="https://nextcloud.com/design" rel="noreferrer nofollow">${t('accessibility', 'our design team')}</a>`
}
},
methods: {
diff --git a/apps/accessibility/src/components/itemPreview.vue b/apps/accessibility/src/components/itemPreview.vue
index 64a82059faf1b3e26eb4f00535fa7ac45acd818f..a27fa8cac39fab56d1ba18ad03a2ae2b9a0e73d6 100644
--- a/apps/accessibility/src/components/itemPreview.vue
+++ b/apps/accessibility/src/components/itemPreview.vue
@@ -1,13 +1,13 @@
<template>
- <a :class="{preview: true, selected: preview.id === selected}"
- href="#" @click="selectItem">
+ <div :class="{preview: true}">
<div class="preview-image" :style="{backgroundImage: 'url(' + preview.img + ')'}"></div>
- <h3>
- <span>{{preview.title}}</span>
- <div class="icon-checkmark-color">{{t('accessibility', 'enabled')}}</div>
- </h3>
- <p>{{preview.text}}</p>
- </a>
+ <div class="preview-description">
+ <h3>{{preview.title}}</h3>
+ <p>{{preview.text}}</p>
+ <input type="checkbox" class="checkbox" :id="'accessibility-' + preview.id" :checked="selected === preview.id" />
+ <label :for="'accessibility-' + preview.id" @click="selectItem">{{t('accessibility', 'Enable')}} {{preview.title.toLowerCase()}}</label>
+ </div>
+ </div>
</template>
<script>