0

How can I nest an ion-button within a clickable ion-item? By this I mean legally (markup- and a11y-wise) and accessibly.

Use case

My use case is a list of items. Clicking an item navigates to a new page. Each item also has some action buttons to the side, visually within the item.

For example, rather like mobile Gmail's "star" button.

It needs to work sensibly on touch interfaces and with mice/trackpads, which mostly precludes Ionic's sliding items.

Some relevant GitHub issues regards ion-item-sliding:

If there is a different UI pattern that would work, I would be willing to look into/accept that instead of a solution to this exact question.

Investigations and potential solutions

The naive method is to simply nest them:

<ion-item
  button="true"
  detail="false"
  @click="parentClicked"
>
  <ion-label> An item </ion-label>

  <ion-button slot="end" @click="childClicked">
    <ion-label> Action </ion-label>
  </ion-button>
</ion-item>

This produces a button within a button, which is invalid HTML, bad for accessibility, and generally all-round bad.

Searching for this issue specifically (along the lines of the title) turns up results that suggest this naive nesting approach, so those have been no help.

A suggested solution I have found is to make the buttons siblings and use relative positioning to align the secondary button atop the primary button. However, that was for vanilla HTML and CSS; with Ionic, it will be fairly complex or brittle to use this approach: the Ionic styles would have to be duplicated to provide the correct alignment, at the least. Doable, but harder.

Is there any "good" method for this?

Potential alternatives

Add an "edit" button to the app's toolbar, which will toggle "edit" mode. When in edit mode, items will no longer be buttons themselves, and the action buttons on each will be shown.

This would of course only work for things like deleting and renaming; it simply wouldn't work for something like a "favorite" button or mobile Gmail's "star" button.

A variation of the above would be to add a checkbox to each item in the list when in edit mode; and instead of buttons on each item, have a single toolbar of action buttons.

This is inspired by Samsung Music: in the playlists view, long-pressing on a playlist turns the list into a checklist; clicking a playlist in this mode selects it instead of navigating; and a toolbar of actions is shown. Renaming is disabled if more than one playlist is selected.

Darryl Noakes
  • 2,207
  • 1
  • 9
  • 27
  • that will mess things up, and still its not a native thing so it needs work to be achieved, for such needs, you can use `https://ionicframework.com/docs/api/item-sliding` which can still give what ya need – Mostafa Harb Jul 13 '23 at 08:45
  • That does not appear to be usable on desktop, though, and I need something that is usable with a mouse as well as a touch interface. – Darryl Noakes Jul 13 '23 at 14:45
  • @MostafaHarb How would you approach this, UI-wise and implementation-wise? – Darryl Noakes Jul 13 '23 at 15:17
  • Relevant GitHub issues: [#22909 (bug: improve ion-item-sliding gesture on desktop with trackpad/mouse)](https://github.com/ionic-team/ionic-framework/issues/22909) and [#23155 (feat: improve performance when using ion-item-sliding)](https://github.com/ionic-team/ionic-framework/issues/23155). – Darryl Noakes Jul 13 '23 at 15:20
  • As you noted, nested interactive elements are invalid. It's undefined what should happen when you click on the nested element. Should only the nested element's click handler run? Or both the nested and parent's click handlers? It's a confusing interface which is why it's invalid HTML. Sibling elements are typically the best approach but without seeing your current design, it's hard to make a call. – slugolicious Jul 14 '23 at 00:30
  • I'll add a screenshot when I get a chance. But for example, something along the lines of mobile Gmail's "star" button. (I've updated the question with that example.) – Darryl Noakes Jul 14 '23 at 01:41
  • not sure if you have already tried it, but their are much example of usage in the page i added.. `https://ionicframework.com/docs/api/item-sliding#icon-options` and thats a specific one of them.. you can bind your click listener on ion-item-option and on ion-item in the example i added.. one more thing, use `(click)="childClicked()"` instead of `onclick="childClicked"` to add click listeners – Mostafa Harb Jul 15 '23 at 18:19
  • @MostafaHarb I was using `onclick` just for example purposes, to show where listeners are attached. In reality, I am using Vue and its `@click`. – Darryl Noakes Jul 15 '23 at 20:46
  • I know about sliding items, but they are demonstrably not desktop-friendly, aside from their performance issues. – Darryl Noakes Jul 15 '23 at 20:49
  • @MostafaHarb Any particular reason you put links as code instead of clickable links? – Darryl Noakes Jul 15 '23 at 20:50

0 Answers0