Skip to content

[Bug][a11y]: Clear button isn't accessible #950

@michaelvalenti

Description

@michaelvalenti

Bug description

Clear button is not a . It's a

element without any attributes to make it accessible.
To make it accessible we need to add role="button" and tabindex="0"

Expected behavior

It would be great if we can add role="button" and tabindex="0" to the clear button to make it accessible.

export type CBOptions = {
	className	?:string,
	title		?:string,
	html		?: (data:CBOptions) => string,
	role		?:string,
	tabindex	?:number
}
const options = Object.assign({
	className: 'clear-button',
	title: 'Clear All',
	role: 'button',
	tabindex: 0,
	html: (data:CBOptions) => {
		return `<div class="${data.className}" title="${data.title}" role="${data.role}" tabindex="${data.tabindex}">&#10799;</div>`;
	}
}, userOptions);

Steps to reproduce

Enable clear button plugin

Additional context

Same issue on all versions/OS.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions