Accessible hiding CSS class is deviates from recommended approach

[mathalete]

The accessible hiding in Canvas Kit deviates from the industry accepted best practice class. https://github.com/Workday/canvas-kit/blob/master/modules/react/common/lib/styles/accessibleHide.ts

The Canvas Kit class includes 3 additional declarations.

margin: '-1px', padding: 0, border: 0,

I've not tested this augmentation with right to left languages, or across a range of screen reader / browsers, so was interested in why the additional declarations are included.

If this hasn't been robustly tested it is recommended to instead use the well researched original class as detailed here (https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/)

`.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}`

Thanks

[jpante]

@mathalete Is this something the team can validate if it's an issue? I'll leave this as open for now.

[vibdev]

padding and border 0 are needed otherwise <div style="{padding: 10px, border: 5px solid}"> is going to have a layout width of 31px instead of 1px. Same with margin you will want to null that out. Setting to -1px vs 0px I think is debatable and in fact here is a really long one:

h5bp/main.css#12

[alanbsmith]

Closing this. Rusty's answer makes sense. 👍🏻 Thanks!