Description
The CountrySelector button renders a div element inside a button element. According to the W3C HTML5 specification, a <button> can only contain "phrasing content" (like <span> or <img>), and a <div> is "flow content", which is not allowed.
This causes validation errors in the W3C Nu HTML Checker.
Error Message
Element div not allowed as child of element button in this context.
Source Code Location
The issue is located in the CountrySelector component where the button content is wrapped in:
<div class="react-international-phone-country-selector-button__button-content">
Suggested Fix
Change the div to a span in the button content wrapper. Since it's a styling wrapper, a span with display: flex or display: block will work identically without violating HTML semantics.
Environment
Description
The
CountrySelectorbutton renders adivelement inside abuttonelement. According to the W3C HTML5 specification, a<button>can only contain "phrasing content" (like<span>or<img>), and a<div>is "flow content", which is not allowed.This causes validation errors in the W3C Nu HTML Checker.
Error Message
Source Code Location
The issue is located in the
CountrySelectorcomponent where the button content is wrapped in:<div class="react-international-phone-country-selector-button__button-content">Suggested Fix
Change the
divto aspanin the button content wrapper. Since it's a styling wrapper, aspanwithdisplay: flexordisplay: blockwill work identically without violating HTML semantics.Environment