add

packages/radix-vue/src/ToggleGroup/ToggleGroupItem.vue

@@ -7,7 +7,7 @@ interface ToggleGroupItemProps {
 </script>
 
 <script setup lang="ts">
-import { inject, computed } from "vue";
+import { inject, computed, onMounted } from "vue";
 import { PrimitiveButton, usePrimitiveElement } from "@/Primitive";
 import {
   TOGGLE_GROUP_INJECTION_KEY,
@@ -23,8 +23,11 @@ const props = withDefaults(defineProps<ToggleGroupItemProps>(), {
   asChild: false,
 });
 
-const { primitiveElement, currentElement: currentToggleElement } =
-  usePrimitiveElement();
+const { primitiveElement, currentElement } = usePrimitiveElement();
+
+onMounted(()=>{
+  injectedValue?.itemsArray.value?.push(currentElement.value!)
+})
 
 const state = computed(() => {
   if (injectedValue?.type === "multiple") {
@@ -37,25 +40,48 @@ const state = computed(() => {
 });
 
 function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") {
+    e.preventDefault();
+  }
   const newSelectedElement = useArrowNavigation(
     e,
-    currentToggleElement.value!,
-    injectedValue?.parentElement.value!
+    currentElement.value!,
+    injectedValue?.parentElement.value!,
+    { loop: injectedValue?.loop }
   );
-  newSelectedElement?.focus();
+
+  if (newSelectedElement) {
+    newSelectedElement.focus();
+    injectedValue!.currentFocusedElement!.value = newSelectedElement;
+  }
 }
+
+const getTabIndex = computed(() => {
+  if (!injectedValue?.currentFocusedElement?.value) {
+    return injectedValue?.modelValue?.value === props.value ? "0" : "-1";
+  } else
+    return injectedValue?.currentFocusedElement?.value === currentElement.value
+      ? "0"
+      : "-1";
+});
+
+const getRole = computed(() => {
+  return injectedValue?.type === "multiple" ? 'checkbox' : 'radio'
+})
 </script>
 
 <template>
   <PrimitiveButton
+    ref="primitiveElement"
     type="button"
+    :role="getRole"
     :data-state="state"
     :data-disabled="props.disabled"
     :data-orientation="injectedValue?.orientation"
     @click="injectedValue?.changeModelValue(props.value!)"
-    ref="primitiveElement"
     @keydown="handleKeydown"
     data-radix-vue-collection-item
+    :tabindex="getTabIndex"
   >
     <slot />
   </PrimitiveButton>

packages/radix-vue/src/ToggleGroup/ToggleGroupRoot.vue

@@ -14,7 +14,7 @@ export interface ToggleGroupRootProps {
   rovingFocus?: boolean;
   orientation?: DataOrientation;
   dir?: Direction;
-  loop?: boolean;
+  loop: boolean;
   modelValue?: string | string[];
 }
 
@@ -26,17 +26,23 @@ export interface ToggleGroupProvideValue {
   modelValue?: Readonly<Ref<string | string[] | undefined>>;
   changeModelValue: (value: string) => void;
   parentElement: Ref<HTMLElement | undefined>;
+  currentFocusedElement: Ref<HTMLElement | undefined>;
   activeValue?: Readonly<Ref<string>>;
+  dir?: Direction;
   orientation?: DataOrientation;
+  loop: boolean;
+  itemsArray: Ref<HTMLElement[] | undefined>;
 }
 </script>
 
 <script setup lang="ts">
-import { ref, toRef, provide } from "vue";
+import { ref, provide, watch } from "vue";
+import { useVModel, useActiveElement } from "@vueuse/core";
 import { PrimitiveDiv, usePrimitiveElement } from "@/Primitive";
 
 const props = withDefaults(defineProps<ToggleGroupRootProps>(), {
   type: "single",
+  loop: true,
 });
 
 const emits = defineEmits(["update:modelValue"]);
@@ -45,19 +51,31 @@ const { primitiveElement, currentElement: parentElement } =
   usePrimitiveElement();
 
 const activeValue = ref();
+const currentFocusedElementRef = ref<HTMLElement>();
+const activeElement = useActiveElement();
+const itemsArray = ref<HTMLElement[]>([]);
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
 
 provide<ToggleGroupProvideValue>(TOGGLE_GROUP_INJECTION_KEY, {
   type: props.type,
-  modelValue: toRef(() => props.modelValue),
+  modelValue,
   changeModelValue: changeModelValue,
   parentElement,
   activeValue: activeValue,
+  currentFocusedElement: currentFocusedElementRef,
+  dir: props.dir,
   orientation: props.orientation,
+  loop: props.loop,
+  itemsArray,
 });
 
 function changeModelValue(value: string) {
   if (props.type === "single") {
-    emits("update:modelValue", value);
+    modelValue.value = value;
   } else {
     let modelValueArray = props.modelValue as string[];
     if (modelValueArray.includes(value)) {
@@ -66,16 +84,30 @@ function changeModelValue(value: string) {
     } else {
       modelValueArray.push(value);
     }
-    emits("update:modelValue", modelValueArray);
+    modelValue.value = modelValueArray;
   }
 }
+
+watch(
+  activeElement,
+  () => {
+    if (activeElement.value === parentElement.value) {
+      if (itemsArray.value.length && !currentFocusedElementRef.value) {
+        itemsArray.value[0].focus();
+        currentFocusedElementRef.value = itemsArray.value[0];
+      }
+    }
+  },
+  { immediate: true }
+);
 </script>
 
 <template>
   <PrimitiveDiv
     ref="primitiveElement"
     role="group"
     :dir="props.dir"
+    tabindex="0"
     aria-label="Text alignment"
     :data-orientation="props.orientation"
   >