matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved accessibility (#118):

Browse Source 
* adding role="button" or type="button" where missing.
This commit is contained in:
John Livingston 2024-08-20 15:30:45 +02:00
parent 9e252193d4
commit cee42b4bcc
No known key found for this signature in database
GPG Key ID: B17B5640CE66CDBC
11 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -17,6 +17,7 @@ With the new [mod_firewall](https://livingston.frama.io/peertube-plugin-livechat
### Minor changes and fixes ### Minor changes and fixes
* #118: improved accessibility.
* Avatar set for anonymous users: new 'none' choice (that will fallback to Converse new colorized avatars). * Avatar set for anonymous users: new 'none' choice (that will fallback to Converse new colorized avatars).
* New translation: Albanian. * New translation: Albanian.
* Translation updates: Crotian, Japanese, traditional Chinese. * Translation updates: Crotian, Japanese, traditional Chinese.

2
conversejs/build-conversejs.sh
View File

@ -32,6 +32,8 @@ CONVERSE_VERSION="livechat_converse_11"
CONVERSE_COMMIT="1625f9b6ee81fa9ebd8df5cba306bde478f1943b" CONVERSE_COMMIT="1625f9b6ee81fa9ebd8df5cba306bde478f1943b"
# 2024-08-06: including new getOccupantActionButtons hook (waiting for merge in Converse upstream) # 2024-08-06: including new getOccupantActionButtons hook (waiting for merge in Converse upstream)
CONVERSE_COMMIT="5b35bd31c7e26c1f5396cd65eef69293d8b388c1" CONVERSE_COMMIT="5b35bd31c7e26c1f5396cd65eef69293d8b388c1"
# 2024-08-20: accessibility fixes
CONVERSE_COMMIT="7b00a2e0b4a13cea7800f4f100c2673785f94486"
rootdir="$(pwd)" rootdir="$(pwd)"
src_dir="$rootdir/conversejs" src_dir="$rootdir/conversejs"

4
conversejs/custom/plugins/notes/templates/muc-note.js
View File

@ -41,12 +41,12 @@ export function tplMucNote (el, note) {
<converse-icon class="fa fa-magnifying-glass" size="1em" title=${i18nSearch}></converse-icon> <converse-icon class="fa fa-magnifying-glass" size="1em" title=${i18nSearch}></converse-icon>
</button>` </button>`
} }
<button class="note-action" title="${__('Edit')}" <button type="button" class="note-action" title="${__('Edit')}"
@click=${el.toggleEdit} @click=${el.toggleEdit}
> >
<converse-icon class="fa fa-edit" size="1em"></converse-icon> <converse-icon class="fa fa-edit" size="1em"></converse-icon>
</button> </button>
<button class="note-action" title="${i18nDelete}" <button type="button" class="note-action" title="${i18nDelete}"
@click=${el.deleteNote} @click=${el.deleteNote}
> >
<converse-icon class="fa fa-trash-alt" size="1em"></converse-icon> <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>

4
conversejs/custom/plugins/notes/templates/muc-notes.js
View File

@ -25,7 +25,7 @@ function tplFilters (el) {
></livechat-converse-muc-note-occupant>` ></livechat-converse-muc-note-occupant>`
: '' : ''
} }
<button class="notes-action" @click=${(ev) => { <button type="button" class="notes-action" @click=${(ev) => {
ev?.preventDefault() ev?.preventDefault()
el.filterNotes({}) el.filterNotes({})
}} title="${__('Close')}"> }} title="${__('Close')}">
@ -85,7 +85,7 @@ function tplCreateButton (el) {
const i18nCreateNote = __(LOC_moderator_note_create) const i18nCreateNote = __(LOC_moderator_note_create)
return html` return html`
<div class="notes-actions"> <div class="notes-actions">
<button class="notes-action" title="${i18nCreateNote}" @click=${el.openCreateNoteForm}> <button type="button" class="notes-action" title="${i18nCreateNote}" @click=${el.openCreateNoteForm}>
<converse-icon class="fa fa-plus" size="1em"></converse-icon> <converse-icon class="fa fa-plus" size="1em"></converse-icon>
</button> </button>
</div>` </div>`

6
conversejs/custom/plugins/poll/templates/poll.js
View File

@ -83,21 +83,21 @@ export function tplPoll (el, currentPoll, canVote) {
return html`<div class="${currentPoll.over ? 'livechat-poll-over' : ''}"> return html`<div class="${currentPoll.over ? 'livechat-poll-over' : ''}">
<p class="livechat-poll-question"> <p class="livechat-poll-question">
${currentPoll.over ${currentPoll.over
? html`<button class="livechat-poll-close" @click=${el.closePoll} title="${__('Close')}"> ? html`<button type="button" class="livechat-poll-close" @click=${el.closePoll} title="${__('Close')}">
<converse-icon class="fa fa-times" size="1em"></converse-icon> <converse-icon class="fa fa-times" size="1em"></converse-icon>
</button>` </button>`
: '' : ''
} }
${el.collapsed ${el.collapsed
? html` ? html`
<button @click=${el.toggle} class="livechat-poll-toggle"> <button type="button" @click=${el.toggle} class="livechat-poll-toggle">
<converse-icon <converse-icon
color="var(--muc-toolbar-btn-color)" color="var(--muc-toolbar-btn-color)"
class="fa fa-angle-right" class="fa fa-angle-right"
size="1em"></converse-icon> size="1em"></converse-icon>
</button>` </button>`
: html` : html`
<button @click=${el.toggle} class="livechat-poll-toggle"> <button type="button" @click=${el.toggle} class="livechat-poll-toggle">
<converse-icon <converse-icon
color="var(--muc-toolbar-btn-color)" color="var(--muc-toolbar-btn-color)"
class="fa fa-angle-down" class="fa fa-angle-down"

10
conversejs/custom/plugins/tasks/templates/muc-task-list.js
View File

@ -19,14 +19,14 @@ export default function tplMucTaskList (el, tasklist) {
<div class="task-list-line draggables-line"> <div class="task-list-line draggables-line">
${el.collapsed ${el.collapsed
? html` ? html`
<button @click=${el.toggleTasks} class="task-list-toggle-tasks"> <button type="button" @click=${el.toggleTasks} class="task-list-toggle-tasks">
<converse-icon <converse-icon
color="var(--muc-toolbar-btn-color)" color="var(--muc-toolbar-btn-color)"
class="fa fa-angle-right" class="fa fa-angle-right"
size="1em"></converse-icon> size="1em"></converse-icon>
</button>` </button>`
: html` : html`
<button @click=${el.toggleTasks} class="task-list-toggle-tasks"> <button type="button" @click=${el.toggleTasks} class="task-list-toggle-tasks">
<converse-icon <converse-icon
color="var(--muc-toolbar-btn-color)" color="var(--muc-toolbar-btn-color)"
class="fa fa-angle-down" class="fa fa-angle-down"
@ -38,15 +38,15 @@ export default function tplMucTaskList (el, tasklist) {
<div class="task-list-name"> <div class="task-list-name">
<a @click=${el.toggleTasks}>${tasklist.get('name')}</a> <a @click=${el.toggleTasks}>${tasklist.get('name')}</a>
</div> </div>
<button class="task-list-action" title="${i18nCreateTask}" @click=${el.openAddTaskForm}> <button type="button" class="task-list-action" title="${i18nCreateTask}" @click=${el.openAddTaskForm}>
<converse-icon class="fa fa-plus" size="1em"></converse-icon> <converse-icon class="fa fa-plus" size="1em"></converse-icon>
</button> </button>
<button class="task-list-action" title="${__('Edit')}" <button type="button" class="task-list-action" title="${__('Edit')}"
@click=${el.toggleEdit} @click=${el.toggleEdit}
> >
<converse-icon class="fa fa-edit" size="1em"></converse-icon> <converse-icon class="fa fa-edit" size="1em"></converse-icon>
</button> </button>
<button class="task-list-action" title="${i18nDelete}" <button type="button" class="task-list-action" title="${i18nDelete}"
@click=${el.deleteTaskList} @click=${el.deleteTaskList}
> >
<converse-icon class="fa fa-trash-alt" size="1em"></converse-icon> <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>

4
conversejs/custom/plugins/tasks/templates/muc-task.js
View File

@ -30,12 +30,12 @@ export function tplMucTask (el, task) {
</label> </label>
</div> </div>
<div class="task-description">${task.get('description') ?? ''}</div> <div class="task-description">${task.get('description') ?? ''}</div>
<button class="task-action" title="${__('Edit')}" <button type="button" class="task-action" title="${__('Edit')}"
@click=${el.toggleEdit} @click=${el.toggleEdit}
> >
<converse-icon class="fa fa-edit" size="1em"></converse-icon> <converse-icon class="fa fa-edit" size="1em"></converse-icon>
</button> </button>
<button class="task-action" title="${i18nDelete}" <button type="button" class="task-action" title="${i18nDelete}"
@click=${el.deleteTask} @click=${el.deleteTask}
> >
<converse-icon class="fa fa-trash-alt" size="1em"></converse-icon> <converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>

2
conversejs/custom/shared/components/muc-app/templates/muc-app.js
View File

@ -14,7 +14,7 @@ export function tplMUCApp (el, i18nTitle, helpUrl, i18nHelp, content) {
size="1em" size="1em"
title="${i18nHelp}" title="${i18nHelp}"
></converse-icon></a> ></converse-icon></a>
<button class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}"> <button type="button" class="livechat-converse-muc-app-close" @click=${el.toggleApp} title="${__('Close')}">
<converse-icon class="fa fa-times" size="1em"></converse-icon> <converse-icon class="fa fa-times" size="1em"></converse-icon>
</button> </button>
</div> </div>

6
conversejs/custom/templates/livechat-external-login-modal.js
View File

@ -117,7 +117,7 @@ export const tplExternalLoginModal = (el, o) => {
<div class="livechat-external-login-modal-external-auth-oidc-block"> <div class="livechat-external-login-modal-external-auth-oidc-block">
${ ${
externalButtons.map(button => html` externalButtons.map(button => html`
<button <button type="button"
class="btn btn-primary ${button.class}" class="btn btn-primary ${button.class}"
@click=${ @click=${
(ev) => { (ev) => {
@ -187,7 +187,9 @@ export const tplExternalLoginModal = (el, o) => {
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
__(LOC_login_remote_peertube_video_not_found_try_anyway) __(LOC_login_remote_peertube_video_not_found_try_anyway)
} }
<button class="btn btn-primary" @click=${() => el.openUrlTargetTop(o.remote_peertube_try_anyway_url)}>${ <button type="button" class="btn btn-primary"
@click=${() => el.openUrlTargetTop(o.remote_peertube_try_anyway_url)}
>${
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
__(LOC_login_remote_peertube_video_not_found_try_anyway_button) __(LOC_login_remote_peertube_video_not_found_try_anyway_button)
}</button> }</button>

2
conversejs/custom/templates/muc-bottom-panel.js
View File

@ -117,7 +117,7 @@ const tplViewerMode = (o) => {
: html` : html`
<hr> <hr>
<div class="livechat-viewer-mode-external-login"> <div class="livechat-viewer-mode-external-login">
<button class="btn btn-primary" @click=${ev => { <button type="button" class="btn btn-primary" @click=${ev => {
ev.preventDefault() ev.preventDefault()
api.modal.show('converse-livechat-external-login') api.modal.show('converse-livechat-external-login')
}}>${i18nExternalLogin}</button> }}>${i18nExternalLogin}</button>

2
conversejs/lib/plugins/livechat-specific/toolbar.ts
View File

@ -43,7 +43,7 @@ function getToolbarButtons (this: any, toolbarEl: any, buttons: any[]): any {
size="1em"> size="1em">
</converse-icon>` </converse-icon>`
buttons.push(html` buttons.push(html`
<button class="toggle-occupants btn" <button class="toggle-occupants btn" type="button"
title="${toolbarEl.hidden_occupants ? i18nShowOccupants : i18nHideOccupants}" title="${toolbarEl.hidden_occupants ? i18nShowOccupants : i18nHideOccupants}"
@click=${(ev?: Event) => { @click=${(ev?: Event) => {
ev?.preventDefault() ev?.preventDefault()