Skip to content

Commit 0f9dcd4

Browse files
HassanZahirniaHassanZahirnia
committed
Refactor Bifrost diagram structure and enhance accessibility with ARIA attributes
1 parent 663af93 commit 0f9dcd4

File tree

1 file changed

+83
-36
lines changed

1 file changed

+83
-36
lines changed

‎resources/views/components/illustrations/bifrost-diagram.blade.php‎

Lines changed: 83 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
1-
<div class="flex items-center justify-center py-10">
2-
{{-- NativePHP --}}
1+
<figure
2+
class="flex items-center justify-center py-10"
3+
aria-labelledby="bifrost-diagram-caption"
4+
>
5+
{{-- Source (NativePHP app) --}}
36
<div
47
class="hidden flex-col items-center gap-2 pr-2 text-center 2xs:flex sm:pr-0"
58
>
6-
<x-mini-logo class="h-7 sm:h-9" />
9+
<x-mini-logo
10+
class="h-7 sm:h-9"
11+
aria-hidden="true"
12+
focusable="false"
13+
/>
714

8-
{{-- NativePHP --}}
9-
<div class="hidden whitespace-nowrap sm:block md:text-lg">
15+
<p class="hidden whitespace-nowrap sm:block md:text-lg">
1016
<span class="font-semibold">NativePHP</span>
11-
app
12-
</div>
17+
<span>app</span>
18+
</p>
1319
</div>
1420

15-
{{-- Left line --}}
21+
{{-- Left line (decorative) --}}
1622
<div
1723
class="hidden h-0.5 w-10 bg-gradient-to-r from-transparent to-blue-500/50 2xs:block sm:w-20"
24+
aria-hidden="true"
1825
></div>
1926

20-
{{-- Center --}}
21-
<div class="relative">
22-
{{-- Decorative blank box --}}
27+
{{-- Center (Bifrost) --}}
28+
<div
29+
class="relative"
30+
aria-label="Bifrost build orchestration"
31+
>
32+
{{-- Decorative blank box (top) --}}
2333
<div
2434
class="absolute -top-26 left-0 -z-10 grid h-23 w-35 place-items-center rounded-2xl mask-t-from-0% ring-3 ring-gray-200 ring-inset xs:w-40 sm:-top-30 sm:h-27 sm:w-47 dark:ring-white/3"
35+
aria-hidden="true"
2536
>
2637
<div
2738
class="h-1.5 w-15 rounded-full bg-gray-200 dark:bg-white/3"
@@ -34,65 +45,101 @@ class="grid h-23 w-35 place-items-center overflow-hidden rounded-2xl bg-gradient
3445
<div
3546
class="grid h-full w-full place-items-center rounded-[calc(var(--radius-2xl)-2px)] bg-white dark:bg-slate-950"
3647
>
37-
<x-logos.bifrost class="h-3.5 xs:h-4 sm:h-5" />
48+
<x-logos.bifrost
49+
class="h-3.5 xs:h-4 sm:h-5"
50+
role="img"
51+
aria-label="Bifrost"
52+
/>
53+
<span class="sr-only">Bifrost build system</span>
3854
</div>
3955
</div>
4056

41-
{{-- Decorative blank box --}}
57+
{{-- Decorative blank box (bottom) --}}
4258
<div
4359
class="absolute -bottom-26 left-0 -z-10 grid h-23 w-35 place-items-center rounded-2xl mask-b-from-0% ring-3 ring-gray-200 ring-inset xs:w-40 sm:-bottom-30 sm:h-27 sm:w-47 dark:ring-white/3"
60+
aria-hidden="true"
4461
>
4562
<div
4663
class="h-1.5 w-15 rounded-full bg-gray-200 dark:bg-white/3"
4764
></div>
4865
</div>
4966
</div>
5067

51-
{{-- Right --}}
68+
{{-- Right (Build outputs to platforms) --}}
5269
<div class="flex items-center sm:pr-14 md:pr-24">
53-
<div>
54-
<x-icons.home.arc-connector />
70+
<div aria-hidden="true">
71+
<x-icons.home.arc-connector aria-hidden="true" />
5572
<div
5673
class="-my-0.5 h-0.5 w-16 rounded-full bg-gradient-to-r from-blue-300/20 to-blue-500/80"
5774
></div>
58-
<div class="-scale-y-100"><x-icons.home.arc-connector /></div>
75+
<div class="-scale-y-100">
76+
<x-icons.home.arc-connector aria-hidden="true" />
77+
</div>
5978
</div>
6079

61-
{{-- Platforms --}}
62-
<div class="relative flex flex-col gap-4">
63-
{{-- Decorative blank box --}}
64-
<div
80+
{{-- Platforms list --}}
81+
<ul
82+
class="relative flex flex-col gap-4"
83+
aria-label="Target platforms"
84+
>
85+
{{-- Decorative (top) --}}
86+
<li
6587
class="absolute -top-15 left-0 -z-10 grid size-12 place-items-center rounded-xl mask-t-from-0% ring-2 ring-gray-200 ring-inset dark:ring-white/3"
88+
aria-hidden="true"
6689
>
6790
<div
6891
class="h-1 w-5 rounded-full bg-gray-200 dark:bg-white/3"
6992
></div>
70-
</div>
93+
</li>
7194

72-
<div
95+
<li
7396
class="grid size-12 place-items-center rounded-xl bg-white dark:bg-slate-950/50"
7497
>
75-
<x-icons.home.apple class="h-8" />
76-
</div>
77-
<div
98+
<x-icons.home.apple
99+
class="h-8"
100+
role="img"
101+
aria-label="Apple (macOS)"
102+
/>
103+
<span class="sr-only">Apple (macOS)</span>
104+
</li>
105+
<li
78106
class="grid size-12 place-items-center rounded-xl bg-white dark:bg-slate-950/50"
79107
>
80-
<x-icons.home.android class="h-7" />
81-
</div>
82-
<div
108+
<x-icons.home.android
109+
class="h-7"
110+
role="img"
111+
aria-label="Android"
112+
/>
113+
<span class="sr-only">Android</span>
114+
</li>
115+
<li
83116
class="grid size-12 place-items-center rounded-xl bg-white dark:bg-slate-950/50"
84117
>
85-
<x-icons.home.windows class="h-6" />
86-
</div>
118+
<x-icons.home.windows
119+
class="h-6"
120+
role="img"
121+
aria-label="Windows"
122+
/>
123+
<span class="sr-only">Windows</span>
124+
</li>
87125

88-
{{-- Decorative blank box --}}
89-
<div
126+
{{-- Decorative (bottom) --}}
127+
<li
90128
class="absolute -bottom-15 left-0 -z-10 grid size-12 place-items-center rounded-xl mask-b-from-0% ring-2 ring-gray-200 ring-inset dark:ring-white/3"
129+
aria-hidden="true"
91130
>
92131
<div
93132
class="h-1 w-5 rounded-full bg-gray-200 dark:bg-white/3"
94133
></div>
95-
</div>
96-
</div>
134+
</li>
135+
</ul>
97136
</div>
98-
</div>
137+
138+
<figcaption
139+
id="bifrost-diagram-caption"
140+
class="sr-only"
141+
>
142+
Diagram: NativePHP app passes through Bifrost build system to produce
143+
Apple (macOS), Android, and Windows platform outputs.
144+
</figcaption>
145+
</figure>

0 commit comments

Comments
 (0)