[Bug][a11y]: Card component checkbox for selection has no accessibility name and is not keyboard accessible

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Card, Grid

Expected behavior

In a Card component, when the toggles boolean property is specified:

1. the checkbox that displays on hover must have an accessibility name.
2. the checkbox should be keyboard focusable

To fix these issues, remove tabIndex="-1" and include the header text as a hidden accessible name for the sp-checkbox at:

spectrum-web-components/packages/card/src/Card.ts

Lines 318 to 323 in e7d153e

	<sp-checkbox
	class="checkbox"
	@change=${this.handleSelectedChange}
	?checked=${this.selected}
	tabindex="-1"
	></sp-checkbox>

                          <sp-checkbox
                              class="checkbox"
                              @change=${this.handleSelectedChange}
                              ?checked=${this.selected}
                          >
                            <span class="sr-only">${this.heading}</span>
                          </sp-checkbox>

The .sr-only style, and a --mod-checkbox-text-to-control override to account for the fact that the text label is visually hidden, should be added to the card.css file:

.checkbox-toggle .checkbox {
    --mod-checkbox-text-to-control: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

At present, this is the only way to appropriately label a sp-checkbox.

3. Similarly, in the storybook examples using the Card with an action button, the action button should be keyboard focusable.

Again, we need to remove tabIndex="-1" from the sp-action-menu in Card rendering for the Storybook example:

spectrum-web-components/tools/grid/stories/grid.stories.ts

Lines 77 to 83 in e7d153e

	<sp-action-menu
	label="File actions"
	slot="actions"
	placement="bottom-end"
	quiet
	tabindex="-1"
	>

             <sp-action-menu 
                 label="File actions" 
                 slot="actions" 
                 placement="bottom-end" 
                 quiet 
             > 

Actual behavior

In a Card component, when the toggles boolean property is specified:

1. the checkbox that displays on hover or focus does not have an accessibility name.
2. the checkbox cannot receive focus with a keyboard
3. Similarly, in the storybook examples using the Card with an action button, the action button is not keyboard focusable.

Screenshots

No response

What browsers are you seeing the problem in?

Chrome, Firefox, Safari, Microsoft Edge

How can we reproduce this issue?

Sample code or abstract reproduction which illustrates the problem

No response

Severity

None

Logs taken while reproducing problem

No response