svelte/test/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte

<!-- a -->
<a href="test" role="article">link</a>
<a href="test" role="banner">link</a>
<a href="test" role="complementary">link</a>
<a href="test" role="img">link</a>
<a href="test" role="listitem">link</a>
<a href="test" role="main">link</a>
<a href="test" role="region">link</a>
<a href="test" role="tooltip">link</a>
<a href="test" role="button">link</a>

<!-- button -->
<button role="article">button</button>
<button role="banner">button</button>
<button role="complementary">button</button>
<button role="img">button</button>
<button role="listitem">button</button>
<button role="main">button</button>
<button role="region">button</button>
<button role="tooltip">button</button>
<button role="button">button</button>

<!-- input -->
<input role="article"/>
<input role="banner"/>
<input role="complementary"/>
<input role="img"/>
<input role="listitem"/>
<input role="main"/>
<input role="region"/>
<input role="tooltip"/>
<input role="button"/>

<!-- select -->
<select role="article"/>
<select role="banner"/>
<select role="complementary"/>
<select role="img"/>
<select role="listitem"/>
<select role="main"/>
<select role="region"/>
<select role="tooltip"/>
<select role="button"/>

<!-- textarea -->
<textarea role="article"/>
<textarea role="banner"/>
<textarea role="complementary"/>
<textarea role="img"/>
<textarea role="listitem"/>
<textarea role="main"/>
<textarea role="region"/>
<textarea role="tooltip"/>
<textarea role="button"/>

<!-- HTML elements attributed with an abstract role -->
<div role="command" />
<div role="composite" />
<div role="input" />
<div role="landmark" />
<div role="range" />
<div role="roletype" />
<div role="section" />
<div role="sectionhead" />
<div role="select" />
<div role="structure" />
<div role="tablist" />
<div role="toolbar" />
<div role="tree" />
<div role="treegrid" />
<div role="widget" />
<div role="window" />

<!-- HTML elements with an inherent, non-interactive role, assigned an interactive role. -->
<main role="button" />
<area role="button" alt="x" />
<article role="button" />
<article role="button" />
<dd role="button" />
<dfn role="button" />
<dt role="button" />
<fieldset role="button" />
<figure role="button" />
<form role="button" />
<frame role="button" />
<h1 role="button">title</h1>
<h2 role="button">title</h2>
<h3 role="button">title</h3>
<h4 role="button">title</h4>
<h5 role="button">title</h5>
<h6 role="button">title</h6>
<hr role="button" />
<img role="button" alt="x" />
<li role="button" />
<li role="presentation" />
<nav role="button" />
<ol role="button" />
<table role="button" />
<tbody role="button" />
<td role="button" />
<tfoot role="button" />
<thead role="button" />
<ul role="button" />

<!-- HTML elements attributed with a non-interactive role -->
<div role="alert" />
<div role="alertdialog" />
<div role="application" />
<div role="article" />
<div role="banner" />
<div role="cell" />
<div role="complementary" />
<div role="contentinfo" />
<div role="definition" />
<div role="dialog" />
<div role="directory" />
<div role="document" />
<div role="feed" />
<div role="figure" />
<div role="form" />
<div role="group" />
<div role="heading" aria-level="1" />
<div role="img" />
<div role="list" />
<div role="listitem" />
<div role="log" />
<div role="main" />
<div role="marquee" />
<div role="math" />
<div role="navigation" />
<div role="note" />
<div role="region" />
<div role="rowgroup" />
<div role="search" />
<div role="separator" />
<div role="scrollbar" aria-controls="x" aria-valuenow="0" />
<div role="status" />
<div role="table" />
<div role="tabpanel" />
<div role="term" />
<div role="timer" />
<div role="tooltip" />

<!-- not valid -->
<menuitem role="listitem" />
<option class="foo" role="listitem" />
<select class="foo" role="listitem" />
<summary role="listitem" />
<textarea class="foo" role="listitem" />
<tr role="listitem" />