Gate title by version

Author: robmadole

package-lock.json

@@ -57,8 +57,8 @@
     "@babel/plugin-external-helpers": "^7.18.6",
     "@babel/preset-env": "^7.18.6",
     "@babel/preset-stage-3": "^7.8.3",
-    "@fortawesome/fontawesome-svg-core": "^1.3.0",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "@fortawesome/fontawesome-svg-core": "^7",
+    "@fortawesome/free-solid-svg-icons": "^7",
     "@pyoner/svelte-types": "^3.4.4-2",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.1",

package.json

@@ -4,13 +4,16 @@ import { cleanup, render, screen } from '@testing-library/svelte'
 import { parse } from '@fortawesome/fontawesome-svg-core'
 import semver from 'semver'
 
-import packageJson from '@fortawesome/free-solid-svg-icons/package.json' with { type: 'json' }
+import svgCorePackageJson from '@fortawesome/fontawesome-svg-core/package.json' with { type: 'json' }
+import svgIconsPackageJson from '@fortawesome/free-solid-svg-icons/package.json' with { type: 'json' }
 
-const SVG_ICONS_VERSION = semver.parse(packageJson.version)
+const SVG_CORE_VERSION = semver.parse(svgCorePackageJson.version)
+const SVG_ICONS_VERSION = semver.parse(svgIconsPackageJson.version)
 
 export const REFERENCE_ICON_BY_STYLE = 0x00
 export const ICON_ALIASES = 0x01
 export const REFERENCE_ICON_USING_STRING = 0x02
+export const USES_A11Y_TITLE = 0x03
 
 export function coreHasFeature(feature) {
   if (feature === ICON_ALIASES) {
@@ -19,6 +22,11 @@ export function coreHasFeature(feature) {
     return parse.icon && SVG_ICONS_VERSION.major >= 6
   }
 
+  if (feature === USES_A11Y_TITLE) {
+    // Accessibility changed in version 7 and the title attribute is no longer used
+    return SVG_CORE_VERSION.major < 7
+  }
+
   if (
     feature === REFERENCE_ICON_BY_STYLE ||
     feature === REFERENCE_ICON_USING_STRING

src/components/__fixtures__/helpers.js

@@ -8,6 +8,7 @@ import {
   REFERENCE_ICON_USING_STRING,
   REFERENCE_ICON_BY_STYLE,
   ICON_ALIASES,
+  USES_A11Y_TITLE,
   mount
 } from '../__fixtures__/helpers'
 
@@ -426,36 +427,6 @@ 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('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', () => {
   test('setting swapOpacity prop to true adds fa-swap-opacity class', () => {
     const vm = mount({ icon: faCoffee, swapOpacity: true })
@@ -471,11 +442,43 @@ describe('swap opacity', () => {
   })
 })
 
-describe('using titleId', () => {
-  test('setting titleId prop reflects in the aria-labelledby attribute', () => {
-    const titleId = 'foo'
-    const vm = mount({ icon: faCoffee, titleId, title: 'Coffee' })
-    const ariaLabelledby = vm.props['aria-labelledby']
-    expect(ariaLabelledby.includes(titleId)).toBeTruthy()
+if (coreHasFeature(USES_A11Y_TITLE)) {
+  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('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('using titleId', () => {
+    test('setting titleId prop reflects in the aria-labelledby attribute', () => {
+      const titleId = 'foo'
+      const vm = mount({ icon: faCoffee, titleId, title: 'Coffee' })
+      const ariaLabelledby = vm.props['aria-labelledby']
+      expect(ariaLabelledby.includes(titleId)).toBeTruthy()
+    })
+  })
+}