diff --git a/packages/visualizations/src/components/Table/Row.svelte b/packages/visualizations/src/components/Table/Row.svelte index 3f3fbb3b..978d8c24 100644 --- a/packages/visualizations/src/components/Table/Row.svelte +++ b/packages/visualizations/src/components/Table/Row.svelte @@ -29,11 +29,18 @@ }; - + {#if rows?.onClick} - {/if} @@ -64,20 +71,33 @@ display: flex; justify-content: center; align-items: center; - visibility: hidden; } - :global(.ods-dataviz--default) button:hover { - background-color: #e2e6ee; - cursor: pointer; + span { + width: 100%; + height: 100%; + } + + /* Hides visually but leaves it accessible by kb/sr */ + .visually-hidden:not(:focus):not(:active) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; } - :global(.ods-dataviz--default) button.visible { - visibility: visible; + :global(.ods-dataviz--default) button:hover, + :global(.ods-dataviz--default) button:focus { + background-color: #e2e6ee; + cursor: pointer; } :global(.ods-dataviz--default) .button-cell { padding: 0; padding-left: 6px; + width: 34px; }