diff --git a/change/@fluentui-react-accordion-191cfc27-d162-4222-9399-0afb7e4660c2.json b/change/@fluentui-react-accordion-191cfc27-d162-4222-9399-0afb7e4660c2.json
new file mode 100644
index 00000000000000..b65cdafabe2462
--- /dev/null
+++ b/change/@fluentui-react-accordion-191cfc27-d162-4222-9399-0afb7e4660c2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update styles to not use CSS shorthands",
+  "packageName": "@fluentui/react-accordion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index 7be9e9c62f5f90..642595069f49de 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import type { AccordionHeaderState } from './AccordionHeader.types';
 
@@ -8,12 +8,13 @@ const useStyles = makeStyles({
   // TODO: this should be extracted to another package
   resetButton: {
     boxSizing: 'content-box',
-    background: 'none',
+    backgroundColor: 'inherit',
     color: 'inherit',
-    font: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
     lineHeight: 'normal',
-    overflow: 'visible',
-    padding: '0',
+    ...shorthands.overflow('visible'),
+    ...shorthands.padding(0),
     WebkitAppearance: 'button',
     userSelect: 'none',
     textAlign: 'unset',
@@ -22,10 +23,10 @@ const useStyles = makeStyles({
   root: theme => ({
     color: theme.colorNeutralForeground1,
     backgroundColor: theme.colorNeutralBackground1,
-    borderRadius: '2px',
+    ...shorthands.borderRadius('2px'),
   }),
   rootDisabled: theme => ({
-    backgroundColor: 'none',
+    backgroundImage: 'none',
     color: theme.colorNeutralForegroundDisabled,
   }),
   rootInline: {
@@ -34,7 +35,7 @@ const useStyles = makeStyles({
   button: {
     position: 'relative',
     width: 'calc(100% - 22px)',
-    border: '1px solid transparent',
+    ...shorthands.border('1px', 'solid', 'transparent'),
     paddingRight: '10px',
     paddingLeft: '10px',
     height: '44px',
@@ -55,7 +56,9 @@ const useStyles = makeStyles({
     paddingRight: '8px',
   },
   expandIconEnd: {
-    flex: '1',
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '0%',
     display: 'flex',
     justifyContent: 'flex-end',
     paddingLeft: '8px',
@@ -72,7 +75,7 @@ const useStyles = makeStyles({
     fontFamily: theme.fontFamilyBase,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    ...shorthands.overflow('hidden'),
   }),
   childrenSmall: theme => ({
     fontSize: theme.fontSizeBase200,
diff --git a/packages/react-accordion/src/stories/AccordionCollapsible.stories.tsx b/packages/react-accordion/src/stories/AccordionCollapsible.stories.tsx
index 2cee9f70091d4b..5cde1b214fdf34 100644
--- a/packages/react-accordion/src/stories/AccordionCollapsible.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionCollapsible.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '../index';
 
 export const Collapsible = (args: AccordionProps) => (
   <Accordion {...args}>
diff --git a/packages/react-accordion/src/stories/AccordionDefault.stories.tsx b/packages/react-accordion/src/stories/AccordionDefault.stories.tsx
index 1f1846d53066e5..d899ad5b178544 100644
--- a/packages/react-accordion/src/stories/AccordionDefault.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionDefault.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '../index';
 
 export const Default = () => (
   <Accordion>
diff --git a/packages/react-accordion/src/stories/AccordionDisabled.stories.tsx b/packages/react-accordion/src/stories/AccordionDisabled.stories.tsx
index c8f5047e173a44..afacd3320c41b3 100644
--- a/packages/react-accordion/src/stories/AccordionDisabled.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionDisabled.stories.tsx
@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  AccordionItem,
-  AccordionHeader,
-  AccordionPanel,
-  Accordion,
-  AccordionItemProps,
-} from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionItemProps } from '../index';
 
 export const Disabled = (args: AccordionItemProps) => (
   <Accordion>
diff --git a/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx b/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx
index a810faaf64b44e..a54d81653bf880 100644
--- a/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionExpandIcon.stories.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { Rocket20Regular as RocketIcon } from '@fluentui/react-icons';
-import {
-  AccordionItem,
-  AccordionHeader,
-  AccordionPanel,
-  Accordion,
-  AccordionHeaderProps,
-} from '@fluentui/react-accordion';
+
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionHeaderProps } from '../index';
 
 export const ExpandIcon = (args: AccordionHeaderProps) => (
   <Accordion>
diff --git a/packages/react-accordion/src/stories/AccordionExpandIconPosition.stories.tsx b/packages/react-accordion/src/stories/AccordionExpandIconPosition.stories.tsx
index 52d902e3c1fdca..7eddfc2840985f 100644
--- a/packages/react-accordion/src/stories/AccordionExpandIconPosition.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionExpandIconPosition.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '../index';
 
 export const ExpandIconPosition = () => (
   <Accordion>
diff --git a/packages/react-accordion/src/stories/AccordionInline.stories.tsx b/packages/react-accordion/src/stories/AccordionInline.stories.tsx
index 8b6bffde358094..edc3b0a7b223e4 100644
--- a/packages/react-accordion/src/stories/AccordionInline.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionInline.stories.tsx
@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  AccordionItem,
-  AccordionHeader,
-  AccordionPanel,
-  Accordion,
-  AccordionHeaderProps,
-} from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionHeaderProps } from '../index';
 
 export const Inline = (args: AccordionHeaderProps) => (
   <Accordion>
diff --git a/packages/react-accordion/src/stories/AccordionMultiple.stories.tsx b/packages/react-accordion/src/stories/AccordionMultiple.stories.tsx
index 4fb189504b8227..d2aa7ba1997abc 100644
--- a/packages/react-accordion/src/stories/AccordionMultiple.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionMultiple.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '../index';
 
 export const Multiple = (args: AccordionProps) => (
   <Accordion {...args}>
diff --git a/packages/react-accordion/src/stories/AccordionNavigable.stories.tsx b/packages/react-accordion/src/stories/AccordionNavigable.stories.tsx
index 8d6079868f9180..183d45a0a6813a 100644
--- a/packages/react-accordion/src/stories/AccordionNavigable.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionNavigable.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '../index';
 
 export const Navigable = (args: AccordionProps) => (
   <Accordion {...args}>
diff --git a/packages/react-accordion/src/stories/AccordionOpenItems.stories.tsx b/packages/react-accordion/src/stories/AccordionOpenItems.stories.tsx
index 40efc7418e5963..9098e4aa1092b9 100644
--- a/packages/react-accordion/src/stories/AccordionOpenItems.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionOpenItems.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionProps } from '../index';
 
 export const OpenItems = (args: AccordionProps) => (
   <Accordion {...args}>
diff --git a/packages/react-accordion/src/stories/AccordionSizes.stories.tsx b/packages/react-accordion/src/stories/AccordionSizes.stories.tsx
index 2a9b02a73b52a4..4ed0197fcb9745 100644
--- a/packages/react-accordion/src/stories/AccordionSizes.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionSizes.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-
-import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '@fluentui/react-accordion';
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion } from '../index';
 
 export const Sizes = () => (
   <>
diff --git a/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx b/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx
index 8250a26152ff51..0c09501a30be94 100644
--- a/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx
+++ b/packages/react-accordion/src/stories/AccordionWithIcon.stories.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
 import { Rocket20Regular as RocketIcon } from '@fluentui/react-icons';
-import {
-  AccordionItem,
-  AccordionHeader,
-  AccordionPanel,
-  Accordion,
-  AccordionHeaderProps,
-} from '@fluentui/react-accordion';
+
+import { AccordionItem, AccordionHeader, AccordionPanel, Accordion, AccordionHeaderProps } from '../index';
 
 export const WithIcon = (args: AccordionHeaderProps) => (
   <Accordion>