Skip to content

Commit 5b4095e

Browse files
boyney123boyney123
authored
fix(core): fixed accessibility issues (event-catalog#1907)
* fix(core): fixed accessibility issues * Create thin-lizards-guess.md
1 parent beb2ca0 commit 5b4095e

File tree

7 files changed

+33
-22
lines changed

7 files changed

+33
-22
lines changed

‎.changeset/thin-lizards-guess.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@eventcatalog/core": patch
3+
---
4+
5+
fix(core): fixed accessibility issues

‎eventcatalog/src/components/SideNav/NestedSideBar/SearchBar.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -178,8 +178,9 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
178178
<button
179179
onClick={clearSearch}
180180
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
181+
aria-label="Clear search"
181182
>
182-
<X className="w-4 h-4" />
183+
<X className="w-4 h-4" aria-hidden="true" />
183184
</button>
184185
)}
185186
</div>
@@ -193,8 +194,10 @@ export default function SearchBar({ nodes, onSelectResult, onSearchChange }: Pro
193194
? 'bg-purple-50 border-purple-200 text-purple-600'
194195
: 'bg-gray-50 border-gray-200 text-gray-400 hover:text-gray-600 hover:bg-gray-100'
195196
)}
197+
aria-label="Filter search results"
198+
aria-expanded={showFilterDropdown}
196199
>
197-
<SlidersHorizontal className="w-4 h-4" />
200+
<SlidersHorizontal className="w-4 h-4" aria-hidden="true" />
198201
{searchFilters.size > 0 && (
199202
<span className="absolute -top-1 -right-1 w-4 h-4 bg-purple-600 text-white text-[10px] font-bold rounded-full flex items-center justify-center">
200203
{searchFilters.size}

‎eventcatalog/src/layouts/Footer.astro‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,27 @@ const { className } = Astro.props;
99
showEventCatalogBranding() && (
1010
<div class="flex justify-between items-center py-8 text-gray-500 text-sm font-light">
1111
<div class="flex space-x-5">
12-
<a href="https://github.com/event-catalog/eventcatalog" target="_blank">
12+
<a href="https://github.com/event-catalog/eventcatalog" target="_blank" aria-label="View EventCatalog on GitHub">
1313
<svg
1414
class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
1515
style={`mask-image: url("${buildUrl('/icons/github.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
16+
aria-hidden="true"
1617
/>
1718
</a>
18-
<a href="https://x.com/event_catalog" target="_blank">
19-
<span class="sr-only">x</span>
19+
<a href="https://x.com/event_catalog" target="_blank" aria-label="Follow EventCatalog on X (Twitter)">
20+
<span class="sr-only">X (Twitter)</span>
2021
<svg
2122
class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
2223
style={`mask-image: url("${buildUrl('/icons/x-twitter.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
24+
aria-hidden="true"
2325
/>
2426
</a>
25-
<a href="https://www.youtube.com/@event-catalog" target="_blank">
26-
<span class="sr-only">x</span>
27+
<a href="https://www.youtube.com/@event-catalog" target="_blank" aria-label="Watch EventCatalog on YouTube">
28+
<span class="sr-only">YouTube</span>
2729
<svg
2830
class="w-5 h-5 bg-gray-400 hover:bg-primary dark:hover:bg-gray-400"
2931
style={`mask-image: url("${buildUrl('/icons/youtube.svg', true)}"); mask-repeat: no-repeat; mask-position: center center;`}
32+
aria-hidden="true"
3033
/>
3134
</a>
3235
</div>

‎eventcatalog/src/pages/_index.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -626,7 +626,7 @@ const quickActions = [
626626
target="_blank"
627627
class="group inline-flex items-center gap-2 px-5 py-2.5 bg-gray-900 text-white rounded-lg font-medium hover:bg-gray-800 transition-all shadow-sm"
628628
>
629-
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
629+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
630630
<path
631631
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0a12.64 12.64 0 0 0-.617-1.25a.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.078.078 0 0 0 .084-.028a14.09 14.09 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13.107 13.107 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10.2 10.2 0 0 0 .372-.292a.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127a12.299 12.299 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028a19.839 19.839 0 0 0 6.002-3.03a.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418z"
632632
></path>
@@ -638,7 +638,7 @@ const quickActions = [
638638
target="_blank"
639639
class="group inline-flex items-center gap-2 px-5 py-2.5 bg-white text-gray-900 border border-gray-300 rounded-lg font-medium hover:border-gray-400 hover:bg-gray-50 transition-all"
640640
>
641-
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
641+
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
642642
<path
643643
fill-rule="evenodd"
644644
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"

‎eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/index.astro‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,31 +73,31 @@ const logList = await Promise.all(logListPromise);
7373
7474
const getBadge = () => {
7575
if (props.collection === 'services') {
76-
return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' };
76+
return { backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-600' };
7777
}
7878
if (props.collection === 'events') {
79-
return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-400' };
79+
return { backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-600' };
8080
}
8181
if (props.collection === 'commands') {
82-
return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-400' };
82+
return { backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-600' };
8383
}
8484
if (props.collection === 'queries') {
85-
return { backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-blue-400' };
85+
return { backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-green-600' };
8686
}
8787
if (props.collection === 'domains') {
8888
return {
8989
backgroundColor: 'yellow',
9090
textColor: 'yellow',
9191
content: 'Domain',
9292
icon: RectangleGroupIcon,
93-
class: 'text-yellow-400',
93+
class: 'text-yellow-600',
9494
};
9595
}
9696
if (props.collection === 'containers') {
97-
return { backgroundColor: 'blue', textColor: 'blue', content: 'Container', icon: DatabaseIcon, class: 'text-blue-400' };
97+
return { backgroundColor: 'blue', textColor: 'blue', content: 'Container', icon: DatabaseIcon, class: 'text-blue-600' };
9898
}
9999
if (props.collection === 'flows') {
100-
return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-teal-400' };
100+
return { backgroundColor: 'teal', textColor: 'teal', content: 'Flow', icon: QueueListIcon, class: 'text-teal-600' };
101101
}
102102
};
103103

‎eventcatalog/src/pages/docs/[type]/[id]/[version]/graphql/[filename].astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ if (isRemote) {
3636
const pageTitle = `${collection} | ${data.name} | GraphQL Schema`.replace(/^\w/, (c) => c.toUpperCase());
3737
3838
const getServiceBadge = () => {
39-
return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' }];
39+
return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-600' }];
4040
};
4141
4242
const getGraphQLBadge = () => {

‎eventcatalog/src/pages/docs/[type]/[id]/[version]/index.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,17 @@ const getContentBadges = () =>
7171
7272
const getBadge = () => {
7373
if (props.collection === 'services') {
74-
return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-400' }];
74+
return [{ backgroundColor: 'pink', textColor: 'pink', content: 'Service', icon: ServerIcon, class: 'text-pink-600' }];
7575
}
7676
if (props.collection === 'events') {
77-
return [{ backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-400' }];
77+
return [{ backgroundColor: 'orange', textColor: 'orange', content: 'Event', icon: BoltIcon, class: 'text-orange-600' }];
7878
}
7979
if (props.collection === 'commands') {
80-
return [{ backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-400' }];
80+
return [{ backgroundColor: 'blue', textColor: 'blue', content: 'Command', icon: ChatBubbleLeftIcon, class: 'text-blue-600' }];
8181
}
8282
if (props.collection === 'queries') {
8383
return [
84-
{ backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-green-400' },
84+
{ backgroundColor: 'green', textColor: 'green', content: 'Query', icon: MagnifyingGlassIcon, class: 'text-green-600' },
8585
];
8686
}
8787
if (props.collection === 'domains') {
@@ -91,7 +91,7 @@ const getBadge = () => {
9191
textColor: 'yellow',
9292
content: 'Domain',
9393
icon: RectangleGroupIcon,
94-
class: 'text-yellow-400',
94+
class: 'text-yellow-600',
9595
},
9696
];
9797
}

0 commit comments

Comments
 (0)