fix(#126): set aria-hidden=false if aria-label is present

Author: charles4221

src/converter.ts

@@ -75,6 +75,9 @@ export function convert(
       default: {
         if (key.indexOf('aria-') === 0 || key.indexOf('data-') === 0) {
           mixins.attrs[key.toLowerCase()] = val
+          if (key === 'aria-label' && !!val) {
+            mixins.attrs['aria-hidden'] = 'false'
+          }
         } else {
           mixins.attrs[camelize(key)] = val
         }

src/types/icon-props.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, RefAttributes, SVGAttributes } from 'react'
 
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
+import type { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core'
 
 import type { AnimationProps } from './animation-props'
 import { CSSVariables } from './css-variables'
@@ -16,6 +16,8 @@ export interface FontAwesomeIconProps
    * @see {@link https://docs.fontawesome.com/web/use-with/react/add-icons}
    */
   icon: IconProp
+  /** The size of the icon from a predefined set of sizes. */
+  size?: SizeProp | undefined
   /**
    * Grab the Mask utility when you want to layer two icons but have the inner icon cut out from the icon below so the parent element’s background shows through.
    * @see {@link https://docs.fontawesome.com/web/use-with/react/style#mask}

src/types/transform-props.ts

@@ -3,24 +3,30 @@ import type {
   FlipProp,
   PullProp,
   RotateProp,
-  SizeProp,
   Transform,
 } from '@fortawesome/fontawesome-svg-core'
 
 export interface TransformProps {
   /**
-   * Use this property to indicate that the icon is to be used as the decorative bullet
-   * for a list item. Remember to mark-up the list with `<ul className="fa-ul">` and the list items with
-   * `<li className="fa-li">`.
+   * @deprecated Simply wrap the icon instead, no need to pass this property.
+   *
+   * @example
+   * ```tsx
+   * <ul className='fa-ul'>
+   *   <li>
+   *     <span className='fa-li'>
+   *       <FontAwesomeIcon icon={['fas', 'check']} />
+   *     </span>
+   *     List item with icon
+   *   </li>
+   * </ul>
+   * ```
    *
-   * @see {@link https://docs.fontawesome.com/web/use-with/react/style#icons-in-a-list}
    * @see {@link https://docs.fontawesome.com/web/style/lists}
    */
   listItem?: boolean | undefined
   /** Flip the icon horizontally, vertically or both. */
   flip?: FlipProp | boolean | undefined
-  /** The size of the icon from a predefined set of sizes. */
-  size?: SizeProp | undefined
   /** Wrap text around the icon by pulling it left or right. */
   pull?: PullProp | undefined
   /**

src/utils/get-class-list-from-props.ts

@@ -29,7 +29,6 @@ export function getClassListFromProps(props: FontAwesomeIconProps): string[] {
     fixedWidth,
     inverse,
     border,
-    listItem,
     flip,
     size,
     rotation,
@@ -56,7 +55,6 @@ export function getClassListFromProps(props: FontAwesomeIconProps): string[] {
   if (fixedWidth) result.push(STYLE_CLASSES.fixedWidth)
   if (inverse) result.push(STYLE_CLASSES.inverse)
   if (border) result.push(STYLE_CLASSES.border)
-  if (listItem) result.push(STYLE_CLASSES.listItem)
   if (flip === true) result.push(STYLE_CLASSES.flip)
   if (flip === 'horizontal' || flip === 'both') {
     result.push(STYLE_CLASSES.flipHorizontal)