From 9d093242505ea25b20e1728fc44ac4e321ca059e Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 10 Aug 2022 13:03:01 +0200
Subject: [PATCH] Mark the icons as decorative only

---
 ts/WoltLabSuite/WebComponent/fa-brand.ts                       | 2 ++
 ts/WoltLabSuite/WebComponent/fa-icon.ts                        | 3 +++
 .../install/files/js/WoltLabSuite/WebComponent/fa-brand.js     | 1 +
 wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js | 1 +
 wcfsetup/install/files/style/font-awesome/000-woltlab.scss     | 2 ++
 5 files changed, 9 insertions(+)

diff --git a/ts/WoltLabSuite/WebComponent/fa-brand.ts b/ts/WoltLabSuite/WebComponent/fa-brand.ts
index 9c883e569d..f6dba4e5db 100644
--- a/ts/WoltLabSuite/WebComponent/fa-brand.ts
+++ b/ts/WoltLabSuite/WebComponent/fa-brand.ts
@@ -24,6 +24,8 @@
       const slot = document.createElement("slot");
       slot.name = "svg";
       root.append(slot);
+
+      this.setAttribute("aria-hidden", "true");
     }
 
     private validate(): void {
diff --git a/ts/WoltLabSuite/WebComponent/fa-icon.ts b/ts/WoltLabSuite/WebComponent/fa-icon.ts
index 39509326a6..ad4a454046 100644
--- a/ts/WoltLabSuite/WebComponent/fa-icon.ts
+++ b/ts/WoltLabSuite/WebComponent/fa-icon.ts
@@ -29,7 +29,10 @@
   class FaIcon extends HTMLElement {
     connectedCallback() {
       this.validate();
+
       this.setIcon(this.name, this.solid);
+
+      this.setAttribute("aria-hidden", "true");
     }
 
     private validate(): void {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-brand.js b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-brand.js
index d538919009..264988bac9 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-brand.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-brand.js
@@ -22,6 +22,7 @@
             const slot = document.createElement("slot");
             slot.name = "svg";
             root.append(slot);
+            this.setAttribute("aria-hidden", "true");
         }
         validate() {
             if (this.size === 0) {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
index ceceabcc46..ccdc35a8bb 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/WebComponent/fa-icon.js
@@ -25,6 +25,7 @@
         connectedCallback() {
             this.validate();
             this.setIcon(this.name, this.solid);
+            this.setAttribute("aria-hidden", "true");
         }
         validate() {
             if (this.size === 0) {
diff --git a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
index 437a067dbf..e92027d82d 100644
--- a/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
+++ b/wcfsetup/install/files/style/font-awesome/000-woltlab.scss
@@ -98,6 +98,7 @@ fa-icon {
 fa-icon {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
+  -webkit-user-select: none;
 
   font-family: var(--fa-font-family, "Font Awesome 6 Free");
   font-size: var(--font-size);
@@ -106,6 +107,7 @@ fa-icon {
   font-weight: var(--fa-font-weight, 400);
   line-height: 1;
   text-rendering: auto;
+  user-select: none;
 
   &[solid] {
     font-weight: 900;
-- 
2.20.1