Skip to content

Commit bd0c911

Browse files
aelmanaaaelmanaa
committed
update
1 parent 648c253 commit bd0c911

File tree

14 files changed

+82
-41
lines changed

14 files changed

+82
-41
lines changed

‎src/components/Aside.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const icons = {
2323
<img src={icons[type].src} style="width: 1.5em;height: 1.5em;" alt={type} />
2424
</div>
2525
<div class="asideContent">
26-
<p class="title heading-100" aria-hidden="true">
26+
<p class="title heading-100">
2727
{title}
2828
</p>
2929
<slot />

‎src/components/CCIP/Cards/TokenCard.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ const TokenCard = memo(function TokenCard({ id, logo, link, onClick }: TokenCard
2727

2828
if (onClick) {
2929
return (
30-
<div className="token-card__container" onClick={onClick} role="button">
30+
<button type="button" className="token-card__container" onClick={onClick} aria-label={`View ${id} token details`}>
3131
<object data={logo} type="image/png" aria-label={`${id} token logo`}>
3232
<img src={fallbackTokenIconUrl} alt={`${id} token logo`} loading="lazy" />
3333
</object>
3434
<h3>{id}</h3>
35-
</div>
35+
</button>
3636
)
3737
}
3838

‎src/components/CCIP/Drawer/TokenDrawer.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -226,9 +226,9 @@ function TokenDrawer({
226226
return (
227227
<tr key={networkDetails.name} className={tokenPaused ? "ccip-table__row--paused" : ""}>
228228
<td>
229-
<div
229+
<button
230+
type="button"
230231
className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}
231-
role="button"
232232
onClick={() => {
233233
drawerContentStore.set(() => (
234234
<LaneDrawer
@@ -245,6 +245,7 @@ function TokenDrawer({
245245
/>
246246
))
247247
}}
248+
aria-label={`View lane details for ${networkDetails?.name}`}
248249
>
249250
<img
250251
src={networkDetails?.logo}
@@ -257,7 +258,7 @@ function TokenDrawer({
257258
⏸️
258259
</span>
259260
)}
260-
</div>
261+
</button>
261262
</td>
262263
<td>
263264
{displayCapacity(

‎src/components/CCIP/Search/Search.css‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@
8383
margin-top: 10px;
8484
}
8585

86-
.ccip-hero__search-results li a {
86+
.ccip-hero__search-results li a,
87+
.ccip-hero__search-results li button {
8788
display: flex;
8889
gap: var(--space-4x);
8990
align-items: center;
@@ -92,9 +93,18 @@
9293
cursor: pointer;
9394
padding-left: var(--space-6x);
9495
padding-right: var(--space-6x);
96+
border: none;
97+
background: none;
98+
width: 100%;
99+
text-align: left;
100+
font-family: inherit;
101+
font-size: inherit;
102+
font-weight: inherit;
103+
color: inherit;
95104
}
96105

97-
.ccip-hero__search-results--small a {
106+
.ccip-hero__search-results--small a,
107+
.ccip-hero__search-results--small button {
98108
padding-left: var(--space-6x) !important;
99109
padding-right: var(--space-6x) !important;
100110
}
@@ -139,7 +149,8 @@
139149
padding: var(--space-2x);
140150
}
141151

142-
.ccip-hero__search-results li a {
152+
.ccip-hero__search-results li a,
153+
.ccip-hero__search-results li button {
143154
display: flex;
144155
gap: var(--space-4x);
145156
align-items: center;

‎src/components/CCIP/Search/Search.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,12 +154,18 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
154154
ensureWorker()
155155
}}
156156
onBlur={() => setIsActive(false)}
157+
aria-label="Search networks, tokens, and lanes"
158+
aria-describedby={openSearchMenu ? "search-results" : undefined}
157159
/>
158160
{openSearchMenu && (
159161
<div
162+
id="search-results"
160163
className={clsx("ccip-hero__search-results", {
161164
"ccip-hero__search-results--small": small || false,
162165
})}
166+
role="region"
167+
aria-live="polite"
168+
aria-label="Search results"
163169
>
164170
{networksResults.length === 0 && tokensResults.length === 0 && (
165171
<span className="ccip-hero__search-results__no-result">No results found</span>
@@ -228,8 +234,8 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
228234
<ul aria-label="Lanes">
229235
{lanesResults.map((lane) => (
230236
<li key={lane.sourceNetwork.name + lane.destinationNetwork.key}>
231-
<a
232-
role="button"
237+
<button
238+
type="button"
233239
onClick={() =>
234240
drawerContentStore.set(() => (
235241
<LaneDrawer
@@ -244,6 +250,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
244250
/>
245251
))
246252
}
253+
aria-label={`View lane from ${lane.sourceNetwork.name} to ${lane.destinationNetwork.name}`}
247254
>
248255
<div className="ccip-hero__search-results__lane-images">
249256
<img
@@ -272,7 +279,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
272279
: "token"}
273280
</span>
274281
)}
275-
</a>
282+
</button>
276283
</li>
277284
))}
278285
</ul>

‎src/components/CCIP/Tables/ChainTable.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
117117
.map((network, index) => (
118118
<tr key={index}>
119119
<td>
120-
<div
120+
<button
121+
type="button"
121122
className="ccip-table__network-name"
122-
role="button"
123123
onClick={() => {
124124
const laneData = getLane({
125125
sourceChain: sourceNetwork.key as SupportedChain,
@@ -143,10 +143,11 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
143143
/>
144144
))
145145
}}
146+
aria-label={`View lane details for ${network.name}`}
146147
>
147148
<img src={network.logo} alt={`${network.name} blockchain logo`} className="ccip-table__logo" />
148149
{network.name}
149-
</div>
150+
</button>
150151
</td>
151152
<td
152153
style={{ textAlign: "right" }}

‎src/components/CCIP/Tables/TokenChainsTable.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
7272
return (
7373
<tr key={index} className={allLanesPaused ? "ccip-table__row--paused" : ""}>
7474
<td>
75-
<div
75+
<button
76+
type="button"
7677
className={`ccip-table__network-name ${allLanesPaused ? "ccip-table__network-name--paused" : ""}`}
77-
role="button"
7878
onClick={() => {
7979
drawerContentStore.set(() => (
8080
<TokenDrawer
@@ -85,6 +85,7 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
8585
/>
8686
))
8787
}}
88+
aria-label={`View ${network.name} token details`}
8889
>
8990
<span className="ccip-table__logoContainer">
9091
<img
@@ -115,7 +116,7 @@ function TokenChainsTable({ networks, token, lanes, environment }: TableProps) {
115116
⏸️
116117
</span>
117118
)}
118-
</div>
119+
</button>
119120
</td>
120121
<td>{network.tokenName}</td>
121122
<td>{network.tokenSymbol}</td>

‎src/components/DocsNavigation/DocsNavigationDesktop/DocsNavigationDesktop.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ function DocsNavigationDesktop({
3737
{isCcipPage ? (
3838
/* Custom links for CCIP Directory pages */
3939
<>
40-
<a className={styles.ccipDirectoryLink} href="/ccip/" target="_blank" rel="noopener noreferrer">
40+
<a className={styles.ccipDirectoryLink} href="/ccip" target="_blank" rel="noopener noreferrer">
4141
<PageIcon />
4242
<span>Go to CCIP docs</span>
4343
</a>

‎src/components/Header/Nav/ProductNavigation/Desktop/ProductNavigation.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ export const ProductNavigation = ({ setNavMenuOpen, showMegaMenu, isMegamenuOpen
5050
onMouseEnter={showMegaMenu}
5151
role="button"
5252
aria-expanded={isMegamenuOpen}
53+
aria-controls="mega-menu"
54+
aria-label="Resources menu"
5355
tabIndex={0}
5456
onKeyDown={handleKeyDown}
5557
>
@@ -82,7 +84,7 @@ export const ProductNavigation = ({ setNavMenuOpen, showMegaMenu, isMegamenuOpen
8284
</NavigationMenu.Link>
8385
</Item>
8486
</List>
85-
{isMegamenuOpen && <MegaMenu cancel={exitMegamenu} />}
87+
{isMegamenuOpen && <MegaMenu id="mega-menu" cancel={exitMegamenu} />}
8688
</Root>
8789
</>
8890
)

‎src/components/LeftSidebar/LeftSidebar.astro‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,10 @@ const sidebarSections = getSidebarSections(section)
7878
<ul class={styles.navGroups} data-sticky>
7979
{
8080
sidebarSections.map((group) => (
81-
<li aria-hidden={section === "global"} class={group.parentSection ? `parent-${group.parentSection}` : ""}>
81+
<li
82+
style={section === "global" ? { display: "none" } : {}}
83+
class={group.parentSection ? `parent-${group.parentSection}` : ""}
84+
>
8285
<details open={shouldExpandTopSection(group.contents, currentPage)}>
8386
<summary class={styles.navGroupTitle}>{group.section}</summary>
8487
<ul class={styles.navGroupEntries}>
@@ -114,7 +117,7 @@ const sidebarSections = getSidebarSections(section)
114117
const parentSection = new URLSearchParams(window.location.search).get("parent") || "global"
115118
if (parentSection) {
116119
for (let elem of document.querySelectorAll(`.parent-${parentSection}`)) {
117-
elem.setAttribute("aria-hidden", "false")
120+
elem.style.display = "block"
118121
}
119122
}
120123
}

0 commit comments

Comments
 (0)