add title id and mask id with test

src/components/FontAwesomeIcon.js

@@ -55,6 +55,10 @@ export default defineComponent({
       type: [Object, Array, String],
       default: null
     },
+    maskId: {
+      type: String,
+      default: null
+    },
     listItem: {
       type: Boolean,
       default: false
@@ -98,6 +102,10 @@ export default defineComponent({
       type: String,
       default: null
     },
+    titleId: {
+      type: String,
+      default: null
+    },
     inverse: {
       type: Boolean,
       default: false
@@ -148,7 +156,9 @@ export default defineComponent({
         ...transform.value,
         ...mask.value,
         symbol: props.symbol,
-        title: props.title
+        title: props.title,
+        titleId: props.titleId,
+        maskId: props.maskId
       })
     )
 

src/components/__tests__/FontAwesomeIcon.test.js

@@ -24,6 +24,37 @@ afterEach(() => {
   library.reset();
 });
 
+describe("icon title prop", () => {
+  test("checks title attribute is null when title property is NOT st", () => {
+    const wrapper = mountFromProps({
+      icon: faCoffee,
+    });
+
+    expect(wrapper.element.getAttribute("aria-labelledby")).toBeFalsy();
+    expect(wrapper.element.querySelector("title")).toBeFalsy();
+  });
+
+  test("checks title attributes when title property is set", () => {
+    const wrapper = mountFromProps({
+      icon: faCoffee,
+      title: "Drink your caf",
+      titleId: "caf-1138",
+    });
+
+    expect(wrapper.element.getAttribute("aria-labelledby")).toBe(
+      "svg-inline--fa-title-caf-1138"
+    );
+
+    expect(wrapper.element.querySelector("title").textContent).toBe(
+      "Drink your caf"
+    );
+
+    expect(wrapper.element.querySelector("title").id).toBe(
+      "svg-inline--fa-title-caf-1138"
+    );
+  });
+});
+
 describe("icons are showing", () => {
   test("using array format, short prefix and short icon name", () => {
     const wrapper = mountFromProps({ icon: ["fas", "coffee"] });