Mark the icons as decorative only

diff --git a/ts/WoltLabSuite/WebComponent/fa-brand.ts b/ts/WoltLabSuite/WebComponent/fa-brand.ts
index 9c883e569df8657b35d4127dae7cb6b9b7606d5f..f6dba4e5db450c912623e2475988aee0a41834ae 100644 (file)
--- 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 39509326a6a2f06e45ce4a126c015855313e5815..ad4a454046ded0ce05c6d3dccc4e31eb3069864c 100644 (file)
--- 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 d538919009d6c3ae6a3a1427803433b48aba5851..264988bac9e441a1e267222e03ffa68d819f9974 100644 (file)
--- 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 ceceabcc467f6ef541ddec1f620edbb7ec47c593..ccdc35a8bb06e6b6dd711154b4843ea422361be1 100644 (file)
--- 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 437a067dbf3d192b9490bf48c79c2fa905c28f46..e92027d82dec879f07978a5a0ec413cc41e4e56b 100644 (file)
--- 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;