Adding titleId (#489)

FortAwesome · Feb 24, 2022 · ac63cd4 · mzedeler · Jul 12, 2022 · ac63cd4
1 parent 797dd75
commit ac63cd4
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 9 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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', () => {