Custom tooltip for ListItem drag handle

[annelfitz]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

We would like to be able to customize the drag handle tooltip in a calcite list item.

For example, in the Bookmarks widget, we were previously able to display a custom tooltip based on the bookmark title.

Now we are in the process of refactoring the Bookmarks widget to use calcite components, taking advantage of the List component, but we are unable to provide that same experience in the tooltip. This enhancement seems like it would greatly help people using screen readers as they may need more information to know what they are dragging. The custom tooltip allows us to provide that information, instead of just the default Drag handle which is what the tooltip currently says.

Acceptance Criteria

• Allow dragHandle tooltip to be customizable

Relevant Info

No response

Which Component

List Item

Example Use Case

https://zrh-app-sd-2.esri.com/arcgis-play/a/afitz_jsapi/bookmarks-calcite-refactor-2

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[annelfitz]

cc @driskull @geospatialem

[geospatialem]

This looks like a relatively low effort, to add the capability via the component's messageOverrides property.

@annelfitz We just had our translation deadline pass this week, if we aimed for completion shortly after 24.R1 next month, would that work with the Maps SDK timeline for 24.R2?

[annelfitz]

sure, sounds good to me. thanks @geospatialem !

[driskull]

What if we just update the message to be Move: {itemLabel} or Move or reorder: {itemLabel} or Reposition: {itemLabel}? Would that suffice?

Items can be dragged or moved via keyboard

[geospatialem]

What if we just update the message to be Move: {itemLabel} or Move or reorder: {itemLabel} or Reposition: {itemLabel}? Would that suffice?

Items can be dragged or moved via keyboard

Any of the above sound great - leaning towards Move or reorder: {itemLabel}, or similar.

@annelfitz Do the proposals above align with the goal?

[annelfitz]

Yes, sounds great! 💯

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 2.2.0-next.18 when calcite-list with drag-enabled:

The translations will be available as part of the February release, but will be available in English as part of tomorrow's 2.2.0 release.