Improved accessibility (#118):

* 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
11 changed files with 24 additions and 19 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -30,12 +30,12 @@ export function tplMucTask (el, task) {
</label>
</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}
>
<converse-icon class="fa fa-edit" size="1em"></converse-icon>
</button>
<button class="task-action" title="${i18nDelete}"
<button type="button" class="task-action" title="${i18nDelete}"
@click=${el.deleteTask}
>
<converse-icon class="fa fa-trash-alt" size="1em"></converse-icon>