App Groups - Make list titles bolder, change color to contrast most for a11y #309
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
The changes here are to make the action group stack vertically before MUI's sm breakpoint after adding the "expand/collapse all" button
There was a problem hiding this comment.
Pull Request Overview
A fix for the accordion expand/collapse behavior plus styling updates to improve list title contrast and weight for accessibility.
- Refactored the action group layout to use responsive MUI Box containers.
- Adjusted accordion expanded logic to remove premature global expansion.
- Updated list group titles from
primarycolor and default weight totext.accentandfontWeight={500}.
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/pages/apps/components/AppsAdminActionGroup.tsx | Replaced nested Stack with responsive Box wrappers in layout |
| src/pages/apps/components/AppsAccordionListGroup.tsx | Changed per-item expanded logic and updated title typography color |
Comments suppressed due to low confidence (1)
src/pages/apps/components/AppsAccordionListGroup.tsx:167
- Removing the global
isExpandedfallback prevents the 'Expand All' toggle from working as intended; consider restoring|| isExpandedto allow the global expand/collapse state to apply.
<Accordion expanded={expanded[appGroup.name] || false}
| '@media (max-width: 680px)': { | ||
| flexDirection: 'column', | ||
| gap: 2, | ||
| alignItems: 'stretch', | ||
| }, | ||
| '@media (min-width: 681px)': { | ||
| flexDirection: 'row', | ||
| gap: 0, | ||
| alignItems: 'center', | ||
| }, | ||
| }}> | ||
| <Box | ||
| sx={{ | ||
| flex: {xs: 'none', md: '1 1 auto'}, | ||
| '@media (max-width: 680px)': { | ||
| flex: 'none', | ||
| }, | ||
| '@media (min-width: 681px)': { | ||
| flex: '1 1 auto', | ||
| }, |
There was a problem hiding this comment.
[nitpick] The responsive styles duplicate MUI breakpoint logic with custom media queries; you can simplify by relying entirely on MUI's built-in breakpoint syntax (e.g., flexDirection: { xs: 'column', md: 'row' }) and remove the explicit @media blocks.
| '@media (max-width: 680px)': { | |
| flexDirection: 'column', | |
| gap: 2, | |
| alignItems: 'stretch', | |
| }, | |
| '@media (min-width: 681px)': { | |
| flexDirection: 'row', | |
| gap: 0, | |
| alignItems: 'center', | |
| }, | |
| }}> | |
| <Box | |
| sx={{ | |
| flex: {xs: 'none', md: '1 1 auto'}, | |
| '@media (max-width: 680px)': { | |
| flex: 'none', | |
| }, | |
| '@media (min-width: 681px)': { | |
| flex: '1 1 auto', | |
| }, | |
| flexDirection: { xs: 'column', md: 'row' }, | |
| gap: { xs: 2, md: 0 }, | |
| alignItems: { xs: 'stretch', md: 'center' }, | |
| }}> | |
| <Box | |
| sx={{ | |
| flex: {xs: 'none', md: '1 1 auto'}, | |
| flex: { xs: 'none', md: '1 1 auto' }, |
Copilot uses AI. Check for mistakes.
Uh oh!
There was an error while loading. Please reload this page.