Skip to content

Commit

Permalink
feat(timelinenav): acc changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@csnizik
csnizik committed Jun 24, 2022
1 parent 7e14241 commit fff121b
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 11 deletions.
4 changes: 2 additions & 2 deletions src/components/TimelineNav/TimelineNav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,10 +224,10 @@ export const TimelineNav = ({
const prev =
index === 0 ? timelineNavItemRefs.length - 1 : index - 1; /* 2 */

if ([R_ARROW_KEYCODE, D_ARROW_KEYCODE].includes(e.code)) {
if ([R_ARROW_KEYCODE, D_ARROW_KEYCODE].includes(e.key)) {
/* 3 */
timelineNavItemRefs[next].current.focus();
} else if ([L_ARROW_KEYCODE, U_ARROW_KEYCODE].includes(e.code)) {
} else if ([L_ARROW_KEYCODE, U_ARROW_KEYCODE].includes(e.key)) {
/* 4 */
timelineNavItemRefs[prev].current.focus();
}
Expand Down
63 changes: 54 additions & 9 deletions src/components/TimelineNav/__snapshots__/TimelineNav.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
Overview
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="3"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -102,14 +107,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
TimelineNavPanel 1
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="4"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -149,14 +159,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
TimelineNavPanel 2
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="6"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -198,14 +213,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
viewports
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="8"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -245,14 +265,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
TimelineNavPanel 4
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="10"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -306,14 +331,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
TimelineNavPanel 5
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="12"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -350,14 +380,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
TimelineNavPanel 6
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="13"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand Down Expand Up @@ -397,14 +432,19 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
Final Item - complete
</div>
<svg
aria-hidden="true"
class="icon timeline-nav__link-arrow"
fill="currentColor"
height="var(--eds-size-2-and-half)"
role="img"
style="--icon-size: var(--eds-size-2-and-half);"
width="var(--eds-size-2-and-half)"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="15"
>
forward
</title>
<use
xlink:href="test-file-stub#arrow-forward"
/>
Expand All @@ -421,11 +461,16 @@ exports[`<TimelineNav /> Default story renders snapshot 1`] = `
type="button"
>
<svg
aria-hidden="true"
class="icon"
fill="currentColor"
role="img"
xmlns="http://www.w3.org/2000/svg"
>
<title
id="16"
>
back
</title>
<use
xlink:href="test-file-stub#arrow-back"
/>
Expand Down

0 comments on commit fff121b

Please sign in to comment.