Merge pull request #54 from YusukeHirao/hotfix/a11y/icon-wrapper

アイコン名のキャメルケース表記を単語間に空白を加えて可読性を改善

src/components/react/IconList/IconWrapper.module.css

@@ -23,6 +23,7 @@
     line-height: var(--text-body-sm-line);
     color: var(--color-text-sub);
     text-align: center;
+    word-wrap: normal;
 }
 
 .copy {
@@ -36,7 +37,3 @@
 .wrapper:hover .copy {
     opacity: 1;
 }
-
-.word {
-    display: inline-block;
-}

src/components/react/IconList/IconWrapper.tsx

@@ -12,27 +12,19 @@ const convertToIconComponentName = (iconName: string) => {
   return `import { ${iconName} } from '@ubie/ubie-icons'`;
 };
 
-const splitUpperCase = (str: string) => {
-  return str.split(/(?=[A-Z])/);
-};
-
 const IconWrapper: FC<Props> = ({ children, index }) => {
   const name = iconNames[index];
 
   if (!name) return null;
 
+  const humanReadableName = name.split(/(?=[A-Z])/).join(' ');
+
   return (
     <div className={styles.wrapper}>
-      <div className={styles.icon} aria-label={`アイコン ${name}`} role="img">
+      <div className={styles.icon} aria-label={`アイコン ${humanReadableName}`} role="img">
         {children}
       </div>
-      <p className={styles.name}>
-        {splitUpperCase(name).map((str, index) => (
-          <span className={styles.word} key={index}>
-            {str}
-          </span>
-        ))}
-      </p>
+      <p className={styles.name}>{humanReadableName}</p>
       <CopyButton label="React" text={convertToIconComponentName(name)} className={styles.copy} />
     </div>
   );