Skip to content

Commit 3586ad0

Browse files
stomitastomita
authored
Merge pull request #388 from mashmatrix/fix-tab-focus
Fix to moving out the focus when clicked tab menu in Safari/firefox
2 parents 98f10f1 + 8798d3d commit 3586ad0

File tree

2 files changed

+163
-96
lines changed

2 files changed

+163
-96
lines changed

‎src/scripts/Tabs.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ const TabMenu = <MenuEventKey extends Key>(
4040
icon={icon}
4141
type='icon-bare'
4242
iconSize='small'
43+
tabIndex={-1}
4344
nubbinTop
4445
{...pprops}
4546
>

‎test/storyshots/__snapshots__/storyshots.test.js.snap‎

Lines changed: 162 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -58737,24 +58737,35 @@ exports[`Storyshots Tabs With Dropdown (Default) 1`] = `
5873758737
<div
5873858738
className="react-slds-tab-menu slds-dropdown-trigger slds-button-space-left"
5873958739
>
58740-
<button
58741-
aria-haspopup={true}
58742-
className="slds-button slds-button_icon-bare"
58743-
onBlur={[Function]}
58744-
onClick={[Function]}
58745-
onKeyDown={[Function]}
58746-
type="button"
58740+
<span
58741+
className="react-slds-button-focus-wrapper"
58742+
style={
58743+
Object {
58744+
"outline": 0,
58745+
}
58746+
}
58747+
tabIndex={-1}
5874758748
>
58748-
<svg
58749-
aria-hidden={true}
58750-
className="react-slds-icon slds-button__icon slds-button__icon_small"
58751-
pointerEvents="none"
58749+
<button
58750+
aria-haspopup={true}
58751+
className="slds-button slds-button_icon-bare"
58752+
onBlur={[Function]}
58753+
onClick={[Function]}
58754+
onKeyDown={[Function]}
58755+
tabIndex={-1}
58756+
type="button"
5875258757
>
58753-
<use
58754-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58755-
/>
58756-
</svg>
58757-
</button>
58758+
<svg
58759+
aria-hidden={true}
58760+
className="react-slds-icon slds-button__icon slds-button__icon_small"
58761+
pointerEvents="none"
58762+
>
58763+
<use
58764+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58765+
/>
58766+
</svg>
58767+
</button>
58768+
</span>
5875858769
</div>
5875958770
</span>
5876058771
</li>
@@ -58778,24 +58789,35 @@ exports[`Storyshots Tabs With Dropdown (Default) 1`] = `
5877858789
<div
5877958790
className="react-slds-tab-menu slds-dropdown-trigger slds-button-space-left"
5878058791
>
58781-
<button
58782-
aria-haspopup={true}
58783-
className="slds-button slds-button_icon-bare"
58784-
onBlur={[Function]}
58785-
onClick={[Function]}
58786-
onKeyDown={[Function]}
58787-
type="button"
58792+
<span
58793+
className="react-slds-button-focus-wrapper"
58794+
style={
58795+
Object {
58796+
"outline": 0,
58797+
}
58798+
}
58799+
tabIndex={-1}
5878858800
>
58789-
<svg
58790-
aria-hidden={true}
58791-
className="react-slds-icon slds-button__icon slds-button__icon_small"
58792-
pointerEvents="none"
58801+
<button
58802+
aria-haspopup={true}
58803+
className="slds-button slds-button_icon-bare"
58804+
onBlur={[Function]}
58805+
onClick={[Function]}
58806+
onKeyDown={[Function]}
58807+
tabIndex={-1}
58808+
type="button"
5879358809
>
58794-
<use
58795-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58796-
/>
58797-
</svg>
58798-
</button>
58810+
<svg
58811+
aria-hidden={true}
58812+
className="react-slds-icon slds-button__icon slds-button__icon_small"
58813+
pointerEvents="none"
58814+
>
58815+
<use
58816+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58817+
/>
58818+
</svg>
58819+
</button>
58820+
</span>
5879958821
</div>
5880058822
</span>
5880158823
</li>
@@ -58819,24 +58841,35 @@ exports[`Storyshots Tabs With Dropdown (Default) 1`] = `
5881958841
<div
5882058842
className="react-slds-tab-menu slds-dropdown-trigger slds-button-space-left"
5882158843
>
58822-
<button
58823-
aria-haspopup={true}
58824-
className="slds-button slds-button_icon-bare"
58825-
onBlur={[Function]}
58826-
onClick={[Function]}
58827-
onKeyDown={[Function]}
58828-
type="button"
58844+
<span
58845+
className="react-slds-button-focus-wrapper"
58846+
style={
58847+
Object {
58848+
"outline": 0,
58849+
}
58850+
}
58851+
tabIndex={-1}
5882958852
>
58830-
<svg
58831-
aria-hidden={true}
58832-
className="react-slds-icon slds-button__icon slds-button__icon_small"
58833-
pointerEvents="none"
58853+
<button
58854+
aria-haspopup={true}
58855+
className="slds-button slds-button_icon-bare"
58856+
onBlur={[Function]}
58857+
onClick={[Function]}
58858+
onKeyDown={[Function]}
58859+
tabIndex={-1}
58860+
type="button"
5883458861
>
58835-
<use
58836-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58837-
/>
58838-
</svg>
58839-
</button>
58862+
<svg
58863+
aria-hidden={true}
58864+
className="react-slds-icon slds-button__icon slds-button__icon_small"
58865+
pointerEvents="none"
58866+
>
58867+
<use
58868+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58869+
/>
58870+
</svg>
58871+
</button>
58872+
</span>
5884058873
</div>
5884158874
</span>
5884258875
</li>
@@ -58919,24 +58952,35 @@ exports[`Storyshots Tabs With Dropdown (Scoped) 1`] = `
5891958952
<div
5892058953
className="react-slds-tab-menu slds-dropdown-trigger slds-button-space-left"
5892158954
>
58922-
<button
58923-
aria-haspopup={true}
58924-
className="slds-button slds-button_icon-bare"
58925-
onBlur={[Function]}
58926-
onClick={[Function]}
58927-
onKeyDown={[Function]}
58928-
type="button"
58955+
<span
58956+
className="react-slds-button-focus-wrapper"
58957+
style={
58958+
Object {
58959+
"outline": 0,
58960+
}
58961+
}
58962+
tabIndex={-1}
5892958963
>
58930-
<svg
58931-
aria-hidden={true}
58932-
className="react-slds-icon slds-button__icon slds-button__icon_small"
58933-
pointerEvents="none"
58964+
<button
58965+
aria-haspopup={true}
58966+
className="slds-button slds-button_icon-bare"
58967+
onBlur={[Function]}
58968+
onClick={[Function]}
58969+
onKeyDown={[Function]}
58970+
tabIndex={-1}
58971+
type="button"
5893458972
>
58935-
<use
58936-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58937-
/>
58938-
</svg>
58939-
</button>
58973+
<svg
58974+
aria-hidden={true}
58975+
className="react-slds-icon slds-button__icon slds-button__icon_small"
58976+
pointerEvents="none"
58977+
>
58978+
<use
58979+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58980+
/>
58981+
</svg>
58982+
</button>
58983+
</span>
5894058984
</div>
5894158985
</span>
5894258986
</li>
@@ -58960,24 +59004,35 @@ exports[`Storyshots Tabs With Dropdown (Scoped) 1`] = `
5896059004
<div
5896159005
className="react-slds-tab-menu slds-dropdown-trigger slds-button-space-left"
5896259006
>
58963-
<button
58964-
aria-haspopup={true}
58965-
className="slds-button slds-button_icon-bare"
58966-
onBlur={[Function]}
58967-
onClick={[Function]}
58968-
onKeyDown={[Function]}
58969-
type="button"
59007+
<span
59008+
className="react-slds-button-focus-wrapper"
59009+
style={
59010+
Object {
59011+
"outline": 0,
59012+
}
59013+
}
59014+
tabIndex={-1}
5897059015
>
58971-
<svg
58972-
aria-hidden={true}
58973-
className="react-slds-icon slds-button__icon slds-button__icon_small"
58974-
pointerEvents="none"
59016+
<button
59017+
aria-haspopup={true}
59018+
className="slds-button slds-button_icon-bare"
59019+
onBlur={[Function]}
59020+
onClick={[Function]}
59021+
onKeyDown={[Function]}
59022+
tabIndex={-1}
59023+
type="button"
5897559024
>
58976-
<use
58977-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
58978-
/>
58979-
</svg>
58980-
</button>
59025+
<svg
59026+
aria-hidden={true}
59027+
className="react-slds-icon slds-button__icon slds-button__icon_small"
59028+
pointerEvents="none"
59029+
>
59030+
<use
59031+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
59032+
/>
59033+
</svg>
59034+
</button>
59035+
</span>
5898159036
</div>
5898259037
</span>
5898359038
</li>
@@ -59001,24 +59056,35 @@ exports[`Storyshots Tabs With Dropdown (Scoped) 1`] = `
5900159056
<div
5900259057
className="react-slds-tab-menu slds-dropdown-trigger slds-button-space-left"
5900359058
>
59004-
<button
59005-
aria-haspopup={true}
59006-
className="slds-button slds-button_icon-bare"
59007-
onBlur={[Function]}
59008-
onClick={[Function]}
59009-
onKeyDown={[Function]}
59010-
type="button"
59059+
<span
59060+
className="react-slds-button-focus-wrapper"
59061+
style={
59062+
Object {
59063+
"outline": 0,
59064+
}
59065+
}
59066+
tabIndex={-1}
5901159067
>
59012-
<svg
59013-
aria-hidden={true}
59014-
className="react-slds-icon slds-button__icon slds-button__icon_small"
59015-
pointerEvents="none"
59068+
<button
59069+
aria-haspopup={true}
59070+
className="slds-button slds-button_icon-bare"
59071+
onBlur={[Function]}
59072+
onClick={[Function]}
59073+
onKeyDown={[Function]}
59074+
tabIndex={-1}
59075+
type="button"
5901659076
>
59017-
<use
59018-
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
59019-
/>
59020-
</svg>
59021-
</button>
59077+
<svg
59078+
aria-hidden={true}
59079+
className="react-slds-icon slds-button__icon slds-button__icon_small"
59080+
pointerEvents="none"
59081+
>
59082+
<use
59083+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#down"
59084+
/>
59085+
</svg>
59086+
</button>
59087+
</span>
5902259088
</div>
5902359089
</span>
5902459090
</li>

0 commit comments

Comments
 (0)