[React  TestingLibrary]各HTMLタグに対応するroleを理解する

# はじめに
Reactのテストにおいて　Testing LibraryのgetByRoleやqueryByRoleを使って要素を取得したい時が多々あるのですが
HTMLタグとroleの紐付けがよく分からなくて絶望していたところ
WAI-ARIAのドキュメント的なのを教えていただいたのでこちらでまとめます。


# HTMLタグとRole（役割）の組み合わせ

使用頻度が高そうなものを抜粋して一覧にしました

| HTMLタグ                              | role                       |
|:-------------------------------------|:---------------------------|
| a （hrefあり）	                       | link                       |
| a （hrefなし）	                       | generic                    |
| body	                               | generic                    |
| button	                           | button                     |
| div	                               | generic                    |
| form	                               | form                       |
| h1 to h6	                           | heading                    |
| html	                               | document                   |
| img with alt="some text"	           | img                        |
| img with alt=""	                   | presentation               |
| img alt属性なし	                       | img                        |
| input type=button	                   | button                     |
| input type=checkbox	               | checkbox                   |
| input type=email                   　　 | textbox                    |
| input type=file                      | 対応なし                     |
| input type=hidden                    | 対応なし                     |  
| input type=image	                   | button                     |
| input type=month                     |対応なし	                    |
| input type=number	                   | spinbutton                 |
| input type=password                  |対応なし                      |
| input type=radio	                   | radio                      |
| input type=range	                   | slider                     |
| input type=reset	                   | button                     |
| input type=search	                   | searchbox                  |
| input type=submit	                   | button                     |
| input type=tel	                   | textbox                    |
| input type=text 	                   | textbox                    |
| input type=time                      |対応なし	                    |
| input type=url 	                   | textbox                    |
| input type=week                      |対応なし	                    |
| label                                |対応なし	                    | 
| li	                               | listitem                   |
| p	                                   | paragraph                  |
| span	                               | generic                    |
| table	                               | table                      |
| tbody	                               | rowgroup                   |
| textarea	                           | textbox                    |
| tfoot	                               | rowgroup                   |
| thead	                               | rowgroup                   |
| time	                               | time                       |


# 使い方の例

```react:使い方の例
screen.getByRole('link') //=> aタグのhrefありの要素を取得できる
screen.queryByRole('spinbutton') //=> inputタグのtype=number　を指定している要素を取得できる。
```

# 該当要素が複数ある場合


```react: たくさんあるボタンの中から「ボタン１」と書かれたものだけを取得したい

screen.getByRole('button',{name:'ボタン１'})//=>ボタン1と書かれたボタンのみを取得できる。
```
これらを使いこなせば
data-TestIdを付与しなくても要素の取得ができますね。


# 参考
WAI-ARIAについてのドキュメント

https://www.w3.org/TR/html-aria/#docconformance