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.

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

Field comp stops using div element inside the label #2166

Merged
merged 1 commit into from
May 16, 2023

Conversation

sponglord
Copy link
Contributor

Summary

The a11y audit gives errors about placing divs inside label elements.

It seems that the HTML spec says that a div cannot go inside a label (which will only accept "Phrasing content").

Doing so cause automated HTML validators, such as https://validator.w3.org/nu/, to throw errors.

This PR fixes this, for most cases* by using a span element instead of the div.

*However components that feature select/dropdown elements e.g. issuerLists, or Address comps with country selectors, will still contain divs (since that is how the dropdowns are built). This will need to be addressed in a future PR

Tested scenarios

Components without dropdowns no longer have a div inside their label element

Fixed issue: partially fixes a11y issue with instanceID=2047874661

@github-actions
Copy link
Contributor

Size Change: -7 B (0%)

Total Size: 1.03 MB

Filename Size Change
packages/lib/dist/adyen.js 273 kB -2 B (0%)
packages/lib/dist/cjs/index.js 234 kB -2 B (0%)
packages/lib/dist/es.modern/index.js 114 kB -1 B (0%)
packages/lib/dist/es/index.js 132 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
packages/lib/dist/es.modern/ar.js 6.17 kB
packages/lib/dist/es.modern/cs-CZ.js 5.59 kB
packages/lib/dist/es.modern/da-DK.js 5.06 kB
packages/lib/dist/es.modern/de-DE.js 5.47 kB
packages/lib/dist/es.modern/el-GR.js 7 kB
packages/lib/dist/es.modern/es-ES.js 5.15 kB
packages/lib/dist/es.modern/fi-FI.js 5.16 kB
packages/lib/dist/es.modern/fr-FR.js 5.26 kB
packages/lib/dist/es.modern/hr-HR.js 5.29 kB
packages/lib/dist/es.modern/hu-HU.js 5.55 kB
packages/lib/dist/es.modern/it-IT.js 5.14 kB
packages/lib/dist/es.modern/ja-JP.js 5.96 kB
packages/lib/dist/es.modern/ko-KR.js 5.59 kB
packages/lib/dist/es.modern/nl-NL.js 5.19 kB
packages/lib/dist/es.modern/no-NO.js 5.07 kB
packages/lib/dist/es.modern/pl-PL.js 5.55 kB
packages/lib/dist/es.modern/pt-BR.js 5.13 kB
packages/lib/dist/es.modern/pt-PT.js 5.25 kB
packages/lib/dist/es.modern/ro-RO.js 5.34 kB
packages/lib/dist/es.modern/ru-RU.js 6.5 kB
packages/lib/dist/es.modern/sk-SK.js 5.65 kB
packages/lib/dist/es.modern/sl-SI.js 5.22 kB
packages/lib/dist/es.modern/sv-SE.js 5.03 kB
packages/lib/dist/es.modern/zh-CN.js 5.41 kB
packages/lib/dist/es.modern/zh-TW.js 5.53 kB
packages/lib/dist/es/ar.js 6.17 kB
packages/lib/dist/es/cs-CZ.js 5.59 kB
packages/lib/dist/es/da-DK.js 5.06 kB
packages/lib/dist/es/de-DE.js 5.47 kB
packages/lib/dist/es/el-GR.js 7 kB
packages/lib/dist/es/es-ES.js 5.15 kB
packages/lib/dist/es/fi-FI.js 5.16 kB
packages/lib/dist/es/fr-FR.js 5.26 kB
packages/lib/dist/es/hr-HR.js 5.29 kB
packages/lib/dist/es/hu-HU.js 5.55 kB
packages/lib/dist/es/it-IT.js 5.14 kB
packages/lib/dist/es/ja-JP.js 5.96 kB
packages/lib/dist/es/ko-KR.js 5.59 kB
packages/lib/dist/es/nl-NL.js 5.19 kB
packages/lib/dist/es/no-NO.js 5.07 kB
packages/lib/dist/es/pl-PL.js 5.55 kB
packages/lib/dist/es/pt-BR.js 5.13 kB
packages/lib/dist/es/pt-PT.js 5.25 kB
packages/lib/dist/es/ro-RO.js 5.34 kB
packages/lib/dist/es/ru-RU.js 6.5 kB
packages/lib/dist/es/sk-SK.js 5.65 kB
packages/lib/dist/es/sl-SI.js 5.22 kB
packages/lib/dist/es/sv-SE.js 5.03 kB
packages/lib/dist/es/zh-CN.js 5.41 kB
packages/lib/dist/es/zh-TW.js 5.53 kB

compressed-size-action

@sonarcloud
Copy link

sonarcloud bot commented May 16, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@sponglord sponglord merged commit c82141f into master May 16, 2023
@sponglord sponglord deleted the fix/Field_comp_stops_using_div_in_label branch May 16, 2023 14:54
@m1aw m1aw mentioned this pull request May 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants