Skip to content

Commit

Permalink
Enhance CardWrapper component performance and accessibility
Browse files Browse the repository at this point in the history
Ref https://linear.app/ghost/issue/PLG-309/add-static-html-for-new-cta-card
- Move DEFAULT_INDICATOR_POSITION outside component to prevent recreation on render
- Add aria-label to IndicatorIcon for better screen reader support
- Add indicatorPosition to defaultProps for consistency
  • Loading branch information
sanne-san committed Jan 21, 2025
1 parent 8d388d1 commit 183b0d7
Showing 1 changed file with 9 additions and 9 deletions.
18 changes: 9 additions & 9 deletions packages/koenig-lexical/src/components/ui/CardWrapper.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ const CARD_WIDTH_CLASSES = {
full: 'inset-x-[-1px] mx-[calc(50%-50vw)] w-[calc(100vw+2px)] lg:mx-[calc(50%-50vw+(var(--kg-breakout-adjustment-with-fallback)/2))] lg:w-[calc(100vw-var(--kg-breakout-adjustment-with-fallback)+2px)]'
};

const DEFAULT_INDICATOR_POSITION = {
top: '.6rem'
};

export const CardWrapper = React.forwardRef(({
cardType,
cardWidth,
Expand Down Expand Up @@ -44,14 +48,8 @@ export const CardWrapper = React.forwardRef(({
wrapperClass()
].join(' ');

// Default positioning values
const defaultPosition = {
top: '.6rem'
};

// Merge provided position with defaults
const position = {
...defaultPosition,
...DEFAULT_INDICATOR_POSITION,
...(indicatorPosition || {})
};

Expand All @@ -60,7 +58,8 @@ export const CardWrapper = React.forwardRef(({
{IndicatorIcon &&
<div className="sticky top-0 lg:top-8">
<IndicatorIcon
className="absolute left-[-6rem] size-5 text-grey"
aria-label={`${cardType} indicator`}
className="absolute left-[-6rem] size-5 text-grey"
style={{
left: position.left,
top: position.top
Expand Down Expand Up @@ -96,5 +95,6 @@ CardWrapper.propTypes = {
};

CardWrapper.defaultProps = {
cardWidth: 'regular'
cardWidth: 'regular',
indicatorPosition: DEFAULT_INDICATOR_POSITION
};

0 comments on commit 183b0d7

Please sign in to comment.