upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 25

Merge pull request #42732 from nextcloud/fix/a11y/user-status-icons

Browse source 
fix(a11y): Fix informative graphics contrast of user status icons
This commit is contained in:
Pytal 2024-01-23 17:44:18 -08:00 committed by GitHub
commit e8a67a7a46
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 38 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/dashboard/src/DashboardApp.vue
View file

@ -74,7 +74,8 @@
:checked="isStatusActive(status)"
@input="updateStatusCheckbox(status, $event.target.checked)">
<label :for="'status-checkbox-' + status">
<span :class="statusInfo[status].icon" aria-hidden="true" />
<NcUserStatusIcon v-if="status === 'status'" status="online" aria-hidden="true" />
<span v-else :class="statusInfo[status].icon" aria-hidden="true" />
{{ statusInfo[status].text }}
</label>
</li>
@ -124,6 +125,7 @@ import axios from '@nextcloud/axios'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import Draggable from 'vuedraggable'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import Vue from 'vue'
@ -140,7 +142,6 @@ const statusInfo = {
},
status: {
text: t('dashboard', 'Status'),
icon: 'icon-user-status-online',
},
}
@ -152,6 +153,7 @@ export default {
Draggable,
NcModal,
Pencil,
NcUserStatusIcon,
},
mixins: [
isMobile,

2
apps/user_status/css/user-status-menu.css
View file

@ -1 +1 @@
.icon-user-status{background-image:url("../img/app.svg")}.icon-user-status-dark{background-image:url("../img/app-dark.svg")}.icon-user-status-online{background-image:url("../img/user-status-online.svg")}.icon-user-status-away{background-image:url("../img/user-status-away.svg")}.icon-user-status-dnd{background-image:url("../img/user-status-dnd.svg")}.icon-user-status-invisible{background-image:url("../img/user-status-invisible.svg");filter:var(--background-invert-if-dark)}/*# sourceMappingURL=user-status-menu.css.map */
.icon-user-status{background-image:url("../img/app.svg")}.icon-user-status-dark{background-image:url("../img/app-dark.svg")}/*# sourceMappingURL=user-status-menu.css.map */

2
apps/user_status/css/user-status-menu.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["user-status-menu.scss"],"names":[],"mappings":"AAwBA,kBACC,uCAGD,uBACC,4CAID,yBACC,sDAGD,uBACC,oDAGD,sBACC,mDAGD,4BACC,yDACA","file":"user-status-menu.css"}
{"version":3,"sourceRoot":"","sources":["user-status-menu.scss"],"names":[],"mappings":"AAwBA,kBACC,uCAGD,uBACC","file":"user-status-menu.css"}

17
apps/user_status/css/user-status-menu.scss
View file

@ -30,20 +30,3 @@
background-image: url("../img/app-dark.svg");
}
.icon-user-status-online {
background-image: url('../img/user-status-online.svg');
}
.icon-user-status-away {
background-image: url('../img/user-status-away.svg');
}
.icon-user-status-dnd {
background-image: url('../img/user-status-dnd.svg');
}
.icon-user-status-invisible {
background-image: url('../img/user-status-invisible.svg');
filter: var(--background-invert-if-dark);
}

1
apps/user_status/img/user-status-away.svg
View file

@ -1 +0,0 @@
<svg width="24" height="24" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect width="24" height="24" fill="none"/><path d="m10.615 2.1094c-4.8491 0.68106-8.6152 4.8615-8.6152 9.8906 0 5.5 4.5 10 10 10 5.0292 0 9.2096-3.7661 9.8906-8.6152-1.4654 1.601-3.5625 2.6152-5.8906 2.6152-4.4 0-8-3.6-8-8 0-2.3281 1.0143-4.4252 2.6152-5.8906z" fill="#f4a331"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 416 B

1
apps/user_status/img/user-status-dnd.svg
View file

@ -1 +0,0 @@
<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z" fill="#ed484c"/><path d="m8 10h8c1.108 0 2 0.892 2 2s-0.892 2-2 2h-8c-1.108 0-2-0.892-2-2s0.892-2 2-2z" fill="#fdffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" style="paint-order:stroke markers fill"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 446 B

1
apps/user_status/img/user-status-invisible.svg
View file

@ -1 +0,0 @@
<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 4a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 284 B

1
apps/user_status/img/user-status-online.svg
View file

@ -1 +0,0 @@
<svg width="24" height="24" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m8 16h8v-8h-8v8zm4-14c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z" fill="#49B382"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 237 B

11
apps/user_status/src/UserStatus.vue
View file

@ -25,16 +25,19 @@
<button v-if="!inline"
class="user-status-menu-item"
@click.stop="openModal">
<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
<NcUserStatusIcon class="user-status-icon"
:status="statusType"
aria-hidden="true" />
{{ visibleMessage }}
</button>
<!-- Dashboard Status -->
<NcButton v-else
:icon="statusIcon"
@click.stop="openModal">
<template #icon>
<span aria-hidden="true" :class="statusIcon" class="user-status-icon" />
<NcUserStatusIcon class="user-status-icon"
:status="statusType"
aria-hidden="true" />
</template>
{{ visibleMessage }}
</NcButton>
@ -47,6 +50,7 @@
<script>
import { subscribe, unsubscribe } from '@nextcloud/event-bus'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
import debounce from 'debounce'
import { sendHeartbeat } from './services/heartbeatService.js'
@ -57,6 +61,7 @@ export default {
components: {
NcButton,
NcUserStatusIcon,
SetStatusModal: () => import(/* webpackChunkName: 'user-status-modal' */'./components/SetStatusModal.vue'),
},
mixins: [OnlineStatusMixin],

18
apps/user_status/src/components/OnlineStatusSelect.vue
View file

@ -29,25 +29,28 @@
@change="onChange">
<label :for="id" class="user-status-online-select__label">
{{ label }}
<span :class="icon" aria-hidden="true" role="img" />
<NcUserStatusIcon :status="type"
aria-hidden="true" />
<em class="user-status-online-select__subline">{{ subline }}</em>
</label>
</div>
</template>
<script>
import NcUserStatusIcon from '@nextcloud/vue/dist/Components/NcUserStatusIcon.js'
export default {
name: 'OnlineStatusSelect',
components: {
NcUserStatusIcon,
},
props: {
checked: {
type: Boolean,
default: false,
},
icon: {
type: String,
required: true,
},
type: {
type: String,
required: true,
@ -101,8 +104,8 @@ $label-padding: 8px;
span {
position: absolute;
top: calc(50% - math.div($icon-size, 2));
left: $label-padding;
top: calc(50% - 10px);
left: 10px;
display: block;
width: $icon-size;
height: $icon-size;
@ -123,5 +126,4 @@ $label-padding: 8px;
color: var(--color-text-lighter);
}
}
</style>

25
apps/user_status/src/mixins/OnlineStatusMixin.js
View file

@ -68,31 +68,6 @@ export default {
return this.$t('user_status', 'Set status')
},
/**
* The status indicator icon
*
* @return {string | null}
*/
statusIcon() {
switch (this.statusType) {
case 'online':
return 'icon-user-status-online'
case 'away':
case 'busy':
return 'icon-user-status-away'
case 'dnd':
return 'icon-user-status-dnd'
case 'invisible':
case 'offline':
return 'icon-user-status-invisible'
}
return ''
},
},
methods: {

5
apps/user_status/src/services/statusOptionsService.js
View file

@ -32,22 +32,17 @@ const getAllStatusOptions = () => {
return [{
type: 'online',
label: t('user_status', 'Online'),
icon: 'icon-user-status-online',
}, {
type: 'away',
label: t('user_status', 'Away'),
icon: 'icon-user-status-away',
}, {
type: 'dnd',
label: t('user_status', 'Do not disturb'),
subline: t('user_status', 'Mute all notifications'),
icon: 'icon-user-status-dnd',
}, {
type: 'invisible',
label: t('user_status', 'Invisible'),
subline: t('user_status', 'Appear offline'),
icon: 'icon-user-status-invisible',
}]
}

6
core/src/views/UserMenu.vue
View file

@ -241,8 +241,7 @@ export default {
background-color: var(--color-primary-element);
color: var(--color-primary-element-text);
img,
svg {
img {
filter: var(--primary-invert-if-dark);
}
}
@ -261,8 +260,7 @@ export default {
margin-right: 10px;
}
img,
svg {
img {
filter: var(--background-invert-if-dark);
}
}

4
dist/core-main.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/core-main.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/dashboard-main.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/dashboard-main.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/user-status-modal-8299.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/user-status-modal-8299.js.map vendored
View file

File diff suppressed because one or more lines are too long

4
dist/user_status-menu.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/user_status-menu.js.map vendored
View file

File diff suppressed because one or more lines are too long