Accessibility: Simplify design, more obvious selectability
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt
John Molakvoæ (skjnldsv)
parent
6afc5fbe9e
commit
4b88ac4d2a
|
|
@ -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;
|
||||
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: 1em;
|
||||
margin-left: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.')
|
||||
]
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue