Skip to content

Commit 06d8ac3

Browse files
interactivellamainteractivellama
authored
Merge pull request salesforce#1660 from interactivellama/pill-aria-selected-state
Combobox/PillContainer: Tab propagation and pill aria selected state
2 parents d209d2e + f1234b6 commit 06d8ac3

File tree

6 files changed

+41
-37
lines changed

6 files changed

+41
-37
lines changed

‎components/combobox/__tests__/__snapshots__/combobox.snapshot-test.jsx.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1179,7 +1179,7 @@ exports[`Base Selected DOM Snapshot 1`] = `
11791179
role="presentation"
11801180
>
11811181
<span
1182-
aria-selected={true}
1182+
aria-selected="true"
11831183
className="slds-pill"
11841184
onBlur={[Function]}
11851185
onClick={[Function]}
@@ -1374,7 +1374,7 @@ exports[`Inline Multiple Selection Selected DOM Snapshot 1`] = `
13741374
role="presentation"
13751375
>
13761376
<span
1377-
aria-selected={true}
1377+
aria-selected="true"
13781378
className="slds-pill"
13791379
onBlur={[Function]}
13801380
onClick={[Function]}
@@ -1441,7 +1441,7 @@ exports[`Inline Multiple Selection Selected DOM Snapshot 1`] = `
14411441
role="presentation"
14421442
>
14431443
<span
1444-
aria-selected={false}
1444+
aria-selected="true"
14451445
className="slds-pill"
14461446
onBlur={[Function]}
14471447
onClick={[Function]}
@@ -1561,7 +1561,7 @@ exports[`Inline Multiple Selection Selected HTML Snapshot 1`] = `
15611561
</span><span class=\\"slds-pill__label\\" title=\\"Acme\\">Acme</span><span class=\\"slds-icon_container slds-pill__remove\\" title=\\"Remove\\" role=\\"button\\"><svg style=\\"cursor:pointer\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#close\\"></use></svg><span class=\\"slds-assistive-text\\">, Press delete or backspace to remove</span></span>
15621562
</span>
15631563
</li>
1564-
<li role=\\"presentation\\" class=\\"slds-listbox__item\\"><span tabindex=\\"-1\\" aria-selected=\\"false\\" role=\\"option\\" class=\\"slds-pill\\"><span class=\\"slds-pill__icon_container\\"><span class=\\"slds-icon_container slds-icon-standard-account\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon\\"><use xlink:href=\\"/assets/icons/standard-sprite/svg/symbols.svg#account\\"></use></svg><span class=\\"slds-assistive-text\\">Account</span></span>
1564+
<li role=\\"presentation\\" class=\\"slds-listbox__item\\"><span tabindex=\\"-1\\" aria-selected=\\"true\\" role=\\"option\\" class=\\"slds-pill\\"><span class=\\"slds-pill__icon_container\\"><span class=\\"slds-icon_container slds-icon-standard-account\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon\\"><use xlink:href=\\"/assets/icons/standard-sprite/svg/symbols.svg#account\\"></use></svg><span class=\\"slds-assistive-text\\">Account</span></span>
15651565
</span><span class=\\"slds-pill__label\\" title=\\"Salesforce.com, Inc.\\">Salesforce.com, Inc.</span><span class=\\"slds-icon_container slds-pill__remove\\" title=\\"Remove\\" role=\\"button\\"><svg style=\\"cursor:pointer\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#close\\"></use></svg><span class=\\"slds-assistive-text\\">, Press delete or backspace to remove</span></span>
15661566
</span>
15671567
</li>
@@ -1912,7 +1912,7 @@ exports[`Readonly Multiple Selection Multiple Items Selected DOM Snapshot 1`] =
19121912
role="presentation"
19131913
>
19141914
<span
1915-
aria-selected={true}
1915+
aria-selected="true"
19161916
className="slds-pill"
19171917
onBlur={[Function]}
19181918
onClick={[Function]}
@@ -1958,7 +1958,7 @@ exports[`Readonly Multiple Selection Multiple Items Selected DOM Snapshot 1`] =
19581958
role="presentation"
19591959
>
19601960
<span
1961-
aria-selected={false}
1961+
aria-selected="true"
19621962
className="slds-pill"
19631963
onBlur={[Function]}
19641964
onClick={[Function]}
@@ -2019,7 +2019,7 @@ exports[`Readonly Multiple Selection Multiple Items Selected HTML Snapshot 1`] =
20192019
<li role=\\"presentation\\" class=\\"slds-listbox__item\\"><span tabindex=\\"0\\" aria-selected=\\"true\\" role=\\"option\\" class=\\"slds-pill\\"><span class=\\"slds-pill__label\\" title=\\"Acme\\">Acme</span><span class=\\"slds-icon_container slds-pill__remove\\" title=\\"Remove\\" role=\\"button\\"><svg style=\\"cursor:pointer\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#close\\"></use></svg><span class=\\"slds-assistive-text\\">, Press delete or backspace to remove</span></span>
20202020
</span>
20212021
</li>
2022-
<li role=\\"presentation\\" class=\\"slds-listbox__item\\"><span tabindex=\\"-1\\" aria-selected=\\"false\\" role=\\"option\\" class=\\"slds-pill\\"><span class=\\"slds-pill__label\\" title=\\"Salesforce.com, Inc.\\">Salesforce.com, Inc.</span><span class=\\"slds-icon_container slds-pill__remove\\" title=\\"Remove\\" role=\\"button\\"><svg style=\\"cursor:pointer\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#close\\"></use></svg><span class=\\"slds-assistive-text\\">, Press delete or backspace to remove</span></span>
2022+
<li role=\\"presentation\\" class=\\"slds-listbox__item\\"><span tabindex=\\"-1\\" aria-selected=\\"true\\" role=\\"option\\" class=\\"slds-pill\\"><span class=\\"slds-pill__label\\" title=\\"Salesforce.com, Inc.\\">Salesforce.com, Inc.</span><span class=\\"slds-icon_container slds-pill__remove\\" title=\\"Remove\\" role=\\"button\\"><svg style=\\"cursor:pointer\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\"><use xlink:href=\\"/assets/icons/utility-sprite/svg/symbols.svg#close\\"></use></svg><span class=\\"slds-assistive-text\\">, Press delete or backspace to remove</span></span>
20232023
</span>
20242024
</li>
20252025
</ul>

‎components/combobox/combobox.jsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -529,8 +529,15 @@ class Combobox extends React.Component {
529529
};
530530

531531
if (this.props.variant === 'readonly') {
532-
callbacks[KEYS.TAB] = { callback: this.handleKeyDownTab };
533-
callbacks.other = { callback: this.handleKeyDownOther };
532+
if (this.props.selection.length > 2) {
533+
callbacks[KEYS.TAB] = { callback: this.handleKeyDownTab };
534+
} else {
535+
callbacks[KEYS.TAB] = undefined;
536+
}
537+
callbacks.other = {
538+
callback: this.handleKeyDownOther,
539+
stopPropagation: false,
540+
};
534541
}
535542

536543
// Helper function that takes an object literal of callbacks that are triggered with a key event

‎components/pill-container/private/selected-listbox.jsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -180,14 +180,7 @@ const SelectedListBox = (props) =>
180180
aria-label={props.assistiveText.selectedListboxLabel}
181181
>
182182
{props.selection.map((option, renderIndex) => {
183-
// Makes first pill in DOM snapshots have aria-selected=true on first render
184-
const setActiveBasedOnstateFromParent =
185-
renderIndex === props.activeOptionIndex &&
186-
isEqual(option, props.activeOption);
187-
const listboxRenderedForFirstTime =
188-
props.activeOptionIndex === -1 && renderIndex === 0;
189-
const active =
190-
setActiveBasedOnstateFromParent || listboxRenderedForFirstTime;
183+
const hasTabIndex = renderIndex === props.activeOptionIndex;
191184
const icon = getIcon(option);
192185
const avatar = !icon ? getAvatar(option) : null;
193186

@@ -198,7 +191,7 @@ const SelectedListBox = (props) =>
198191
key={`${props.id}-list-item-${option.id}`}
199192
>
200193
<Pill
201-
active={active}
194+
active={hasTabIndex && props.listboxHasFocus}
202195
assistiveText={{
203196
remove: props.assistiveText.removePill,
204197
}}
@@ -234,7 +227,7 @@ const SelectedListBox = (props) =>
234227
removeTitle: props.labels.removePillTitle,
235228
}}
236229
requestFocus={props.listboxHasFocus}
237-
tabIndex={active ? 0 : -1}
230+
tabIndex={hasTabIndex ? 0 : -1}
238231
/>
239232
</li>
240233
);

‎components/utilities/pill/index.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
22
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
33

4+
/**
5+
* This Pill component should be used within a listbox and differs from the standalone Pill component which is typically used for actions (such as a link) and not form fields. This component should be used in conjuction with `PillContainer`.
6+
*/
47
import React from 'react';
58
import PropTypes from 'prop-types';
69

@@ -14,7 +17,7 @@ import SLDSPill from '../../../components/pill';
1417

1518
const propTypes = {
1619
/**
17-
* Pill is the active pill within a pill container. This will request focus on the DOM node.
20+
* Pill is the actively focused pill within a pill container. This will request focus on the DOM node.
1821
*/
1922
active: PropTypes.bool,
2023
/**
@@ -133,7 +136,7 @@ const Pill = (props) => {
133136
assistiveText={{
134137
remove: assistiveText.remove,
135138
}}
136-
aria-selected={props.active}
139+
aria-selected="true"
137140
onBlur={props.events.onBlur}
138141
onClick={
139142
typeof props.events.onClick === 'function'

‎tests/__snapshots__/story-based-tests.snapshot-test.js.snap‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8587,7 +8587,7 @@ exports[`DOM snapshots SLDSPillContainer Bare Pill Container 1`] = `
85878587
role="presentation"
85888588
>
85898589
<span
8590-
aria-selected={true}
8590+
aria-selected="true"
85918591
className="slds-pill slds-pill_bare"
85928592
onBlur={[Function]}
85938593
onClick={[Function]}
@@ -8633,7 +8633,7 @@ exports[`DOM snapshots SLDSPillContainer Bare Pill Container 1`] = `
86338633
role="presentation"
86348634
>
86358635
<span
8636-
aria-selected={false}
8636+
aria-selected="true"
86378637
className="slds-pill slds-pill_bare"
86388638
onBlur={[Function]}
86398639
onClick={[Function]}
@@ -8714,7 +8714,7 @@ exports[`DOM snapshots SLDSPillContainer Base Pill Container 1`] = `
87148714
role="presentation"
87158715
>
87168716
<span
8717-
aria-selected={true}
8717+
aria-selected="true"
87188718
className="slds-pill"
87198719
onBlur={[Function]}
87208720
onClick={[Function]}
@@ -8760,7 +8760,7 @@ exports[`DOM snapshots SLDSPillContainer Base Pill Container 1`] = `
87608760
role="presentation"
87618761
>
87628762
<span
8763-
aria-selected={false}
8763+
aria-selected="true"
87648764
className="slds-pill"
87658765
onBlur={[Function]}
87668766
onClick={[Function]}
@@ -8841,7 +8841,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Avatars 1`] = `
88418841
role="presentation"
88428842
>
88438843
<span
8844-
aria-selected={true}
8844+
aria-selected="true"
88458845
className="slds-pill"
88468846
onBlur={[Function]}
88478847
onClick={[Function]}
@@ -8903,7 +8903,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Avatars 1`] = `
89038903
role="presentation"
89048904
>
89058905
<span
8906-
aria-selected={false}
8906+
aria-selected="true"
89078907
className="slds-pill"
89088908
onBlur={[Function]}
89098909
onClick={[Function]}
@@ -9000,7 +9000,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
90009000
role="presentation"
90019001
>
90029002
<span
9003-
aria-selected={true}
9003+
aria-selected="true"
90049004
className="slds-pill"
90059005
onBlur={[Function]}
90069006
onClick={[Function]}
@@ -9064,7 +9064,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
90649064
role="presentation"
90659065
>
90669066
<span
9067-
aria-selected={false}
9067+
aria-selected="true"
90689068
className="slds-pill"
90699069
onBlur={[Function]}
90709070
onClick={[Function]}
@@ -9128,7 +9128,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
91289128
role="presentation"
91299129
>
91309130
<span
9131-
aria-selected={false}
9131+
aria-selected="true"
91329132
className="slds-pill"
91339133
onBlur={[Function]}
91349134
onClick={[Function]}
@@ -9191,7 +9191,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
91919191
role="presentation"
91929192
>
91939193
<span
9194-
aria-selected={false}
9194+
aria-selected="true"
91959195
className="slds-pill"
91969196
onBlur={[Function]}
91979197
onClick={[Function]}
@@ -9255,7 +9255,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
92559255
role="presentation"
92569256
>
92579257
<span
9258-
aria-selected={false}
9258+
aria-selected="true"
92599259
className="slds-pill"
92609260
onBlur={[Function]}
92619261
onClick={[Function]}
@@ -9319,7 +9319,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
93199319
role="presentation"
93209320
>
93219321
<span
9322-
aria-selected={false}
9322+
aria-selected="true"
93239323
className="slds-pill"
93249324
onBlur={[Function]}
93259325
onClick={[Function]}
@@ -9383,7 +9383,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
93839383
role="presentation"
93849384
>
93859385
<span
9386-
aria-selected={false}
9386+
aria-selected="true"
93879387
className="slds-pill"
93889388
onBlur={[Function]}
93899389
onClick={[Function]}
@@ -9447,7 +9447,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
94479447
role="presentation"
94489448
>
94499449
<span
9450-
aria-selected={false}
9450+
aria-selected="true"
94519451
className="slds-pill"
94529452
onBlur={[Function]}
94539453
onClick={[Function]}
@@ -9511,7 +9511,7 @@ exports[`DOM snapshots SLDSPillContainer Pill Container With Icons 1`] = `
95119511
role="presentation"
95129512
>
95139513
<span
9514-
aria-selected={false}
9514+
aria-selected="true"
95159515
className="slds-pill"
95169516
onBlur={[Function]}
95179517
onClick={[Function]}

‎utilities/key-callbacks.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const mapKeyEventCallbacks = (
2626
}
2727
callbacks[event.keyCode].callback(event, callbacks[event.keyCode].data);
2828
} else if (event.keyCode && callbacks.other) {
29-
if (stopPropagation) {
29+
// You will likely NOT want to stop propagation of all key presses!
30+
if (callbacks.other.stopPropagation) {
3031
EventUtil.trapEvent(event);
3132
}
3233
callbacks.other.callback(event, callbacks.other.data);

0 commit comments

Comments
 (0)