fix: disable browser autocomplete and edit dropdown items elements #2513
Conversation
✅ Deploy Preview for paragon-openedx ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
httpsmenahassan
force-pushed
the
Form.AutosuggestInput
branch
from
366f068
to
ea459c1
Compare
| @@ -283,8 +286,6 @@ FormAutosuggest.propTypes = { | |||
| ignoredArrowKeysNames: PropTypes.arrayOf(PropTypes.string), | |||
| /** Specifies loading state. */ | |||
| isLoading: PropTypes.bool, | |||
| /** An ARIA role describing the form autosuggest. */ | |||
| role: PropTypes.string, | |||
There was a problem hiding this comment.
We discussed this during the Paragon Working Group. We made the decision to remove consumers' ability to change the role to something that would break WCAG.
httpsmenahassan
force-pushed
the
Form.AutosuggestInput
branch
from
ea459c1
to
8e039be
Compare
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## master #2513 +/- ##
=======================================
Coverage 91.70% 91.70%
=======================================
Files 236 236
Lines 4219 4219
Branches 1021 1021
=======================================
Hits 3869 3869
Misses 346 346
Partials 4 4
☔ View full report in Codecov by Sentry. |
httpsmenahassan
force-pushed
the
Form.AutosuggestInput
branch
2 times, most recently
from
e2df596
to
ffb32de
Compare
| </div> | ||
| ); | ||
| } | ||
|
|
||
| FormAutosuggest.defaultProps = { | ||
| arrowKeyNavigationSelector: 'a:not(:disabled),button:not(:disabled, .btn-icon),input:not(:disabled)', | ||
| arrowKeyNavigationSelector: 'a:not(:disabled),li:not(:disabled, .btn-icon),input:not(:disabled)', |
There was a problem hiding this comment.
We realized that after disabling the browser autocomplete that changing button to li broke the keyboard navigation through the dropdown items but this was easily solved by changing this line to include li.
Add attributes to `input` element to disable browser autocomplete on autosuggest component and change the div that houses the dropdown items to be a `ul`, change the button elements that render the list to be `li`. add new `role` to each element
httpsmenahassan
force-pushed
the
Form.AutosuggestInput
branch
from
ffb32de
to
79f0cb4
Compare
|
@httpsmenahassan I know you've made changes (that, from what I can tell, look great!) since this PR was approved. This is good to go now right? |
|
@brian-smith-tcril yes! this PR is all set on my end. |
|
@adamstankiewicz it sounds like this one should be 100% good to go! |
|
🎉 This PR is included in version 21.1.3 🎉 The release is available on: Your semantic-release bot 📦🚀 |
|
🎉 This PR is included in version 22.0.0-alpha.6 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Add attributes to
inputelement to disable browser autocomplete on autosuggest component and change the div that houses the dropdown items to be aul, change the button elements that render the list to beli. add newroleto each elementDescription
Resolves #2435 and resolves #2557.
We had to make more changes than anticipated here given that we previously relied on the
buttonvalue attribute. After changing button elements toli, we realized thatli's value attribute is an integer value, which posed some problems.Note that this doesn't fix the issue where if you try to tab out while in the dropdown, the menu is still displayed. (#2437)
Deploy Preview
https://deploy-preview-2513--paragon-openedx.netlify.app/components/form/form-autosuggest/
Merge Checklist
wittjeffandadamstankiewiczas reviewers on this PR.Post-merge Checklist