diff options
| author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2019-01-24 18:55:58 +0100 |
|---|---|---|
| committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-02-21 16:22:24 +0100 |
| commit | 4b88ac4d2ab808a8942ebba34d8b3573399faa2c (patch) | |
| tree | 1946f37d14ac50b9fe23a9e341c391841e02eb66 /apps/accessibility/src | |
| parent | 6afc5fbe9e3fb71cfd63a04551c5fbef336c2c25 (diff) | |
| download | nextcloud-server-4b88ac4d2ab808a8942ebba34d8b3573399faa2c.tar.gz nextcloud-server-4b88ac4d2ab808a8942ebba34d8b3573399faa2c.zip | |
Accessibility: Simplify design, more obvious selectability
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'apps/accessibility/src')
| -rw-r--r-- | apps/accessibility/src/App.vue | 17 | ||||
| -rw-r--r-- | apps/accessibility/src/components/itemPreview.vue | 16 |
2 files changed, 15 insertions, 18 deletions
diff --git a/apps/accessibility/src/App.vue b/apps/accessibility/src/App.vue index 8983ecc1976..7c86b4287f0 100644 --- a/apps/accessibility/src/App.vue +++ b/apps/accessibility/src/App.vue @@ -1,21 +1,18 @@ <template> <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> + <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.')}} 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" - v-on:select="selectTheme"></preview> - </div> - <div class="fonts-list preview-list"> + :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> + :key="preview.id" :selected="selected.font" + v-on:select="selectFont"></preview> </div> </div> </template> diff --git a/apps/accessibility/src/components/itemPreview.vue b/apps/accessibility/src/components/itemPreview.vue index 64a82059faf..f6c84d7e302 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" v-model="selected" /> + <label :for="'accessibility-' + preview.id" @click="selectItem">{{t('accessibility', 'Enable')}}</label> + </div> + </div> </template> <script> |