Data Table - checkbox focus state

[jnm2377]

Checkmarks within data table (that are not the select column) don't have consistent focus like the expandable and select buttons do.

Discussed in https://github.com/carbon-design-system/carbon/discussions/9799

^{Originally posted by **half5cat** October 5, 2021} Is this intentional? If so, please elaborate on this. Focus on Expandable Icon:  Focus on Checkbox:  Source for the above: https://react.carbondesignsystem.com/?path=/story/components-datatable-development--example Focus on Checkmark Column:  Source: https://react.carbondesignsystem.com/?path=/story/components-datatable--with-checkmark-columns

[jnm2377]

Question for @carbon-design-system/design, should the border radius match for these focus states in the data table?

[laurenmrice]

@jnm2377 The checkboxes in the data table should not have a border radius, they should be straight edges. We used to have a border radius on them but they use box-shadow which did not show up in HCM. We changed them back to be straight corners and to use outline instead. Ref: #6471 and #7620

---

Spec:

[jnm2377]

Thanks for the info @laurenmrice Looks like our DataTable didn't get that update and the checkbox focus is still rounded. So looks like the action items are:

• remove border radius from data table checkbox
• do we also remove the padding around the checkbox + focus border? Previously @aagonzales had us make the checkbox border bigger to match the size of the expand btn border.
• if the padding is still the way to go, then the last action item would be to make all checkboxes within data table have this, not just the select column (currently, checkboxes in other columns don't get this padding)

[laurenmrice]

@jnm2377 Yes, the focus for the chevron and the checkbox should be the same size with the padding Anna mentioned. All checkboxes in the data table should get this padding.

---