feat: validate output HTML (#2475)

* Remove unnecessary `role` attributes

* Add missing type=“button”

* Add scope=“col”

* Add test to validate HTML

* Add scope=“row” to week number

* Tests: update gridcell vs cell

* Update snapshots

Author: gpbl

examples/Input.test.tsx

@@ -13,7 +13,7 @@ function textbox() {
 }
 
 function gridcells() {
-  return screen.queryAllByRole("gridcell") as HTMLTableCellElement[];
+  return screen.queryAllByRole("cell") as HTMLTableCellElement[];
 }
 
 function selectedCells() {

examples/ModifiersHidden.test.tsx

@@ -18,6 +18,6 @@ afterAll(() => jest.useRealTimers());
 test.each(days)("the day %s should be hidden", (day) => {
   render(<ModifiersHidden />);
   expect(
-    screen.queryByRole("gridcell", { name: `${day.getDate()}` })
+    screen.queryByRole("cell", { name: `${day.getDate()}` })
   ).not.toBeInTheDocument();
 });

examples/Range.test.tsx

@@ -61,7 +61,7 @@ describe("when a day in the range is clicked", () => {
 });
 
 function getAllSelected() {
-  const gridcells = screen.getAllByRole("gridcell");
+  const gridcells = screen.getAllByRole("cell");
 
   return Array.from(gridcells).filter(
     (gridcell) => gridcell.getAttribute("aria-selected") === "true"

examples/Weeknumber.test.tsx

@@ -9,7 +9,7 @@ const today = new Date(2021, 10, 25);
 beforeAll(() => jest.setSystemTime(today));
 afterAll(() => jest.useRealTimers());
 
-function getWeekButton(week: number) {
+function getWeek(week: number) {
   return screen.getByRole("rowheader", {
     name: `Week ${week}`
   });
@@ -19,6 +19,6 @@ beforeEach(() => render(<Weeknumber />).container);
 
 describe("when displaying November 2021", () => {
   test("should display the 45th week number", () => {
-    expect(getWeekButton(45)).toBeInTheDocument();
+    expect(getWeek(45)).toBeInTheDocument();
   });
 });

examples/WeeknumberCustom.tsx

@@ -13,9 +13,9 @@ export function WeeknumberCustom() {
       defaultMonth={addMonths(today, -1)}
       components={{
         WeekNumber: ({ week, ...props }: WeekNumberProps) => (
-          <td {...props}>
+          <th {...props}>
             <button onClick={() => console.log(week)}>{props.children}</button>
-          </td>
+          </th>
         )
       }}
       labels={{