From 41457170fbbbe2931f2a52c527479452f41161d3 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 3 Jul 2026 03:49:37 +0000
Subject: [PATCH 1/2] feat(ux): improve accessibility and ARIA labels in
 LibraryView

- Change search input type to "search" and add aria-label
- Add aria-pressed to filter chips and group them with role="group"
- Add aria-label to sort field select and sort order button
- Add aria-label to entity list rows
- Add visually hidden status region for screen reader announcements
- Add aria-hidden to decorative icons

Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>
---
 src/features/library/LibraryView.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/features/library/LibraryView.tsx b/src/features/library/LibraryView.tsx
index 8ab5be34..fac94309 100644
--- a/src/features/library/LibraryView.tsx
+++ b/src/features/library/LibraryView.tsx
@@ -91,21 +91,23 @@ export const LibraryView: React.FC<LibraryViewProps> = ({ onEditEntity }) => {
 
         <div className="library-controls">
           <div className="search-box">
-            <Search className="search-icon" size={18} />
+            <Search className="search-icon" size={18} aria-hidden="true" />
             <input
-              type="text"
+              type="search"
               placeholder="Search library..."
               value={search}
               onChange={(e) => setSearch(e.target.value)}
+              aria-label="Search library"
             />
           </div>
 
-          <div className="filter-chips">
+          <div className="filter-chips" role="group" aria-label="Filter by type">
             {ENTITY_TYPES.map((type) => (
               <button
                 key={type.value}
                 className={`filter-chip ${filterType === type.value ? 'active' : ''}`}
                 onClick={() => setFilterType(type.value)}
+                aria-pressed={filterType === type.value}
               >
                 {type.icon}
                 <span>{type.label}</span>
@@ -115,10 +117,11 @@ export const LibraryView: React.FC<LibraryViewProps> = ({ onEditEntity }) => {
 
           <div className="sort-controls">
             <div className="sort-field-select">
-              <Calendar size={14} />
+              <Calendar size={14} aria-hidden="true" />
               <select
                 value={sortBy}
                 onChange={(e) => setSortBy(e.target.value as 'name' | 'created_at' | 'updated_at')}
+                aria-label="Sort by"
               >
                 {SORT_OPTIONS.map(opt => (
                   <option key={opt.value} value={opt.value}>{opt.label}</option>
@@ -129,14 +132,21 @@ export const LibraryView: React.FC<LibraryViewProps> = ({ onEditEntity }) => {
               className="sort-order-btn"
               onClick={() => setSortOrder(prev => prev === 'ASC' ? 'DESC' : 'ASC')}
               title={sortOrder === 'ASC' ? 'Sort Ascending' : 'Sort Descending'}
+              aria-label={sortOrder === 'ASC' ? 'Sort Ascending' : 'Sort Descending'}
             >
-              {sortOrder === 'ASC' ? <SortAsc size={18} /> : <SortDesc size={18} />}
+              {sortOrder === 'ASC' ? <SortAsc size={18} aria-hidden="true" /> : <SortDesc size={18} aria-hidden="true" />}
             </button>
           </div>
         </div>
       </div>
 
       <div className="library-content">
+        <div aria-live="polite" role="status" className="sr-only">
+          {isLoading ? 'Loading entities...' : ''}
+          {!isLoading && entities.length === 0 ? 'No entities found matching your filters.' : ''}
+          {!isLoading && entities.length > 0 ? `Showing ${entities.length} entities.` : ''}
+        </div>
+
         <div className="entity-grid-header">
            <div className="col-name">Name</div>
            <div className="col-type">Type</div>
@@ -185,6 +195,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({ onEditEntity }) => {
                       transform: `translateY(${virtualItem.start}px)`,
                     }}
                     onClick={() => entity.id && onEditEntity(entity.id)}
+                    aria-label={`Edit ${entity.name}`}
                   >
                     <div className="col-name">
                       <span className="entity-name-text">{entity.name}</span>

From 4d5b783a6d76012f3de0409d8df82308eb711236 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 3 Jul 2026 05:28:11 +0000
Subject: [PATCH 2/2] feat(ux): improve accessibility and ARIA labels in
 LibraryView

- Change search input type to "search" and add aria-label
- Use semantic <fieldset> and <legend> for filter chips (addresses Codacy warning)
- Add aria-pressed to filter buttons
- Add aria-label to sort field select and sort order button
- Add aria-label to entity list rows
- Add visually hidden status region for screen reader announcements
- Add aria-hidden to decorative icons

Co-authored-by: d-oit <6849456+d-oit@users.noreply.github.com>
---
 src/features/library/LibraryView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/features/library/LibraryView.tsx b/src/features/library/LibraryView.tsx
index fac94309..c78ed970 100644
--- a/src/features/library/LibraryView.tsx
+++ b/src/features/library/LibraryView.tsx
@@ -101,7 +101,8 @@ export const LibraryView: React.FC<LibraryViewProps> = ({ onEditEntity }) => {
             />
           </div>
 
-          <div className="filter-chips" role="group" aria-label="Filter by type">
+          <fieldset className="filter-chips" style={{ border: 'none', padding: 0, margin: 0 }}>
+            <legend className="sr-only">Filter by type</legend>
             {ENTITY_TYPES.map((type) => (
               <button
                 key={type.value}
@@ -113,7 +114,7 @@ export const LibraryView: React.FC<LibraryViewProps> = ({ onEditEntity }) => {
                 <span>{type.label}</span>
               </button>
             ))}
-          </div>
+          </fieldset>
 
           <div className="sort-controls">
             <div className="sort-field-select">