Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Accessibility improvements #2965

Merged
merged 6 commits into from
Dec 12, 2024
Merged

Accessibility improvements #2965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7c11fd2
fix: set correct focus when opening modals
wofferl Dec 2, 2024
c0618dc
fix: add item url to open website aria label and remove unecessary ti…
wofferl Dec 2, 2024
036651b
fix: remove close button in screen reader mode
wofferl Dec 2, 2024
abf7ef0
fix: use NcActionButtons for icons to allow using them with space and…
wofferl Dec 3, 2024
4df3131
add changelog for accessibility improvements
wofferl Dec 3, 2024
0754cb2
fix: mark read on scroll marks visible items as read using vertical c…
wofferl Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@
- Show red error bubble only if more than 8 updates fail.

### Fixed
- set correct input focus when opening `AddFeed` or `Share` modals
- add item url to open website button aria label for screen readers

Check failure on line 14 in CHANGELOG.md

View workflow job for this annotation

GitHub Actions / vale 

[vale] reported by reviewdog 🐶
[Vale.Spelling] Did you really mean 'url'?

Raw Output:
{"message": "[Vale.Spelling] Did you really mean 'url'?", "location": {"path": "CHANGELOG.md", "range": {"start": {"line": 14, "column": 12}}}, "severity": "ERROR"}
- allow using `toggle starred` and `mark read` icons with keyboard
- remove close button from list items in screen reader mode
- mark read on scroll marks visible items as read using vertical compact display mode

# Releases
## [25.1.0] - 2024-12-01
Expand Down
5 changes: 4 additions & 1 deletion src/components/AddFeed.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<div id="new-feed">
<form name="feedform">
<fieldset style="padding: 16px">
<input v-model="feedUrl"
<input ref="feedInput"
v-model="feedUrl"
type="text"
:placeholder="t('news', 'Web address')"
:class="{ 'invalid': feedUrlExists() }"
Expand Down Expand Up @@ -175,6 +176,8 @@ export default Vue.extend({
} else if (this.$route.query.subscribe_to) {
this.feedUrl = this.$route.query.subscribe_to as string
}
this.$nextTick(() => this.$refs?.feedInput?.focus())

},
methods: {
/**
Expand Down
5 changes: 4 additions & 1 deletion src/components/ShareItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<div id="share-item">
<form name="feedform">
<fieldset>
<input v-model="userName"
<input ref="nameInput"
v-model="userName"
type="text"
:placeholder="t('news', 'User Name')"
name="user"
Expand Down Expand Up @@ -90,6 +91,8 @@ export default Vue.extend({
},
created() {
this.debounceSearchUsers = _.debounce(this.searchUsers, 800)
this.$nextTick(() => this.$refs?.nameInput?.focus())

},
methods: {
/**
Expand Down
69 changes: 43 additions & 26 deletions src/components/feed-display/FeedItemDisplay.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,46 @@
<ShareItem v-if="showShareMenu" :item-id="item.id" @close="closeShareMenu()" />

<div class="action-bar">
<NcActions>
<NcActionButton :title="t('news', 'Share within Instance')" @click="showShareMenu = true">
{{ t('news', 'Share') }}
<NcActions :inline="4">
<NcActionButton :title="t('news', 'Share within Instance')"
@click="showShareMenu = true">
{{ t('news', 'Share within Instance') }}
<template #icon>
<ShareVariant />
</template>
</NcActionButton>
<NcActionButton :title="t('news', 'Toggle star article')"
@click="toggleStarred(item)">
{{ t('news', 'Toggle star article') }}
<template #icon>
<StarIcon :class="{'starred': item.starred }" :size="24" />
</template>
</NcActionButton>
<NcActionButton v-if="item.unread"
:title="t('news', 'Mark read')"
@click="toggleRead(item)">
{{ t('news', 'Mark read') }}
<template #icon>
<EyeIcon :size="24" />
</template>
</NcActionButton>
<NcActionButton v-if="!item.unread"
:title="t('news', 'Mark unread')"
@click="toggleRead(item)">
{{ t('news', 'Mark unread') }}
<template #icon>
<EyeCheckIcon :size="24" />
</template>
</NcActionButton>
<NcActionButton v-if="!screenReaderMode"
:title="t('news', 'Close details')"
@click="splitModeOff ? $emit('show-details') : clearSelected()">
{{ t('news', 'Close details') }}
<template #icon>
<CloseIcon :size="24" />
</template>
</NcActionButton>
</NcActions>
<StarIcon :class="{'starred': item.starred }"
:title="t('news', 'Toggle star article')"
tabindex="0"
@click="toggleStarred(item)" />
<EyeIcon v-if="item.unread"
:title="t('news', 'Mark read')"
tabindex="0"
@click="toggleRead(item)" />
<EyeCheckIcon v-if="!item.unread"
:title="t('news', 'Mark unread')"
tabindex="0"
@click="toggleRead(item)" />
<CloseIcon :title="t('news', 'Close details')"
tabindex="0"
@click="splitModeOff ? $emit('show-details') : clearSelected()" />
<button v-if="splitModeOff"
v-shortkey="{s: ['s'], l: ['l'], i: ['i']}"
class="hidden"
Expand Down Expand Up @@ -348,18 +365,18 @@ export default Vue.extend({
}

.action-bar {
padding: 0px 20px 0px 20px;
padding: 10px 20px 0px 20px;

display: flex;
justify-content: right
}

.action-bar .material-design-icon{
cursor: pointer;
margin: 5px;
}

.action-bar .material-design-icon:hover {
color: var(--color-text-light);
.feed-item-display .action-bar .button-vue,
.feed-item-display .action-bar .button-vue .button-vue__wrapper
{
width: 30px !important;
min-width: 30px;
min-height: 30px;
height: 30px;
}
</style>
75 changes: 46 additions & 29 deletions src/components/feed-display/FeedItemRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
rel="noreferrer"
:href="item.url"
:title="t('news', 'Open website')"
:aria-label="`${t('news', 'Open website')} ${item.url}`"
@click.middle="markRead(item); $event.stopPropagation();"
@click="markRead(item); $event.stopPropagation();">
<span v-if="getFeed(item.feedId).faviconLink"
Expand All @@ -25,16 +26,14 @@
<h1 class="title-container"
:class="{ 'compact': compactMode && !verticalSplit, 'unread': item.unread }"
:dir="item.rtl && 'rtl'">
<a href="#"
:title="t('news', 'Open article')"
@click="select()">
<a href="#" @click="select()">
{{ item.title }}
</a>
</h1>

<div v-if="!compactMode || !verticalSplit" class="intro-container" :class="{ 'compact': compactMode }">
<div class="intro-container" :class="{ 'compact': compactMode }">
<!-- eslint-disable vue/no-v-html -->
<span class="intro" v-html="item.intro" />
<span v-if="!compactMode || !verticalSplit" class="intro" v-html="item.intro" />
<!--eslint-enable-->
</div>

Expand All @@ -46,26 +45,40 @@
</div>

<div class="button-container" @click="$event.stopPropagation()">
<StarIcon :class="{'starred': item.starred }"
:title="t('news', 'Toggle star article')"
tabindex="0"
@click="toggleStarred(item)" />
<EyeIcon v-if="item.unread && !item.keepUnread"
:title="t('news', 'Keep article unread')"
tabindex="0"
@click="toggleKeepUnread(item)" />
<EyeCheckIcon v-if="!item.unread && !item.keepUnread"
:title="t('news', 'Toggle keep current article unread')"
tabindex="0"
@click="toggleKeepUnread(item)" />
<EyeLockIcon v-if="item.keepUnread"
:title="t('news', 'Remove keep article unread')"
tabindex="0"
class="keep-unread"
@click="toggleKeepUnread(item)" />
<NcActions>
<NcActions :inline="3">
<NcActionButton :title="t('news', 'Toggle star article')"
@click="toggleStarred(item)">
{{ t('news', 'Toggle star article') }}
<template #icon>
<StarIcon :class="{'starred': item.starred }" :size="24" />
</template>
</NcActionButton>
<NcActionButton v-if="item.unread && !item.keepUnread"
:title="t('news', 'Keep article unread')"
@click="toggleKeepUnread(item)">
{{ t('news', 'Keep article unread') }}
<template #icon>
<EyeIcon :size="24" />
</template>
</NcActionButton>
<NcActionButton v-if="!item.unread && !item.keepUnread"
:title="t('news', 'Toggle keep current article unread')"
@click="toggleKeepUnread(item)">
{{ t('news', 'Toggle keep current article unread') }}
<template #icon>
<EyeCheckIcon :size="24" />
</template>
</NcActionButton>
<NcActionButton v-if="item.keepUnread"
:title="t('news', 'Remove keep article unread')"
@click="toggleKeepUnread(item)">
{{ t('news', 'Remove keep article unread') }}
<template #icon>
<EyeLockIcon :size="24" />
</template>
</NcActionButton>
<NcActionButton :title="t('news', 'Share within Instance')" @click="shareItem = item.id; showShareMenu = true">
{{ t('news', 'Share') }}
{{ t('news', 'Share within Instance') }}
<template #icon>
<ShareVariant />
</template>
Expand Down Expand Up @@ -305,6 +318,7 @@ export default Vue.extend({
.feed-item-row .date-container.compact {
flex: 0 0 auto;
font-size: small;
padding-right: 4px;
}

.feed-item-row .button-container {
Expand All @@ -313,11 +327,14 @@ export default Vue.extend({
align-self: center;
}

.feed-item-row .button-container .button-vue, .feed-item-row .button-container .button-vue .button-vue__wrapper, .feed-item-row .button-container .material-design-icon {
width: 30px !important;
min-width: 30px;
min-height: 30px;
height: 30px;
.feed-item-row .button-container .button-vue,
.feed-item-row .button-container .button-vue .button-vue__wrapper,
.feed-item-row .button-container .material-design-icon
{
width: 24px !important;
min-width: 24px;
min-height: 24px;
height: 24px;
}

.feed-item-row .button-container .material-design-icon {
Expand Down
Loading