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

@ -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>