From ac63cd48f2abfdba5045773e4853712a2c4c4900 Mon Sep 17 00:00:00 2001
From: Rob Madole <robmadole@gmail.com>
Date: Thu, 24 Feb 2022 12:28:50 -0600
Subject: [PATCH] Adding titleId (#489)

---
 .github/workflows/ci.yml                         |  6 ++----
 .npmrc.proregistry                               |  2 --
 index.d.ts                                       |  1 +
 package.json                                     |  6 +++---
 src/components/FontAwesomeIcon.js                |  3 +++
 src/components/__tests__/FontAwesomeIcon.test.js | 11 +++++++++++
 6 files changed, 20 insertions(+), 9 deletions(-)
 delete mode 100644 .npmrc.proregistry

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 70c9b93d..dfdc51f4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -36,10 +36,8 @@ jobs:
           npm install react@${{ matrix.react }} react-dom@${{ matrix.react }} react-test-renderer@${{ matrix.react }}
           npm list react react-dom react-test-renderer
           npm run lint
-          npm run test.latest
-          npm run test.next.proregistry
-        env:
-          FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
+          npm run test.5
+          npm run test.6
       - name: dist
         run: |
           npm run dist
diff --git a/.npmrc.proregistry b/.npmrc.proregistry
deleted file mode 100644
index 52d5ff04..00000000
--- a/.npmrc.proregistry
+++ /dev/null
@@ -1,2 +0,0 @@
-@fortawesome:registry=https://npm.fontawesome.com/
-//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
diff --git a/index.d.ts b/index.d.ts
index ca89ebc5..b5c67551 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -46,5 +46,6 @@ export interface FontAwesomeIconProps extends BackwardCompatibleOmit<SVGAttribut
   style?: CSSProperties
   tabIndex?: number;
   title?: string;
+  titleId?: string;
   swapOpacity?: boolean;
 }
diff --git a/package.json b/package.json
index b0996c03..ad2e99d8 100644
--- a/package.json
+++ b/package.json
@@ -34,9 +34,9 @@
     "lint": "eslint src",
     "prettier": "pretty-quick --pattern src/** --staged",
     "prepack": "npm run dist",
-    "test": "npm run test.latest && npm run test.next.proregistry",
-    "test.latest": "npm --no-save install @fortawesome/fontawesome-svg-core@latest @fortawesome/free-solid-svg-icons@latest && jest --silent",
-    "test.next.proregistry": "npm --userconfig .npmrc.proregistry --registry https://npm.fontawesome.com install --no-save @fortawesome/fontawesome-svg-core@next @fortawesome/free-solid-svg-icons@next && jest --silent",
+    "test": "npm run test.5 && npm run test.6",
+    "test.5": "npm --no-save install @fortawesome/fontawesome-svg-core@1.2.x @fortawesome/free-solid-svg-icons@5.x && jest --silent",
+    "test.6": "npm --no-save install @fortawesome/fontawesome-svg-core@1.3.x @fortawesome/free-solid-svg-icons@6.x && jest --silent",
     "clean": "rm -f index.js && rm -f index.es.js"
   },
   "lint-staged": {
diff --git a/src/components/FontAwesomeIcon.js b/src/components/FontAwesomeIcon.js
index 26035f33..eb858eb4 100644
--- a/src/components/FontAwesomeIcon.js
+++ b/src/components/FontAwesomeIcon.js
@@ -130,6 +130,8 @@ FontAwesomeIcon.propTypes = {
 
   title: PropTypes.string,
 
+  titleId: PropTypes.string,
+
   transform: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
 
   swapOpacity: PropTypes.bool
@@ -156,6 +158,7 @@ FontAwesomeIcon.defaultProps = {
   shake: false,
   symbol: false,
   title: '',
+  titleId: null,
   transform: null,
   swapOpacity: false
 }
diff --git a/src/components/__tests__/FontAwesomeIcon.test.js b/src/components/__tests__/FontAwesomeIcon.test.js
index 6536f208..4e34511d 100644
--- a/src/components/__tests__/FontAwesomeIcon.test.js
+++ b/src/components/__tests__/FontAwesomeIcon.test.js
@@ -354,14 +354,25 @@ describe('symbol', () => {
 describe('title', () => {
   test('will not add a title element', () => {
     const vm = mount({ icon: faCoffee })
+
     expect(vm.children[0].type).not.toBe('title')
   })
 
   test('will add a title element', () => {
     const vm = mount({ icon: faCoffee, title: 'Coffee' })
+
     expect(vm.children[0].type).toBe('title')
     expect(vm.children[0].children[0]).toBe('Coffee')
   })
+
+  test.only('will use an explicit titleId', () => {
+    const vm = mount({ icon: faCoffee, title: 'Coffee', titleId: 'coffee-title' })
+
+    expect(vm.props['aria-labelledby']).toBe('svg-inline--fa-title-coffee-title')
+    expect(vm.children[0].props).toEqual(
+      expect.objectContaining({ id: 'svg-inline--fa-title-coffee-title' })
+    )
+  })
 })
 
 describe('swap opacity', () => {