docs: add role="switch" to switches

`role="switch"` is automatically added to checkboxes with the switch attribute in Safari, but we still need to add `role="switch"` for Chromium and Firefox etc,

diff --git a/site/src/components/shortcodes/StepperPlayground.astro b/site/src/components/shortcodes/StepperPlayground.astro
index 57ebef4c7b82b81cce23005f84b8ee56ba272b25..e9b952af317474bb141d6467aaa984bdae6a2292 100644 (file)
--- a/site/src/components/shortcodes/StepperPlayground.astro
+++ b/site/src/components/shortcodes/StepperPlayground.astro
@@ -134,7 +134,7 @@ const stepCounts = [3, 4, 5, 6]
       <label class="form-label fw-semibold mb-0 user-select-none">&nbsp;</label>
       <b-checkgroup class="py-2">
         <div class="switch">
-          <input type="checkbox" value="" id="stepper-fullwidth" switch>
+          <input type="checkbox" value="" id="stepper-fullwidth" role="switch" switch>
         </div>
         <label for="stepper-fullwidth">Full width</label>
       </b-checkgroup>

diff --git a/site/src/content/docs/forms/switch.mdx b/site/src/content/docs/forms/switch.mdx
index 4112b91b6d2babd07b14ad7e74d7589dc7881009..1f8a9a42f86b235946bf751554b9a495cf371c65 100644 (file)
--- a/site/src/content/docs/forms/switch.mdx
+++ b/site/src/content/docs/forms/switch.mdx
@@ -15,7 +15,7 @@ Switches work by layering an invisible checkbox over the custom switch indicator
 Switches also include the `switch` attribute for browsers that support it. This provides haptic feedback when toggling the switch.
 
 <Example code={`<div class="switch">
-    <input type="checkbox" value="" id="switch" switch>
+    <input type="checkbox" value="" id="switch" role="switch" switch>
   </div>`} />
 
 ## Label
@@ -26,14 +26,14 @@ Consider margin utilities for additional spacing, and flex utilities for alignme
 
 <Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
     <div class="switch switch-sm mt-1">
-      <input type="checkbox" value="" id="switchSmLabel" switch>
+      <input type="checkbox" value="" id="switchSmLabel" role="switch" switch>
     </div>
     <label for="switchSmLabel">Small switch</label>
   </b-checkgroup>
 
   <b-checkgroup>
     <div class="switch">
-      <input type="checkbox" value="" id="switchMdLabel" switch>
+      <input type="checkbox" value="" id="switchMdLabel" role="switch" switch>
     </div>
     <label for="switchMdLabel">Default switch</label>
   </b-checkgroup>`} />
@@ -44,7 +44,7 @@ Modify the appearance of checked checkboxes by adding the `.checked-{color}` cla
 
 <Example class="d-flex flex-column gap-2" code={getData('theme-colors').map((themeColor) => ` <b-checkgroup>
     <div class="switch switch-sm mt-1 checked-${themeColor.name}">
-      <input type="checkbox" value="" id="switch${themeColor.name}" switch checked>
+      <input type="checkbox" value="" id="switch${themeColor.name}" role="switch" switch checked>
     </div>
     <label for="switch${themeColor.name}">Example ${themeColor.name} switch</label>
   </b-checkgroup>`)} />
@@ -55,7 +55,7 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 
 <Example class="d-flex flex-column gap-3" code={`<b-checkgroup>
     <div class="switch">
-      <input type="checkbox" value="" id="switchDisabledLabel" switch disabled>
+      <input type="checkbox" value="" id="switchDisabledLabel" role="switch" switch disabled>
     </div>
     <label for="switchDisabledLabel">Disabled switch</label>
   </b-checkgroup>`} />
@@ -65,13 +65,13 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
 Add a size modifier class to make your switch appear smaller or larger.
 
 <Example class="d-flex flex-column gap-3" code={`<div class="switch switch-sm">
-    <input type="checkbox" value="" id="switchSizeSm" switch>
+    <input type="checkbox" value="" id="switchSizeSm" role="switch" switch>
   </div>
   <div class="switch">
-    <input type="checkbox" value="" id="switchSizeMd" switch>
+    <input type="checkbox" value="" id="switchSizeMd" role="switch" switch>
   </div>
   <div class="switch switch-lg">
-    <input type="checkbox" value="" id="switchSizeLg" switch>
+    <input type="checkbox" value="" id="switchSizeLg" role="switch" switch>
   </div>`} />
 
 ## CSS

diff --git a/site/src/content/docs/getting-started/rtl.mdx b/site/src/content/docs/getting-started/rtl.mdx
index 7822a6be42ba429af91dc3d82c030a8900128f65..c475bd1df4d0eec39da759d5be363ad81eacb2cb 100644 (file)
--- a/site/src/content/docs/getting-started/rtl.mdx
+++ b/site/src/content/docs/getting-started/rtl.mdx
@@ -37,7 +37,7 @@ Toggle between LTR and RTL on this page to see Bootstrap's logical properties in
 <div class="bd-example">
   <b-checkgroup>
     <div class="switch">
-      <input type="checkbox" value="" id="rtlSwitch" switch />
+      <input type="checkbox" value="" id="rtlSwitch" role="switch" switch />
     </div>
     <label for="rtlSwitch">Enable RTL mode</label>
   </b-checkgroup>