Add support for @fortawesome/fontawesome-svg-core v7.x (#256)

* Widen support for`@fortawesome/fontawesome-svg-core` (allow v7)

* Prepare tests for FA7

* Remove ts-expect-error (resolved with v7)

* Remove check for focusable = false (was only for IE11 and old Edge)

* Add note for title tag support & fix tests for FA7

* Fix test for FA6

* Add exception for `@title` pass in FA7

* Fix ReadMe link

Author: mkszepp

.github/workflows/ci.yml

@@ -69,8 +69,9 @@ jobs:
           - ember-lts-5.4
           - ember-lts-5.8
           - ember-lts-5.12
-          - ember-lts-5.12-with-fa5
           - ember-lts-6.4
+          - ember-lts-6.4-with-fa5
+          - ember-lts-6.4-with-fa6
           - ember-release
           - ember-beta
           - ember-canary

README.md

@@ -51,10 +51,12 @@ Hey there! We're glad you're here...
 
 ### Upgrading Font Awesome?
 
-If you've used Font Awesome in the past (version 5 or older) there are some
+If you've used Font Awesome in the past (version 6 or older) there are some
 things that you should learn before you dive in.
 
-> https://docs.fontawesome.com/web/setup/upgrade
+> v6: https://docs.fontawesome.com/upgrade/whats-changed
+> 
+> Older: https://docs.fontawesome.com/upgrade/upgrade-from-older-versions
 
 ### Get started
 

ember-fontawesome/package.json

@@ -69,7 +69,8 @@
     "test": "echo 'A v2 addon does not have tests, run tests in test-app'"
   },
   "dependencies": {
-    "@embroider/addon-shim": "^1.10.0"
+    "@embroider/addon-shim": "^1.10.0",
+    "@embroider/macros": "^1.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",
@@ -79,7 +80,7 @@
     "@ember/library-tsconfig": "^1.1.3",
     "@embroider/addon-dev": "^7.1.1",
     "@eslint/js": "^9.32.0",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
     "@glimmer/component": "^2.0.0",
     "@glint/core": "^1.5.2",
     "@glint/environment-ember-loose": "^1.5.2",
@@ -105,7 +106,7 @@
     "webpack": "^5.101.0"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0 || ^7.0.0",
     "@glimmer/component": ">= 1.1.2"
   },
   "publishConfig": {

ember-fontawesome/src/components/fa-icon.gts

@@ -19,6 +19,7 @@ import {
 import { htmlSafe, type SafeString } from '@ember/template';
 import { getOwner } from '@ember/application';
 import { get } from '@ember/helper';
+import { dependencySatisfies, macroCondition } from '@embroider/macros';
 
 function objectWithKey(
   key: string,
@@ -48,6 +49,7 @@ interface FaIconSignature {
     pull?: PullProp;
     transform?: Transform | string;
     symbol?: FaSymbol;
+    // Note: Title is only supported for FA 5 + 6... for FA 7+ pass title as aria-label https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility
     title?: string;
     mask?: IconName | IconLookup | IconDefinition;
   };
@@ -99,6 +101,18 @@ export default class FaIconComponent extends Component<FaIconSignature> {
   }
 
   get abstractIcon(): AbstractElement | null {
+    if (
+      macroCondition(
+        dependencySatisfies('@fortawesome/fontawesome-svg-core', '>=7.0.0'),
+      )
+    ) {
+      if (this.args.title !== undefined) {
+        throw new Error(
+          '@title has no effect in Font Awesome 7+. If you want to keep this behavior, use aria-label instead. For more details, see: https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility',
+        );
+      }
+    }
+
     const iconLookup = this.normalizeIconArgs(this.args.icon, this.args.prefix);
     if (!iconLookup) {
       console.warn(
@@ -118,6 +132,7 @@ export default class FaIconComponent extends Component<FaIconSignature> {
       this.args.mask ? this.normalizeIconArgs(this.args.mask) : null,
     );
     const symbol = this.args.symbol ?? false;
+    // Title is only supported for FA 5 + 6... for FA 7+ pass title as aria-label https://docs.fontawesome.com/upgrade/whats-changed#simpler-accessibility
     const title = this.args.title ? `${this.args.title}` : null;
 
     const o = Object.assign({}, classes, transform, mask, {
@@ -200,14 +215,10 @@ export default class FaIconComponent extends Component<FaIconSignature> {
 
     if (parse.icon) {
       if (typeof prefix === 'string' && typeof icon === 'string') {
-        // Issue https://github.com/FortAwesome/Font-Awesome/issues/20231
-        // @ts-expect-error Argument of type '{ prefix: IconPrefix; iconName: IconName; }' is not assignable to parameter of type 'string'.
         return parse.icon({ prefix: prefix, iconName: icon });
       }
 
       if (typeof icon === 'string') {
-        // Issue https://github.com/FortAwesome/Font-Awesome/issues/20231
-        // @ts-expect-error Argument of type '{ prefix: IconPrefix; iconName: IconName; }' is not assignable to parameter of type 'string'.
         return parse.icon({ prefix: defaultPrefix, iconName: icon });
       }
     }