Skip to content

Commit 8103b11

Browse files
mlopez-sfmlopez-sf
authored
@W-14619658 [Accessibility] Screen reader issues with hover and on focus content (#3175)
* @W-14619658 [Accessibility] Screen reader issues with hover and on focus content, Superbadges & Super Sets - View Superbadge, Prerequisite - handleKeyDown method added * @W-14619658 [Accessibility] Screen reader issues with hover and on focus content, Superbadges & Super Sets - View Superbadge, Prerequisite - snapshots and component-docs updated * @W-14619658 [Accessibility] Screen reader issues with hover and on focus content - aria-label removed * @W-14619658 [Accessibility] Screen reader issues with hover and on focus content - isHoveringTooltip variable added: check if user is hovering on tooltip and prevent hiding it - onMouseLeave method added to close tooltip after hovering * @W-14619658 [Accessibility] Screen reader issues with hover and on focus content - docs and snapshots updated * @W-14619658 [Accessibility] Screen reader issues with hover and on focus content - stopPropagation on mouse leave event added * @W-14619658 [Accessibility] Screen reader issues with hover and on focus content - suggestions applied
1 parent 5e42d08 commit 8103b11

File tree

9 files changed

+162
-3
lines changed

9 files changed

+162
-3
lines changed

‎components/builder-header/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,7 @@ exports[`DOM snapshots SLDSBuilderHeader After Successful Save 1`] = `
415415
className="slds-color__text_gray-10 slds-align-middle slds-m-right_small"
416416
onBlur={[Function]}
417417
onFocus={[Function]}
418+
onKeyDown={[Function]}
418419
onMouseEnter={[Function]}
419420
onMouseLeave={[Function]}
420421
tabIndex={0}
@@ -961,6 +962,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = `
961962
onBlur={[Function]}
962963
onClick={[Function]}
963964
onFocus={[Function]}
965+
onKeyDown={[Function]}
964966
onMouseEnter={[Function]}
965967
onMouseLeave={[Function]}
966968
style={
@@ -1042,6 +1044,7 @@ exports[`DOM snapshots SLDSBuilderHeader Base with Page Type Editable 1`] = `
10421044
onBlur={[Function]}
10431045
onClick={[Function]}
10441046
onFocus={[Function]}
1047+
onKeyDown={[Function]}
10451048
onMouseEnter={[Function]}
10461049
onMouseLeave={[Function]}
10471050
style={
@@ -2595,6 +2598,7 @@ exports[`DOM snapshots SLDSBuilderHeader Failed Save 1`] = `
25952598
className="slds-button slds-color__text_gray-10 slds-align-middle slds-m-right_x-small"
25962599
onBlur={[Function]}
25972600
onFocus={[Function]}
2601+
onKeyDown={[Function]}
25982602
onMouseEnter={[Function]}
25992603
onMouseLeave={[Function]}
26002604
type="button"

‎components/combobox/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -895,6 +895,7 @@ exports[`DOM snapshots SLDSCombobox Base Inline Help 1`] = `
895895
onBlur={[Function]}
896896
onClick={[Function]}
897897
onFocus={[Function]}
898+
onKeyDown={[Function]}
898899
onMouseEnter={[Function]}
899900
onMouseLeave={[Function]}
900901
type="button"
@@ -1688,6 +1689,7 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1`
16881689
onBlur={[Function]}
16891690
onClick={null}
16901691
onFocus={[Function]}
1692+
onKeyDown={[Function]}
16911693
onMouseEnter={[Function]}
16921694
onMouseLeave={[Function]}
16931695
role="option"
@@ -1744,6 +1746,7 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1`
17441746
className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip"
17451747
id="combobox-base-listbox-option-help-4"
17461748
onKeyDown={[Function]}
1749+
onMouseLeave={[Function]}
17471750
role="tooltip"
17481751
style={
17491752
Object {
@@ -1835,6 +1838,7 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1`
18351838
onBlur={[Function]}
18361839
onClick={null}
18371840
onFocus={[Function]}
1841+
onKeyDown={[Function]}
18381842
onMouseEnter={[Function]}
18391843
onMouseLeave={[Function]}
18401844
role="option"
@@ -1891,6 +1895,7 @@ exports[`DOM snapshots SLDSCombobox Base Menu Item Disabled With Tooltip Open 1`
18911895
className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip"
18921896
id="combobox-base-listbox-option-help-6"
18931897
onKeyDown={[Function]}
1898+
onMouseLeave={[Function]}
18941899
role="tooltip"
18951900
style={
18961901
Object {

‎components/component-docs.json‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17575,7 +17575,24 @@
1757517575
"name": "handleMouseLeave",
1757617576
"docblock": null,
1757717577
"modifiers": [],
17578-
"params": [],
17578+
"params": [
17579+
{
17580+
"name": "e",
17581+
"type": null
17582+
}
17583+
],
17584+
"returns": null
17585+
},
17586+
{
17587+
"name": "handleKeyDown",
17588+
"docblock": null,
17589+
"modifiers": [],
17590+
"params": [
17591+
{
17592+
"name": "e",
17593+
"type": null
17594+
}
17595+
],
1757917596
"returns": null
1758017597
},
1758117598
{

‎components/input/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1623,6 +1623,7 @@ exports[`DOM snapshots SLDSInput Field Level Help 1`] = `
16231623
onBlur={[Function]}
16241624
onClick={[Function]}
16251625
onFocus={[Function]}
1626+
onKeyDown={[Function]}
16261627
onMouseEnter={[Function]}
16271628
onMouseLeave={[Function]}
16281629
type="button"
@@ -1695,6 +1696,7 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = `
16951696
onBlur={[Function]}
16961697
onClick={[Function]}
16971698
onFocus={[Function]}
1699+
onKeyDown={[Function]}
16981700
onMouseEnter={[Function]}
16991701
onMouseLeave={[Function]}
17001702
type="button"
@@ -1717,6 +1719,7 @@ exports[`DOM snapshots SLDSInput Field Level Help, Tooltip Open 1`] = `
17171719
className="absolute-positioned slds-nubbin_bottom-left slds-popover slds-popover_tooltip"
17181720
id="field-level-help-tooltip"
17191721
onKeyDown={[Function]}
1722+
onMouseLeave={[Function]}
17201723
role="tooltip"
17211724
style={
17221725
Object {

‎components/menu-dropdown/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5375,6 +5375,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = `
53755375
onBlur={[Function]}
53765376
onClick={[Function]}
53775377
onFocus={[Function]}
5378+
onKeyDown={[Function]}
53785379
onMouseEnter={[Function]}
53795380
onMouseLeave={[Function]}
53805381
role="menuitem"
@@ -5391,6 +5392,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = `
53915392
className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip"
53925393
id="dropdown-with-tooltips-item-2-tooltip"
53935394
onKeyDown={[Function]}
5395+
onMouseLeave={[Function]}
53945396
role="tooltip"
53955397
style={
53965398
Object {
@@ -5459,6 +5461,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = `
54595461
onBlur={[Function]}
54605462
onClick={[Function]}
54615463
onFocus={[Function]}
5464+
onKeyDown={[Function]}
54625465
onMouseEnter={[Function]}
54635466
onMouseLeave={[Function]}
54645467
role="menuitem"
@@ -5475,6 +5478,7 @@ exports[`DOM snapshots SLDSMenuDropdown With tooltips (open) 1`] = `
54755478
className="absolute-positioned slds-nubbin_bottom slds-popover slds-popover_tooltip"
54765479
id="dropdown-with-tooltips-item-5-tooltip"
54775480
onKeyDown={[Function]}
5481+
onMouseLeave={[Function]}
54785482
role="tooltip"
54795483
style={
54805484
Object {

‎components/page-header/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1659,6 +1659,7 @@ exports[`DOM snapshots SLDSPageHeader Record Home (truncates) 1`] = `
16591659
className="slds-truncate"
16601660
onBlur={[Function]}
16611661
onFocus={[Function]}
1662+
onKeyDown={[Function]}
16621663
onMouseEnter={[Function]}
16631664
onMouseLeave={[Function]}
16641665
tabIndex="0"

‎components/progress-indicator/__docs__/__snapshots__/storybook-stories.storyshot‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
3737
onBlur={[Function]}
3838
onClick={[Function]}
3939
onFocus={[Function]}
40+
onKeyDown={[Function]}
4041
onMouseEnter={[Function]}
4142
onMouseLeave={[Function]}
4243
type="button"
@@ -68,6 +69,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
6869
onBlur={[Function]}
6970
onClick={[Function]}
7071
onFocus={[Function]}
72+
onKeyDown={[Function]}
7173
onMouseEnter={[Function]}
7274
onMouseLeave={[Function]}
7375
type="button"
@@ -100,6 +102,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
100102
className="slds-button slds-progress__marker slds-is-disabled"
101103
onBlur={[Function]}
102104
onFocus={[Function]}
105+
onKeyDown={[Function]}
103106
onMouseEnter={[Function]}
104107
onMouseLeave={[Function]}
105108
role="button"
@@ -140,6 +143,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
140143
className="slds-button slds-progress__marker slds-is-disabled"
141144
onBlur={[Function]}
142145
onFocus={[Function]}
146+
onKeyDown={[Function]}
143147
onMouseEnter={[Function]}
144148
onMouseLeave={[Function]}
145149
role="button"
@@ -178,6 +182,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base 1`] = `
178182
className="slds-button slds-progress__marker slds-is-disabled"
179183
onBlur={[Function]}
180184
onFocus={[Function]}
185+
onKeyDown={[Function]}
181186
onMouseEnter={[Function]}
182187
onMouseLeave={[Function]}
183188
role="button"
@@ -263,6 +268,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
263268
onBlur={[Function]}
264269
onClick={[Function]}
265270
onFocus={[Function]}
271+
onKeyDown={[Function]}
266272
onMouseEnter={[Function]}
267273
onMouseLeave={[Function]}
268274
type="button"
@@ -302,6 +308,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
302308
onBlur={[Function]}
303309
onClick={[Function]}
304310
onFocus={[Function]}
311+
onKeyDown={[Function]}
305312
onMouseEnter={[Function]}
306313
onMouseLeave={[Function]}
307314
type="button"
@@ -343,6 +350,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
343350
onBlur={[Function]}
344351
onClick={[Function]}
345352
onFocus={[Function]}
353+
onKeyDown={[Function]}
346354
onMouseEnter={[Function]}
347355
onMouseLeave={[Function]}
348356
type="button"
@@ -377,6 +385,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
377385
className="slds-button slds-progress__marker slds-is-disabled"
378386
onBlur={[Function]}
379387
onFocus={[Function]}
388+
onKeyDown={[Function]}
380389
onMouseEnter={[Function]}
381390
onMouseLeave={[Function]}
382391
role="button"
@@ -415,6 +424,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Disabled Steps 1`] = `
415424
className="slds-button slds-progress__marker slds-is-disabled"
416425
onBlur={[Function]}
417426
onFocus={[Function]}
427+
onKeyDown={[Function]}
418428
onMouseEnter={[Function]}
419429
onMouseLeave={[Function]}
420430
role="button"
@@ -500,6 +510,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
500510
onBlur={[Function]}
501511
onClick={[Function]}
502512
onFocus={[Function]}
513+
onKeyDown={[Function]}
503514
onMouseEnter={[Function]}
504515
onMouseLeave={[Function]}
505516
type="button"
@@ -541,6 +552,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
541552
onBlur={[Function]}
542553
onClick={[Function]}
543554
onFocus={[Function]}
555+
onKeyDown={[Function]}
544556
onMouseEnter={[Function]}
545557
onMouseLeave={[Function]}
546558
type="button"
@@ -582,6 +594,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
582594
onBlur={[Function]}
583595
onClick={[Function]}
584596
onFocus={[Function]}
597+
onKeyDown={[Function]}
585598
onMouseEnter={[Function]}
586599
onMouseLeave={[Function]}
587600
type="button"
@@ -623,6 +636,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
623636
onBlur={[Function]}
624637
onClick={[Function]}
625638
onFocus={[Function]}
639+
onKeyDown={[Function]}
626640
onMouseEnter={[Function]}
627641
onMouseLeave={[Function]}
628642
type="button"
@@ -664,6 +678,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
664678
onBlur={[Function]}
665679
onClick={[Function]}
666680
onFocus={[Function]}
681+
onKeyDown={[Function]}
667682
onMouseEnter={[Function]}
668683
onMouseLeave={[Function]}
669684
type="button"
@@ -697,6 +712,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
697712
onBlur={[Function]}
698713
onClick={[Function]}
699714
onFocus={[Function]}
715+
onKeyDown={[Function]}
700716
onMouseEnter={[Function]}
701717
onMouseLeave={[Function]}
702718
type="button"
@@ -730,6 +746,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
730746
onBlur={[Function]}
731747
onClick={[Function]}
732748
onFocus={[Function]}
749+
onKeyDown={[Function]}
733750
onMouseEnter={[Function]}
734751
onMouseLeave={[Function]}
735752
type="button"
@@ -763,6 +780,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
763780
onBlur={[Function]}
764781
onClick={[Function]}
765782
onFocus={[Function]}
783+
onKeyDown={[Function]}
766784
onMouseEnter={[Function]}
767785
onMouseLeave={[Function]}
768786
type="button"
@@ -796,6 +814,7 @@ exports[`DOM snapshots SLDSProgressIndicator Base With Many Steps 1`] = `
796814
onBlur={[Function]}
797815
onClick={[Function]}
798816
onFocus={[Function]}
817+
onKeyDown={[Function]}
799818
onMouseEnter={[Function]}
800819
onMouseLeave={[Function]}
801820
type="button"
@@ -875,6 +894,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
875894
onBlur={[Function]}
876895
onClick={[Function]}
877896
onFocus={[Function]}
897+
onKeyDown={[Function]}
878898
onMouseEnter={[Function]}
879899
onMouseLeave={[Function]}
880900
type="button"
@@ -914,6 +934,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
914934
onBlur={[Function]}
915935
onClick={[Function]}
916936
onFocus={[Function]}
937+
onKeyDown={[Function]}
917938
onMouseEnter={[Function]}
918939
onMouseLeave={[Function]}
919940
type="button"
@@ -955,6 +976,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
955976
onBlur={[Function]}
956977
onClick={[Function]}
957978
onFocus={[Function]}
979+
onKeyDown={[Function]}
958980
onMouseEnter={[Function]}
959981
onMouseLeave={[Function]}
960982
type="button"
@@ -998,6 +1020,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
9981020
onBlur={[Function]}
9991021
onClick={[Function]}
10001022
onFocus={[Function]}
1023+
onKeyDown={[Function]}
10011024
onMouseEnter={[Function]}
10021025
onMouseLeave={[Function]}
10031026
type="button"
@@ -1031,6 +1054,7 @@ exports[`DOM snapshots SLDSProgressIndicator Completed Progress 1`] = `
10311054
onBlur={[Function]}
10321055
onClick={[Function]}
10331056
onFocus={[Function]}
1057+
onKeyDown={[Function]}
10341058
onMouseEnter={[Function]}
10351059
onMouseLeave={[Function]}
10361060
type="button"
@@ -1405,6 +1429,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
14051429
onBlur={[Function]}
14061430
onClick={[Function]}
14071431
onFocus={[Function]}
1432+
onKeyDown={[Function]}
14081433
onMouseEnter={[Function]}
14091434
onMouseLeave={[Function]}
14101435
type="button"
@@ -1444,6 +1469,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
14441469
onBlur={[Function]}
14451470
onClick={[Function]}
14461471
onFocus={[Function]}
1472+
onKeyDown={[Function]}
14471473
onMouseEnter={[Function]}
14481474
onMouseLeave={[Function]}
14491475
type="button"
@@ -1484,6 +1510,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
14841510
className="slds-button slds-progress__marker slds-is-disabled"
14851511
onBlur={[Function]}
14861512
onFocus={[Function]}
1513+
onKeyDown={[Function]}
14871514
onMouseEnter={[Function]}
14881515
onMouseLeave={[Function]}
14891516
role="button"
@@ -1524,6 +1551,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
15241551
className="slds-button slds-progress__marker slds-is-disabled"
15251552
onBlur={[Function]}
15261553
onFocus={[Function]}
1554+
onKeyDown={[Function]}
15271555
onMouseEnter={[Function]}
15281556
onMouseLeave={[Function]}
15291557
role="button"
@@ -1562,6 +1590,7 @@ exports[`DOM snapshots SLDSProgressIndicator Step Error 1`] = `
15621590
className="slds-button slds-progress__marker slds-is-disabled"
15631591
onBlur={[Function]}
15641592
onFocus={[Function]}
1593+
onKeyDown={[Function]}
15651594
onMouseEnter={[Function]}
15661595
onMouseLeave={[Function]}
15671596
role="button"

0 commit comments

Comments
 (0)