fix: add title property to Link and LinkButton Components. for WCAG (#97

)
KRDS-community · Dec 28, 2024 · f413992 · f413992
1 parent 79fffe1
commit f413992
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/packages/core/lib/components/Link.tsx b/packages/core/lib/components/Link.tsx
@@ -6,6 +6,7 @@ export type LinkProps<E extends React.ElementType> = {
   color?: Color;
   children: React.ReactNode;
   className?: string;
+  title?: string;
 } & React.ComponentPropsWithoutRef<E>;
 
 export const Link = <E extends React.ElementType = 'a'>({
@@ -14,6 +15,7 @@ export const Link = <E extends React.ElementType = 'a'>({
   color = 'gray-90',
   children,
   className = '',
+  title,
   ...props
 }: LinkProps<E>) => {
   const sizeClass = {
@@ -31,6 +33,8 @@ export const Link = <E extends React.ElementType = 'a'>({
   return (
     <a
       className={`${sizeClass} ${weightClass} ${textColorClass} ${className}`}
+      title={title}
+      aria-label={title}
       {...props}
     >
       {children}

diff --git a/packages/core/lib/components/LinkButton.tsx b/packages/core/lib/components/LinkButton.tsx
@@ -8,6 +8,7 @@ export type LinkButtonProps<E extends React.ElementType> = {
   children: React.ReactNode;
   className?: string;
   link: string;
+  title?: string;
 } & React.ComponentPropsWithoutRef<E>;
 
 export const LinkButton = <E extends React.ElementType = 'a'>({
@@ -16,6 +17,7 @@ export const LinkButton = <E extends React.ElementType = 'a'>({
   children,
   className = '',
   link,
+  title,
   ...props
 }: LinkButtonProps<E>) => {
   const baseStyles =
@@ -52,6 +54,7 @@ export const LinkButton = <E extends React.ElementType = 'a'>({
       href={link}
       role="link"
       weight={variantStyles.weight}
+      title={title}
       {...props}
     >
       {children}

diff --git a/stories/core/LinkButton.stories.ts b/stories/core/LinkButton.stories.ts
@@ -33,20 +33,23 @@ export const Accent: Story = {
     variant: 'accent',
     children: '링크 버튼: Accent',
     link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    title: 'uiux.egovframe.go.kr 이동',
   },
 };
 
 export const Default: Story = {
   args: {
     children: '링크 버튼: Default',
     link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    title: 'uiux.egovframe.go.kr 이동',
   },
 };
 
 export const Small: Story = {
   args: {
     children: '링크 버튼: Default',
     link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    title: 'uiux.egovframe.go.kr 이동',
     size: 'small',
   },
 };
@@ -55,6 +58,7 @@ export const Medium: Story = {
   args: {
     children: '링크 버튼: Default',
     link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    title: 'uiux.egovframe.go.kr 이동',
     size: 'medium',
   },
 };
@@ -63,6 +67,7 @@ export const Large: Story = {
   args: {
     children: '링크 버튼: Default',
     link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    title: 'uiux.egovframe.go.kr 이동',
     size: 'large',
   },
 };
@@ -71,6 +76,7 @@ export const popupLink: Story = {
   args: {
     children: '팝업 링크 버튼',
     link: 'https://uiux.egovframe.go.kr/guide/index.html',
+    title: 'uiux.egovframe.go.kr 이동',
     target: '_blank',
     rel: 'noopener noreferrer',
   },