From 45498832e3df91ec50cb10670698c5f4022bd473 Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+bstanton678@users.noreply.github.com>
Date: Tue, 25 Jul 2023 14:29:53 -0700
Subject: [PATCH] fix: Changing ARIA role to switch (#2292)

Contributing updates to the accessibility guidelines on the Canvas Kit design site, I noticed the Switch component rendered with an ARIA checkbox role. This didn't seem appropriate for the Switch component.  Additionally, removing tabindex attribute. Didn't seem necessary when the input element is already in focus order anyway.

[category:Components]

Co-authored-by: @alanbsmith <a.bax.smith@gmail.com>
---
 cypress/integration/Switch.spec.ts        |  2 +-
 modules/react/switch/lib/Switch.tsx       |  3 +--
 modules/react/switch/spec/Switch.spec.tsx | 10 +---------
 3 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/cypress/integration/Switch.spec.ts b/cypress/integration/Switch.spec.ts
index af4abc0549..74dce64277 100644
--- a/cypress/integration/Switch.spec.ts
+++ b/cypress/integration/Switch.spec.ts
@@ -1,7 +1,7 @@
 import * as h from '../helpers';
 
 const getSwitch = () => {
-  return cy.findByRole('checkbox');
+  return cy.findByRole('switch');
 };
 
 describe('Switch', () => {
diff --git a/modules/react/switch/lib/Switch.tsx b/modules/react/switch/lib/Switch.tsx
index c33dbda0db..d34e3af925 100644
--- a/modules/react/switch/lib/Switch.tsx
+++ b/modules/react/switch/lib/Switch.tsx
@@ -177,8 +177,7 @@ export const Switch = createComponent('input')({
           id={inputId}
           ref={ref}
           onChange={onChange}
-          role="checkbox"
-          tabIndex={0}
+          role="switch"
           type="checkbox"
           value={value}
           {...elemProps}
diff --git a/modules/react/switch/spec/Switch.spec.tsx b/modules/react/switch/spec/Switch.spec.tsx
index 2cf9bbbe73..01842bffa7 100644
--- a/modules/react/switch/spec/Switch.spec.tsx
+++ b/modules/react/switch/spec/Switch.spec.tsx
@@ -5,15 +5,7 @@ import {Switch} from '../lib/Switch';
 describe('Switch', () => {
   const cb = jest.fn();
 
-  /**
-   * Today, this is hardcoded but this could possibly be
-   * configurable in the future (e.g. role='switch').
-   * In fact, 'checkbox' probably isn't the correct role
-   * according to MDN and ARIA
-   * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role
-   * https://www.w3.org/TR/wai-aria-1.1/#switch
-   */
-  const role = 'checkbox';
+  const role = 'switch';
 
   afterEach(() => {
     cb.mockClear();