Refactor Accordion component

apps/website/screens/common/themes/advanced-theme.json

@@ -2,45 +2,43 @@
   "accordion": {
     "backgroundColor": "#ffffff",
     "hoverBackgroundColor": "#f2eafa",
+    "focusBackgroundColor": "transparent",
+    "activeBackgroundColor": "#f2eafa",
     "arrowColor": "#5f249f",
     "disabledArrowColor": "#999999",
+    "subLabelFontFamily": "Open Sans, sans-serif",
+    "subLabelFontSize": "0.75rem",
+    "subLabelFontWeight": "400",
+    "subLabelFontStyle": "normal",
+    "subLabelFontColor": "#666666",
+    "disabledSubLabelFontColor": "#999999",
     "assistiveTextFontFamily": "Open Sans, sans-serif",
-    "assistiveTextFontSize": "1rem",
-    "assistiveTextFontWeight": "300",
-    "assistiveTextFontStyle": "italic",
-    "assistiveTextLetterSpacing": "0.025em",
+    "assistiveTextFontSize": "0.75rem",
+    "assistiveTextFontWeight": "400",
+    "assistiveTextFontStyle": "normal",
     "assistiveTextFontColor": "#666666",
     "disabledAssistiveTextFontColor": "#999999",
-    "assistiveTextMinWidth": "100px",
-    "assistiveTextPaddingRight": "1.5rem",
-    "assistiveTextPaddingLeft": "0rem",
     "titleLabelFontFamily": "Open Sans, sans-serif",
     "titleLabelFontSize": "1rem",
     "titleLabelFontWeight": "400",
     "titleLabelFontStyle": "normal",
-    "titleLabelFontColor": "#000000",
+    "titleLabelFontColor": "#333333",
     "disabledTitleLabelFontColor": "#999999",
-    "titleLabelPaddingTop": "0rem",
-    "titleLabelPaddingBottom": "0rem",
-    "titleLabelPaddingLeft": "0rem",
-    "titleLabelPaddingRight": "1rem",
     "focusBorderColor": "#0095ff",
     "focusBorderStyle": "solid",
     "focusBorderThickness": "2px",
     "borderRadius": "4px",
     "boxShadowOffsetX": "0px",
-    "boxShadowOffsetY": "6px",
-    "boxShadowBlur": "10px",
+    "boxShadowOffsetY": "12px",
+    "boxShadowBlur": "12px",
+    "boxShadowSpread": "0px",
     "boxShadowColor": "#0000001a",
     "iconColor": "#5f249f",
     "disabledIconColor": "#999999",
     "iconSize": "24px",
-    "iconMarginLeft": "0rem",
-    "iconMarginRight": "0.75rem",
-    "accordionGroupSeparatorBorderColor": "#0000001a",
-    "accordionGroupSeparatorBorderThickness": "1px",
-    "accordionGroupSeparatorBorderRadius": "0px",
-    "accordionGroupSeparatorBorderStyle": "solid"
+    "accordionSeparatorBorderColor": "#e6e6e6",
+    "accordionSeparatorBorderThickness": "1px",
+    "accordionSeparatorBorderStyle": "solid"
   },
   "alert": {
     "overlayColor": "#000000b3",

apps/website/screens/common/themes/opinionated-theme.json

@@ -1,7 +1,8 @@
 {
   "accordion": {
     "accentColor": "#5f249f",
-    "titleFontColor": "#000000",
+    "titleFontColor": "#333333",
+    "subLabelFontColor": "#666666",
     "assistiveTextFontColor": "#666666"
   },
   "button": {

apps/website/screens/components/accordion/AccordionPageLayout.tsx

@@ -17,9 +17,10 @@ const AccordionPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Accordion" />
           <DxcParagraph>
-            Accordions are used to group similar content and hide or show it depending on user needs or preferences.
-            Accordions give users more granular control over the interface and help digest content in stages, rather
-            than all at once.
+            The accordion component is a vertical stack of interactive headers used to group related content into
+            collapsible sections, allowing users to expand or hide content based on their needs or preferences. It
+            enhances the user experience by organizing information into smaller, digestible chunks, helping reduce
+            cognitive load and save screen space.
           </DxcParagraph>
           <TabsPageHeading tabs={tabs}></TabsPageHeading>
         </DxcFlex>