Skip to content
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

Jump to bottom

Update combobox.jsx based on WCAG Success Criteria: 4.1.2 #3146

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Update combobox.jsx based on WCAG Success Criteria: 4.1.2 #3146

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cc1f71b
Update combobox.jsx
anunay999 Jul 10, 2024
7743b74
Update combobox.jsx
anunay999 Jul 10, 2024
bb64d74
Update snapshot
anunay999 Jul 10, 2024
eccf9c8
removed comments
anunay999 Jul 14, 2024
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
12 changes: 0 additions & 12 deletions components/combobox/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3473,7 +3473,6 @@ exports[`DOM snapshots SLDSCombobox Inline Single Entity Selection 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -4682,7 +4681,6 @@ exports[`DOM snapshots SLDSCombobox Readonly Single Menu Item Disabled 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -4774,7 +4772,6 @@ exports[`DOM snapshots SLDSCombobox Readonly Single Selection - Right to Left (R
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -4843,7 +4840,6 @@ exports[`DOM snapshots SLDSCombobox Readonly Single Selection 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -4911,7 +4907,6 @@ exports[`DOM snapshots SLDSCombobox Readonly Single Selection Custom Menu Item 1
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select company"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -4979,7 +4974,6 @@ exports[`DOM snapshots SLDSCombobox Readonly Single Selection Deselect 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -5047,7 +5041,6 @@ exports[`DOM snapshots SLDSCombobox Readonly Single Selection Disabled 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -7928,7 +7921,6 @@ exports[`DOM snapshots SLDSCombobox Snapshot Readonly Single Selection 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -7997,7 +7989,6 @@ exports[`DOM snapshots SLDSCombobox Snapshot Readonly Single Selection Custom Me
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select company"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -8629,7 +8620,6 @@ exports[`DOM snapshots SLDSCombobox Snapshot Readonly Single Selection Disabled
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -8697,7 +8687,6 @@ exports[`DOM snapshots SLDSCombobox Snapshot Readonly Single Selection Selected
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -8766,7 +8755,6 @@ exports[`DOM snapshots SLDSCombobox Snapshot Readonly Single Selection Selected
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down
3 changes: 2 additions & 1 deletion components/combobox/combobox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1774,7 +1774,8 @@ class Combobox extends React.Component {
}
}}
placeholder={labels.placeholderReadOnly}
readOnly
// based on WCAG Success Criteria: 4.1.2: Name, Role, Value - input element is interactive
// readOnly
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please remove this extra comment

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

required={props.required}
role="textbox"
value={inputValue}
Expand Down
7 changes: 1 addition & 6 deletions 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 @@ -192,7 +192,6 @@ exports[`Datepicker
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1056,7 +1055,6 @@ exports[`Datepicker
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1919,7 +1917,6 @@ exports[`Datepicker
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2779,7 +2776,6 @@ exports[`Datepicker Default DOM Snapshot 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -3486,7 +3482,7 @@ exports[`Datepicker Default HTML Snapshot 1`] = `
<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\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-haspopup=\\"listbox\\">
<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=\\"textbox\\" aria-autocomplete=\\"list\\" 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\\">
<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\\" role=\\"textbox\\" aria-autocomplete=\\"list\\" 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>
</div>
Expand Down Expand Up @@ -3745,7 +3741,6 @@ exports[`ErrorPicker 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down
28 changes: 0 additions & 28 deletions components/expression/__docs__/__snapshots__/storybook-stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ exports[`DOM snapshots SLDSExpression Initial State 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -144,7 +143,6 @@ exports[`DOM snapshots SLDSExpression Initial State 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -209,7 +207,6 @@ exports[`DOM snapshots SLDSExpression Initial State 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -403,7 +400,6 @@ exports[`DOM snapshots SLDSExpression w/ Custom Logic 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -510,7 +506,6 @@ exports[`DOM snapshots SLDSExpression w/ Custom Logic 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -575,7 +570,6 @@ exports[`DOM snapshots SLDSExpression w/ Custom Logic 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -728,7 +722,6 @@ exports[`DOM snapshots SLDSExpression w/ Custom Logic 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -793,7 +786,6 @@ exports[`DOM snapshots SLDSExpression w/ Custom Logic 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -983,7 +975,6 @@ exports[`DOM snapshots SLDSExpression w/ Formula Logic 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1301,7 +1292,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1387,7 +1377,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1452,7 +1441,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1600,7 +1588,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1686,7 +1673,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1751,7 +1737,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1904,7 +1889,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -1969,7 +1953,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2141,7 +2124,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2248,7 +2230,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2313,7 +2294,6 @@ exports[`DOM snapshots SLDSExpression w/ Group 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2531,7 +2511,6 @@ exports[`DOM snapshots SLDSExpression w/ Multiple Conditions 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2617,7 +2596,6 @@ exports[`DOM snapshots SLDSExpression w/ Multiple Conditions 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2682,7 +2660,6 @@ exports[`DOM snapshots SLDSExpression w/ Multiple Conditions 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2835,7 +2812,6 @@ exports[`DOM snapshots SLDSExpression w/ Multiple Conditions 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -2900,7 +2876,6 @@ exports[`DOM snapshots SLDSExpression w/ Multiple Conditions 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -3094,7 +3069,6 @@ exports[`DOM snapshots SLDSExpression w/ Resource Selected 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -3180,7 +3154,6 @@ exports[`DOM snapshots SLDSExpression w/ Resource Selected 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down Expand Up @@ -3245,7 +3218,6 @@ exports[`DOM snapshots SLDSExpression w/ Resource Selected 1`] = `
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Select an Option"
readOnly={true}
required={false}
role="textbox"
type="text"
Expand Down