diff --git a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
index 5b432bafb0..f49838564c 100644
--- a/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx
@@ -230,6 +230,7 @@ const FlexChildSectionSizing = () => {
             properties={["flexGrow", "flexShrink", "flexBasis"]}
           >
             <ToggleGroupButton
+              aria-checked={item.value === selectedValue}
               value={item.value}
               onMouseEnter={() =>
                 // reset only when highlighted is not active
@@ -368,6 +369,15 @@ const FlexChildSectionOrder = () => {
             properties={["flexGrow", "flexShrink", "flexBasis"]}
           >
             <ToggleGroupButton
+              aria-checked={
+                item.value === selectedValue ||
+                // flex-order takes integer value, so the value can be anything from +- 0-9
+                // And we already have toggle buttons for -1, 0, 1
+                // https://developer.mozilla.org/en-US/docs/Web/CSS/order#formal_syntax
+                (item.value === "" &&
+                  (Number.parseFloat(selectedValue) > 1 ||
+                    Number.parseFloat(selectedValue) < -1))
+              }
               value={item.value}
               onMouseEnter={() =>
                 // reset only when highlighted is not active