Improve a11y of the remove filter buttons in grid & list views

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -3,7 +3,13 @@
 		<div class="gridView__filterBar">
 			<div class="gridView__filters" id="{$view->getID()}_filters">
 				{foreach from=$view->getActiveFilters() item='value' key='key'}
-					<button type="button" class="button small" data-filter="{$key}" data-filter-value="{$value}">
+					<button
+						type="button"
+						class="button small jsTooltip"
+						data-filter="{$key}"
+						data-filter-value="{$value}"
+						title="{lang filterLabel=$view->getFilterLabel($key)}wcf.page.removeFilterTooltip{/lang}"
+					>
 						{icon name='circle-xmark'}
 						{$view->getFilterLabel($key)}
 					</button>
@@ -84,6 +90,7 @@
 <script data-relocate="true">
 	require(['WoltLabSuite/Core/Component/GridView'], ({ GridView }) => {
 		WoltLabLanguage.registerPhrase("wcf.clipboard.button.numberOfSelectedItems", '{jslang __literal=true}wcf.clipboard.button.numberOfSelectedItems{/jslang}');
+		WoltLabLanguage.registerPhrase("wcf.page.removeFilterTooltip", '{jslang __literal=true}wcf.page.removeFilterTooltip{/jslang}');
 		
 		new GridView(
 			'{unsafe:$view->getID()|encodeJS}',

com.woltlab.wcf/templates/shared_listView.tpl

@@ -4,7 +4,13 @@
 			{if $view->isFilterable()}
 				<div class="listView__filters" id="{$view->getID()}_filters">
 					{foreach from=$view->getActiveFilters() item='value' key='key'}
-						<button type="button" class="button small" data-filter="{$key}" data-filter-value="{$value}">
+						<button
+							type="button"
+							class="button small jsTooltip"
+							data-filter="{$key}"
+							data-filter-value="{$value}"
+							title="{lang filterLabel=$view->getFilterLabel($key)}wcf.page.removeFilterTooltip{/lang}"
+						>
 							{icon name='circle-xmark'}
 							{$view->getFilterLabel($key)}
 						</button>
@@ -93,6 +99,7 @@
 <script data-relocate="true">
 	require(['WoltLabSuite/Core/Component/ListView'], ({ ListView }) => {
 		WoltLabLanguage.registerPhrase("wcf.clipboard.button.numberOfSelectedItems", '{jslang __literal=true}wcf.clipboard.button.numberOfSelectedItems{/jslang}');
+		WoltLabLanguage.registerPhrase("wcf.page.removeFilterTooltip", '{jslang __literal=true}wcf.page.removeFilterTooltip{/jslang}');
 		
 		new ListView(
 			'{unsafe:$view->getID()|encodeJS}',

ts/WoltLabSuite/Core/Component/GridView/Filter.ts

@@ -7,6 +7,7 @@
  * @since 6.2
  */
 
+import { getPhrase } from "WoltLabSuite/Core/Language";
 import { promiseMutex } from "../../Helper/PromiseMutex";
 import { dialogFactory } from "../Dialog";
 
@@ -63,7 +64,12 @@ export class Filter extends EventTarget {
     for (const key of this.#filters.keys()) {
       const button = document.createElement("button");
       button.type = "button";
-      button.classList.add("button", "small");
+      button.title = getPhrase("wcf.page.removeFilterTooltip", {
+        filterLabel: labels[key],
+      });
+      button.classList.add("button", "small", "jsTooltip");
+      button.dataset.filter = key;
+      button.dataset.filterValue = this.#filters.get(key);
       const icon = document.createElement("fa-icon");
       icon.setIcon("circle-xmark");
       button.append(icon, labels[key]);

ts/WoltLabSuite/Core/Component/ListView/Filter.ts

@@ -7,6 +7,7 @@
  * @since 6.2
  */
 
+import { getPhrase } from "WoltLabSuite/Core/Language";
 import { promiseMutex } from "../../Helper/PromiseMutex";
 import { dialogFactory } from "../Dialog";
 
@@ -63,7 +64,10 @@ export class Filter extends EventTarget {
     for (const key of this.#filters.keys()) {
       const button = document.createElement("button");
       button.type = "button";
-      button.classList.add("button", "small");
+      button.title = getPhrase("wcf.page.removeFilterTooltip", {
+        filterLabel: labels[key],
+      });
+      button.classList.add("button", "small", "jsTooltip");
       button.dataset.filter = key;
       button.dataset.filterValue = this.#filters.get(key);
       const icon = document.createElement("fa-icon");

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Filter.js

@@ -4503,6 +4503,7 @@ Erlaubte Dateiendungen: gif, jpg, jpeg, png, webp]]></item>
 		<item name="wcf.page.menu.outstandingItems"><![CDATA[({#$menuItemNode->getOutstandingItems()} {if $menuItemNode->getOutstandingItems() == 1}neuer Eintrag{else}neue Einträge{/if})]]></item>
 		<item name="wcf.page.guestTokenDialog.title"><![CDATA[Verifizierung erforderlich]]></item>
 		<item name="wcf.page.readingTime"><![CDATA[Lesezeit: {#$minutes} Min.]]></item>
+		<item name="wcf.page.removeFilterTooltip"><![CDATA[Filter „{$filterLabel}“ entfernen]]></item>
 	</category>
 	<category name="wcf.paidSubscription">
 		<item name="wcf.paidSubscription.availableSubscriptions"><![CDATA[Verfügbare Mitgliedschaften]]></item>

wcfsetup/install/files/js/WoltLabSuite/Core/Component/ListView/Filter.js

@@ -4455,6 +4455,7 @@ Allowed extensions: gif, jpg, jpeg, png, webp]]></item>
 		<item name="wcf.page.menu.outstandingItems"><![CDATA[({#$menuItemNode->getOutstandingItems()} {if $menuItemNode->getOutstandingItems() == 1}New Item{else}News Items{/if})]]></item>
 		<item name="wcf.page.guestTokenDialog.title"><![CDATA[Verification Required]]></item>
 		<item name="wcf.page.readingTime"><![CDATA[{#$minutes} min read]]></item>
+		<item name="wcf.page.removeFilterTooltip"><![CDATA[Remove Filter “{$filterLabel}”]]></item>
 	</category>
 	<category name="wcf.acp.page">
 		<item name="wcf.acp.page.add"><![CDATA[Add Page]]></item>