Skip to content

Commit

Permalink
fix(NcAppSidebar): Star button should be implemented as a checkbox fo…
Browse files Browse the repository at this point in the history
…r accessibility

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Jun 28, 2023
1 parent bbce37e commit d16ef31
Showing 1 changed file with 23 additions and 12 deletions.
35 changes: 23 additions & 12 deletions src/components/NcAppSidebar/NcAppSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ include a standard-header like it's used by the files app.
```vue
<template>
<NcAppSidebar
:starred="starred"
name="cat-picture.jpg"
subname="last edited 3 weeks ago">
<NcAppSidebarTab name="Search" id="search-tab">
Expand Down Expand Up @@ -65,6 +66,11 @@ include a standard-header like it's used by the files app.
Cog,
ShareVariant,
},
data() {
return {
starred: false,
}
},
}
</script>
```
Expand Down Expand Up @@ -374,17 +380,20 @@ export default {
<!-- favourite icon -->
<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
<slot name="tertiary-actions">
<NcButton v-if="canStar"
:aria-label="favoriteTranslated"
<NcCheckboxRadioSwitch v-if="canStar"
:checked="isStarred"
icon-only
class="app-sidebar-header__star"
type="secondary"
@click.prevent="toggleStarred">
type="checkbox"
button-variant="secondary"
@update:checked="toggleStarred">
<template #icon>
<NcLoadingIcon v-if="starLoading" />
<Star v-else-if="isStarred" :size="20" />
<StarOutline v-else :size="20" />
</template>
</NcButton>
{{ favoriteTranslated }}
</NcCheckboxRadioSwitch>
</slot>
</div>

Expand Down Expand Up @@ -472,13 +481,14 @@ export default {
</template>

<script>
import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
import Focus from '../../directives/Focus/index.js'
import Linkify from '../../directives/Linkify/index.js'
import NcActions from '../NcActions/index.js'
import NcLoadingIcon from '../NcLoadingIcon/index.js'
import NcAppSidebarTabs from './NcAppSidebarTabs.vue'
import NcButton from '../NcButton/index.js'
import NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'
import NcEmptyContent from '../NcEmptyContent/index.js'
import Focus from '../../directives/Focus/index.js'
import Linkify from '../../directives/Linkify/index.js'
import NcLoadingIcon from '../NcLoadingIcon/index.js'
import Tooltip from '../../directives/Tooltip/index.js'
import { t } from '../../l10n.js'
Expand All @@ -493,13 +503,14 @@ export default {
name: 'NcAppSidebar',
components: {
ArrowRight,
Close,
NcActions,
NcAppSidebarTabs,
ArrowRight,
NcButton,
NcLoadingIcon,
NcCheckboxRadioSwitch,
NcEmptyContent,
Close,
NcLoadingIcon,
Star,
StarOutline,
},
Expand Down

0 comments on commit d16ef31

Please sign in to comment.