Skip to content

Combobox: Padding and border issues #2761

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 12, 2021
Merged

Combobox: Padding and border issues #2761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
567b180
Combobox: Padding and border issues
bxiao Feb 12, 2021
ca2f127
Add comments to div wrapper
interactivellama Feb 12, 2021
64a9cf9
Update docs
interactivellama Feb 12, 2021
3f115e6
Update aXe test config / exceptions
interactivellama Feb 12, 2021
d5c024c
lint
interactivellama Feb 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 55 additions & 7 deletions components/combobox/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions components/combobox/__tests__/combobox.browser-test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ describe('SLDSCombobox', function describeFunction() {
it('has aria-haspopup, role is combobox, aria-expanded is false when closed, aria-expanded is true when open', function () {
wrapper = mount(<DemoComponent multiple />, { attachTo: mountNode });
const nodes = getNodes({ wrapper });
expect(nodes.combobox).attr('role', 'combobox');
expect(nodes.input).attr('aria-haspopup', 'listbox');
expect(nodes.input).attr('role', 'combobox');
// closed
Expand Down
21 changes: 13 additions & 8 deletions components/combobox/combobox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved */
/* Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */

/* eslint-disable jsx-a11y/role-has-required-aria-props */
/* eslint-disable max-lines */

import React from 'react';
Expand Down Expand Up @@ -1074,8 +1073,8 @@ class Combobox extends React.Component {
},
props.className
)}
// used on menu's listbox
aria-owns={this.getIsOpen() ? `${this.getId()}-listbox` : undefined} // eslint-disable-line jsx-a11y/aria-proptypes
// Not in ARIA 1.2 spec, temporary for SLDS styles
role="combobox" // eslint-disable-line jsx-a11y/role-supports-aria-props, jsx-a11y/role-has-required-aria-props
>
<InnerInput
aria-autocomplete="list"
Expand All @@ -1089,7 +1088,7 @@ class Combobox extends React.Component {
}
aria-describedby={this.getErrorId()}
aria-expanded={this.getIsOpen()}
aria-haspopup="listbox" // eslint-disable-line jsx-a11y/aria-proptypes
aria-haspopup="listbox"
role="combobox"
autoComplete="off"
className="slds-combobox__input"
Expand Down Expand Up @@ -1214,6 +1213,8 @@ class Combobox extends React.Component {
},
props.className
)}
// Not in ARIA 1.2 spec, temporary for SLDS styles
role="combobox" // eslint-disable-line jsx-a11y/role-supports-aria-props, jsx-a11y/role-has-required-aria-props
>
<InnerInput
aria-autocomplete="list"
Expand Down Expand Up @@ -1292,7 +1293,6 @@ class Combobox extends React.Component {
? props.selection[0].label
: props.value;

/* eslint-disable jsx-a11y/role-supports-aria-props */
return (
<div className="slds-form-element__control">
<div
Expand All @@ -1314,6 +1314,8 @@ class Combobox extends React.Component {
},
props.className
)}
// Not in ARIA 1.2 spec, temporary for SLDS styles
role="combobox" // eslint-disable-line jsx-a11y/role-supports-aria-props, jsx-a11y/role-has-required-aria-props
>
<InnerInput
defaultValue={props.defaultValue}
Expand Down Expand Up @@ -1478,6 +1480,8 @@ class Combobox extends React.Component {
},
props.className
)}
// Not in ARIA 1.2 spec, temporary for SLDS styles
role="combobox" // eslint-disable-line jsx-a11y/role-supports-aria-props, jsx-a11y/role-has-required-aria-props
>
<Popover {...popoverProps}>
<InnerInput
Expand Down Expand Up @@ -1545,7 +1549,6 @@ class Combobox extends React.Component {
`${props.selection.length} options selected`
: (props.selection[0] && props.selection[0].label) || '';

/* eslint-disable jsx-a11y/role-supports-aria-props */
return (
<div className="slds-form-element__control">
<div className="slds-combobox_container">
Expand All @@ -1563,6 +1566,8 @@ class Combobox extends React.Component {
},
props.className
)}
// Not in ARIA 1.2 spec, temporary for SLDS styles
role="combobox" // eslint-disable-line jsx-a11y/role-supports-aria-props, jsx-a11y/role-has-required-aria-props
>
<InnerInput
defaultValue={props.defaultValue}
Expand Down Expand Up @@ -1656,7 +1661,6 @@ class Combobox extends React.Component {
}) => {
const value = (props.selection[0] && props.selection[0].label) || '';

/* eslint-disable jsx-a11y/role-supports-aria-props */
return (
<div className="slds-form-element__control">
<div className="slds-combobox_container">
Expand All @@ -1674,6 +1678,8 @@ class Combobox extends React.Component {
},
props.className
)}
// Not in ARIA 1.2 spec, temporary for SLDS styles
role="combobox" // eslint-disable-line jsx-a11y/role-supports-aria-props, jsx-a11y/role-has-required-aria-props
>
<InnerInput
defaultValue={props.defaultValue}
Expand Down Expand Up @@ -1832,7 +1838,6 @@ class Combobox extends React.Component {
);
}
}
/* eslint-enable jsx-a11y/role-supports-aria-props */

Combobox.contextTypes = {
iconPath: PropTypes.string,
Expand Down
126 changes: 63 additions & 63 deletions components/component-docs.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion components/date-picker/__tests__/__snapshots__/datepicker.dom-snapshot-test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,7 @@ exports[`Datepicker
>
<div
className="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none"
role="combobox"
>
<div
className="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
Expand Down Expand Up @@ -1034,6 +1035,7 @@ exports[`Datepicker
>
<div
className="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none"
role="combobox"
>
<div
className="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
Expand Down Expand Up @@ -1896,6 +1898,7 @@ exports[`Datepicker
>
<div
className="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none"
role="combobox"
>
<div
className="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
Expand Down Expand Up @@ -2755,6 +2758,7 @@ exports[`Datepicker Default DOM Snapshot 1`] = `
>
<div
className="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none"
role="combobox"
>
<div
className="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right"
Expand Down Expand Up @@ -3481,7 +3485,7 @@ exports[`Datepicker Default HTML Snapshot 1`] = `
<div class=\\"slds-form-element\\"><label class=\\"slds-form-element__label slds-assistive-text\\" for=\\"sample-datepicker-year-picklist\\">Year</label>
<div class=\\"slds-form-element__control\\">
<div class=\\"slds-combobox_container\\">
<div class=\\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none\\">
<div class=\\"slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click ignore-react-onclickoutside slds-shrink-none\\" role=\\"combobox\\">
<div class=\\"slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right\\" role=\\"none\\"><input type=\\"text\\" autoComplete=\\"off\\" class=\\"slds-input slds-combobox__input\\" id=\\"sample-datepicker-year-picklist\\" placeholder=\\"Select an Option\\" readonly=\\"\\" role=\\"combobox\\" aria-autocomplete=\\"list\\" aria-expanded=\\"false\\" aria-haspopup=\\"listbox\\" value=\\"2014\\" /><span class=\\"slds-icon_container slds-input__icon slds-input__icon_right\\"><svg aria-hidden=\\"true\\" class=\\"slds-icon slds-icon_x-small slds-icon-text-default\\">
<use href=\\"/assets/icons/utility-sprite/svg/symbols.svg#down\\"></use>
</svg></span></div>
Expand Down
Loading