From 637af09e114c8e2284b8a45965df36b40cd6442e Mon Sep 17 00:00:00 2001
From: watchlar2000 <sergii.koch@gmail.com>
Date: Sun, 28 Jun 2026 13:56:01 +0200
Subject: [PATCH] fix: improve accessibility of PluginsTable filter inputs

---
 src/components/Ecosystem/PluginsTable.jsx | 10 ++++------
 src/css/ecosystem.css                     |  6 ++++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/Ecosystem/PluginsTable.jsx b/src/components/Ecosystem/PluginsTable.jsx
index 896f60aa..db52f54e 100644
--- a/src/components/Ecosystem/PluginsTable.jsx
+++ b/src/components/Ecosystem/PluginsTable.jsx
@@ -25,14 +25,12 @@ const PluginsTable = (props) => {
   return (
     <div className="grid-container">
       <div className="grid-item-header">
-        <b>Name</b>
-        <br />
-        <input type="text" onKeyUp={(event) => setNameFilter(event.target.value)} />
+        <label htmlFor="name">Name</label>
+        <input id="name" type="text" onKeyUp={(event) => setNameFilter(event.target.value)} />
       </div>
       <div className="grid-item-header">
-        <b>Description</b>
-        <br />
-        <input type="text" onKeyUp={(event) => setDescriptionFilter(event.target.value)} size="40" />
+        <label htmlFor="description">Description</label>
+        <input id="description" type="text" onKeyUp={(event) => setDescriptionFilter(event.target.value)} size="40" />
       </div>
       {filtered.map((plugin, index) => [
         <div key={`plugin-name-${index}`} className={`grid-item grid-item-${index % 2}`}>
diff --git a/src/css/ecosystem.css b/src/css/ecosystem.css
index 8390e868..c7499f69 100644
--- a/src/css/ecosystem.css
+++ b/src/css/ecosystem.css
@@ -9,9 +9,15 @@
 }
 
 .grid-item-header {
+  display: flex;
+  flex-direction: column;
   padding-bottom: 5px;
 }
 
+.grid-item-header label {
+  font-weight: 700;
+}
+
 .grid-item {
   padding: 5px;
   border-radius: 5px;