x-h-chip goes on a <button>, which leaves a dismissible chip as a button with another control inside it. A <button> may not contain interactive content, and the invalid markup has real consequences, since the close is a <span> carrying role="button" and a tab stop, so Tab reaches it while Enter and Space do nothing at all, leaving a keyboard or screen reader user able to reach the close and never dismiss the chip. Its click also has to be stopped from reaching the chip around it, and the chip's hover state has to exclude it selector by selector. Making the chip a plain container with a real x-h-chip-button and a <button x-h-chip-close> inside it takes keyboard operability, disabled and focus from the elements themselves, and leaves a label-only chip with no button at all.
x-h-chipgoes on a<button>, which leaves a dismissible chip as a button with another control inside it. A<button>may not contain interactive content, and the invalid markup has real consequences, since the close is a<span>carryingrole="button"and a tab stop, soTabreaches it whileEnterandSpacedo nothing at all, leaving a keyboard or screen reader user able to reach the close and never dismiss the chip. Its click also has to be stopped from reaching the chip around it, and the chip's hover state has to exclude it selector by selector. Making the chip a plain container with a realx-h-chip-buttonand a<button x-h-chip-close>inside it takes keyboard operability,disabledand focus from the elements themselves, and leaves a label-only chip with no button at all.