feat: Add grey color for disabled selects during the form submission

[Lunyachek]

This is the copy of PR to master branch #715

Description

This cosmetic enhancement for payment form. After pressing "Place Order" button - we can see that all inputs became disabled, but selects - no. It looks not consistent and we decided to fix this small issue.

2023-03-06.11.53.26.mov

The result:

2023-03-02.14.43.17.mov

[openedx-webhooks]

Thanks for the pull request, @Lunyachek! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[e0d]

@Lunyachek there's a test failure, but it looks unrelated to this PR.

Found vulnerable allowlisted advisories: GHSA-pfrx-2q88-qq97, GHSA-44c6-4v22-4mhx.
Found vulnerable advisory paths:
Failed security audit due to critical, high, moderate vulnerabilities.
Vulnerable advisories are:
https://github.com/advisories/GHSA-h452-7996-h45h
https://github.com/advisories/GHSA-rc47-6667-2j5j
https://github.com/advisories/GHSA-9c47-m6qq-7p4h
https://github.com/advisories/GHSA-76p3-8jx3-jpfq
https://github.com/advisories/GHSA-3rfm-jhwj-7488
https://github.com/advisories/GHSA-hhq3-ff78-jv3g
https://github.com/advisories/GHSA-f8q6-p94x-37v3
Exiting...
GHSA-h452-7996-h45h|cookiejar
GHSA-rc47-6667-2j5j|@edx/frontend-build>image-webpack-loader>imagemin-webp>cwebp-bin>bin-build>download>got>cacheable-request>http-cache-semantics
GHSA-rc47-6667-2j5j|imagemin-gifsicle>gifsicle>bin-build>download>got>>cacheable-request>http-cache-semantics
GHSA-rc47-6667-2j5j|imagemin-mozjpeg>mozjpeg>bin-build>download>got>>cacheable-request>http-cache-semantics
GHSA-rc47-6667-2j5j|imagemin-optipng>optipng-bin>bin-build>download>got>cacheable-request>http-cache-semantics
GHSA-rc47-6667-2j5j|imagemin-pngquant>pngquant-bin>bin-build>download>got>>cacheable-request>http-cache-semantics
GHSA-rc47-6667-2j5j|bin-wrapper>download>got>>cacheable-request>http-cache-semantics
GHSA-9c47-m6qq-7p4h|json5
GHSA-76p3-8jx3-jpfq|loader-utils
GHSA-3rfm-jhwj-[748](https://github.com/openedx/frontend-app-payment/actions/runs/4343398669/jobs/7612802992#step:10:749)8|loader-utils
GHSA-hhq3-ff78-jv3g|loader-utils
GHSA-f8q6-p94x-37v3|recursive-readdir>minimatch
Error: Process completed with exit code 1.

[e0d]

@revenue-squad this is an interesting case where CI is blocking the PR on security items that don't exist on master, but haven't been back-ported to the named release branch.

In discussing this with my team we thought maintainers should probably be the ones to backport the security issues in cases like this. This repo isn't formally maintained, however. Thoughts on the best approach?

[wittjeff]

@Lunyachek @e0d Greying-out of disabled items is appropriate UI but not something I caught because I assumed the page was short-lived at that point. No objection to doing so for a11y. But if we do that, I suggest using the Paragon colors for disabled items (which, oddly enough, are explicitly low-contrast); #ebebeb is 1.19:1 luminance contrast, which is in the right range. However, generally best to use the appropriate design tokens rather than magic color numbers. Paragon colors are here: https://github.com/openedx/paragon/blob/master/scss/core/_variables.scss

[e0d]

@mphilbrick211 these tests currently can't pass unless we pull in some library upgrades from master, @pshiu was going to bring this topic up with the internal working group at 2U for their thoughts and then we can coordinate with BTR.

[mphilbrick211]

@mphilbrick211 these tests currently can't pass unless we pull in some library upgrades from master, @pshiu was going to bring this topic up with the internal working group at 2U for their thoughts and then we can coordinate with BTR.

Hi @pshiu any update on this?

[pshiu]

@mphilbrick211, I think we need to separate the remediation of the security vulnerability from this PR.

@Lunyachek, I believe I do not have permissions to push to your fork, so could you please run npm audit and add all vulnerabilities to the audit-ci.json file in the release branch please?

[mphilbrick211]

@mphilbrick211, I think we need to separate the remediation of the security vulnerability from this PR.

@Lunyachek, I believe I do not have permissions to push to your fork, so could you please run npm audit and add all vulnerabilities to the audit-ci.json file in the release branch please?

Hi @Lunyachek - friendly ping on this :)

[mphilbrick211]

Hi @Lunyachek - just checking in to see if you plan to pursue this pull request? If not, we will need to close it do to inactivity. Please let us know. Thanks!

[mphilbrick211]

Hi @Lunyachek - just checking in to see if you plan to pursue this pull request? If not, we will need to close it do to inactivity. Please let us know. Thanks!

Hi @Lunyachek - final check in on this!

CC @mariajgrimaldi - are we still planning to pursue this?

[mphilbrick211]

Hi @mariajgrimaldi - do you think this is OK to close? I've marked it as inactive. We can reopen if author chooses to pursue.

CC: @Lunyachek

[mphilbrick211]

Hi @mariajgrimaldi - just checking on this.

[mariajgrimaldi]

@mphilbrick211: yes, I agree. Thanks for the ping!

[openedx-webhooks]

@Lunyachek Even though your pull request wasn’t merged, please take a moment to answer a two question survey so we can improve your experience in the future.