fix(radio-button): forward focus, blur events (#2135)

As identified in #2131, `focus` and `blur` events should be
forwarded to the underlying `RadioButton` element.

COMPONENT_INDEX.md

@@ -2966,6 +2966,8 @@ None.
 
 | Event name | Type      | Detail |
 | :--------- | :-------- | :----- |
+| focus      | forwarded | --     |
+| blur       | forwarded | --     |
 | change     | forwarded | --     |
 
 ## `RadioButtonGroup`

docs/src/COMPONENT_API.json

@@ -11389,6 +11389,16 @@
         }
       ],
       "events": [
+        {
+          "type": "forwarded",
+          "name": "focus",
+          "element": "input"
+        },
+        {
+          "type": "forwarded",
+          "name": "blur",
+          "element": "input"
+        },
         {
           "type": "forwarded",
           "name": "change",

src/RadioButton/RadioButton.svelte

@@ -71,6 +71,8 @@
     required={$groupRequired ?? required}
     {value}
     class:bx--radio-button={true}
+    on:focus
+    on:blur
     on:change
     on:change={() => {
       if (update) {

tests/RadioButton/RadioButton.test.svelte

@@ -26,6 +26,12 @@
   {id}
   {name}
   {ref}
+  on:focus={() => {
+    console.log("focus");
+  }}
+  on:blur={() => {
+    console.log("blur");
+  }}
   on:change={() => {
     console.log("change");
   }}

tests/RadioButton/RadioButton.test.ts

@@ -91,8 +91,7 @@ describe("RadioButton", () => {
     expect(consoleLog).toHaveBeenCalledWith("change");
   });
 
-  // TODO(bug): forward focus/blur events.
+  it("should handle focus and blur events", async () => {
-  it.skip("should handle focus and blur events", async () => {
     const consoleLog = vi.spyOn(console, "log");
     render(RadioButton);
 

types/RadioButton/RadioButton.svelte.d.ts

@@ -71,6 +71,10 @@ export type RadioButtonProps = Omit<$RestProps, keyof $Props> & $Props;
 
 export default class RadioButton extends SvelteComponentTyped<
   RadioButtonProps,
-  { change: WindowEventMap["change"] },
+  {
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    change: WindowEventMap["change"];
+  },
   { labelText: {} }
 > {}