Enhancement: calcite-tile - can't set focus on component

[AdelheidF]

Actual Behavior

As a keyboard user when tabbing through the UI it jumps over the calcite-tile component. It has an onClick action and I can't access it via keyboard navigation.

Focus jumps from the block header (Information) directly to the link (Manage layer properties).

Expected Behavior

I expect a focus box around the tile so I can hit enter to execute the onClick action.

[macandcheese]

I’m not sure having a calcite notice be a wholly clickable entity is intended. It can contain a slotted link, or the optional close button can be focused.

Thoughts here @bstifle ?

[AdelheidF]

I’m not sure having a calcite notice be a wholly clickable entity is intended. It can contain a slotted link, or the optional close button can be focused.

Ideally we'd like to have the close button be replaceable with another action, e.g. the info icon. If the focus goes there, then that's fine for calcite-notice. See https://github.com/Esri/calcite-components/issues/2144

[macandcheese]

Makes sense - there was a similar request for alert - attached a related comment to above issue - maybe that one is sufficient and this one can close?

[AdelheidF]

and this one can close?

Still valid for calcite-tile, I updated the description

[jcfranco]

@macandcheese Can you confirm if the tile should always be focusable, regardless of whether it has a link or not? Or is this specifically for the 'has link' case?

[macandcheese]

I don’t think it should be focusable without a link - there’s no possible interaction there AFAIK.

Cc @bstifle

[AdelheidF]

What if we wanted the entire tile clickable

[bstifle]

that is currently possible! @AdelheidF

[AdelheidF]

I don’t think it should be focusable without a link... What if we wanted the entire tile clickable... that is currently possible!

yes, but I can't set the focus on the tile. The focus jumps over the tile when using keyboard navigation. As a keyboard user I could never execute the click event on the tile because the tile never gets the focus.

[macandcheese]

I think the ask here is for a setFocus() method on calcite-tile @jcfranco @AdelheidF ?

[AdelheidF]

I think the ask here is for a setFocus() method on calcite-tile

I don't necessarily need to call setFocus(), but I want to be able to tab to a calcite-tile and hit enter/space to execute a click handler. Some keyboard users might want to tab to it to call the href.

Here is a sample. The first 2 tiles have an onclick and the bottom 2 tiles have an href. After the page loads the first button has the focus, now use your keyboard and hit the tab key. You can see it jumps right over the 2 tiles with the onclick (this is what I need, I need to have the focus on the tiles). I also noticed that a tab leaves the page completely with the href (I don't need this myself, just telling you). https://codepen.io/afreitag/pen/NWvMmee?editors=1000

FYI, calcite-notice has the same issue if there is no close icon.

[AdelheidF]

Closing this as I can use the added content-start and content-end slots with actions, so the focus goes there.

[jcfranco]

Reopening. Discussed with the team and we will be enhancing tile with a button mode to support the original use case of having an entire tile be clickable.

[ashetland]

@SkyeSeitz see @jcfranco's comment about a button mode for Tile.

[SkyeSeitz]

This enhancement for dev to add a button mode to non-selectable Tiles in the Tile Redesign Epic is noted in the Figma specs.

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[eriklharper]

This will be resolved as part of #6662

[geospatialem]

Closing per Erik's comment above in https://github.com/Esri/calcite-design-system/issues/2141#issuecomment-2018958031