feat: anchor系コンポーネントがtarget属性を持つ場合、rel属性を自動設定する (#4720)

Author: AtsushiM

packages/smarthr-ui/src/components/Button/AnchorButton.tsx

@@ -20,13 +20,19 @@ export const AnchorButton = forwardRef<HTMLAnchorElement, BaseProps & ElementPro
       suffix,
       wide = false,
       variant = 'secondary',
+      target,
+      rel,
       className,
       children,
       ...props
     },
     ref,
   ) => {
     const styles = useMemo(() => anchorButton({ className }), [className])
+    const actualRel = useMemo(
+      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),
+      [rel, target],
+    )
 
     return (
       <ButtonWrapper
@@ -36,6 +42,8 @@ export const AnchorButton = forwardRef<HTMLAnchorElement, BaseProps & ElementPro
         wide={wide}
         variant={variant}
         className={styles}
+        target={target}
+        rel={actualRel}
         isAnchor
         anchorRef={ref}
       >

packages/smarthr-ui/src/components/TextLink/TextLink.stories.tsx

@@ -26,6 +26,11 @@ export const All: StoryFn = () => (
         別タブで開くルートへのリンク
       </TextLink>
     </li>
+    <li>
+      <TextLink href="/" target="_blank" rel={null}>
+        別タブで開くルートへのリンク（rel属性 なし）
+      </TextLink>
+    </li>
     <li>
       <TextLink href="/" target="_blank" suffix={null}>
         別タブで開くルートへのリンク（suffix なし）

packages/smarthr-ui/src/components/TextLink/TextLink.tsx

@@ -21,9 +21,12 @@ const textLink = tv({
     suffixWrapper: 'shr-ms-0.25 shr-align-middle',
   },
 })
+const { anchor, prefixWrapper, suffixWrapper } = textLink()
+const prefixWrapperClassName = prefixWrapper()
+const suffixWrapperClassName = suffixWrapper()
 
 export const TextLink = forwardRef<HTMLAnchorElement, Props & ElementProps>(
-  ({ href, target, onClick, children, prefix, suffix, className, ...others }, ref) => {
+  ({ href, target, rel, onClick, children, prefix, suffix, className, ...others }, ref) => {
     const actualSuffix = useMemo(() => {
       if (target === '_blank' && suffix === undefined) {
         return <FaExternalLinkAltIcon aria-label="別タブで開く" />
@@ -41,6 +44,12 @@ export const TextLink = forwardRef<HTMLAnchorElement, Props & ElementProps>(
 
       return undefined
     }, [href, onClick])
+    const actualRel = useMemo(
+      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),
+      [rel, target],
+    )
+    const anchorClassName = useMemo(() => anchor({ className }), [className])
+
     const actualOnClick = useMemo(() => {
       if (!onClick) {
         return undefined
@@ -54,20 +63,19 @@ export const TextLink = forwardRef<HTMLAnchorElement, Props & ElementProps>(
       }
     }, [href, onClick])
 
-    const { anchor, prefixWrapper, suffixWrapper } = useMemo(() => textLink(), [])
-
     return (
       <a
         {...others}
         ref={ref}
         href={actualHref}
         target={target}
+        rel={actualRel}
         onClick={actualOnClick}
-        className={anchor({ className })}
+        className={anchorClassName}
       >
-        {prefix && <span className={prefixWrapper()}>{prefix}</span>}
+        {prefix && <span className={prefixWrapperClassName}>{prefix}</span>}
         {children}
-        {actualSuffix && <span className={suffixWrapper()}>{actualSuffix}</span>}
+        {actualSuffix && <span className={suffixWrapperClassName}>{actualSuffix}</span>}
       </a>
     )
   },