Improve settings tooltip accessibility

[thatrobotdev]

Did you read the troubleshooting guide
Yes

Describe the bug
In the settings dialog, the information mark that displays the description for each menu item (added in #2298, feature #2240 cc @Sheepux) is inaccessible to assistive technologies, touch only devices, keyboard only users, people experiencing fine motor control impairment, people with cognitive concerns, etc.

To Reproduce
Steps to reproduce the behavior:

1. Click the hamburger (triple bar) button in the top left of the HakuNeko interface.
2. Next to any menu item in the "Settings" section, click on the information mark button.
3. Nothing appears on click or will appear if you wait, hovering. (bug)
4. Hover over tooltip to show item description in tooltip box (current implementation)

Expected behavior
At first I thought the intended behavior of only showing the item description on hover was a UX bug, as I thought the tooltip would act like a toggletip (toggletips display form descriptions on click instead of on hover). It took me a good minute to realize that I needed to hover instead of click on the tooltip to see the item description, and clicking in my browser's implementation on the tooltip would actually hide the item description indefinitely!

There are two behaviors I can think of that would be better than the current implementation,

1. Don't use a tooltip/toggletip for the settings menu, and just provide item descriptions inline. I know that this would use up a lot of space though, so this might not be the best option in this case.
2. Create a toggletip that would show the item description on click in a cute little HakuNeko theme supporting styled box.

Screenshots

This is the tooltip box in the Settings menu.

The current implementation of the tooltip box.

Context (please complete the following information):

• OS: macOS 13.0.1
• HakuNeko Version 6.17

Additional context
Relevant lines of code

hakuneko/src/web/lib/hakuneko/frontend@classic-light/menu.html

Lines 197 to 206 in 99f9e91

	<template is="dom-repeat" items="[[ item.settings ]]">
	<tr>
	<td width="1">
	<label title="[[ item.description ]]"><i class="fas fa-fw fa-info-circle"></i> [[ item.label ]]</label>
	</td>
	<td>
	<hakuneko-input item="{{ item }}"></hakuneko-input>
	</td>
	</tr>
	</template>

Tooltip code for light theme.

hakuneko/src/web/lib/hakuneko/frontend@classic-dark/menu.html

Lines 197 to 206 in 99f9e91

	<template is="dom-repeat" items="[[ item.settings ]]">
	<tr>
	<td width="1">
	<label title="[[ item.description ]]"><i class="fas fa-fw fa-info-circle"></i> [[ item.label ]] </label>
	</td>
	<td>
	<hakuneko-input item="{{ item }}"></hakuneko-input>
	</td>
	</tr>
	</template>

Tooltip code for dark theme.

---

I would love to help work on this! :)

[MikeZeDev]

That is definitely something to be considered. That said i have no idea about how haku interface works, and the people who knows are busy working on haruneko. If its not solved in Haku at least it should be considered in Haru.

[Sheepux]

It's "solved" (please test) in haruneko using IBM tooltips (it's a toggle)
see interface preview here https://haruneko.pages.dev/ (or start it from the github https://github.com/manga-download/haruneko )

Yes i have a11y (accessibility) & ARIA in mind for haru but as i have to learn/think from scratch there is currently too much for me on my little time (i'm not a dev :P)

Settings display are managed like this:
https://github.com/manga-download/haruneko/blob/master/web/src/frontend/classic/components/settings/InputChoice.svelte

<SettingItem
    labelText={$Locale[setting.Label]()}
    helperText={$Locale[setting.Description]()}
>
    <Select
        selected={value}
        on:update={(evt) => (setting.Value = evt.detail.toString())}
    >
        {#each setting.Options as option}
            <SelectItem value={option.key} text={$Locale[option.label]()} />
        {/each}
    </Select>
</SettingItem>

Setting item is here https://github.com/manga-download/haruneko/blob/master/web/src/frontend/classic/components/settings/SettingItem.svelte
and is using carbon's tooltip just before the slot (the input previously described) https://carbon-components-svelte.onrender.com/components/Tooltip

<div class={`menu-left-panel-${type}-container`}>
    {#if type === 'item'}
        <Tooltip triggerText={labelText} align="start">
            <p>{helperText}</p>
        </Tooltip>
    {/if}

    <slot />
</div>

keyboard navigation is requested in #2009 and is tracked in haruneko in manga-download/haruneko#40

If you want to help you can join the herd of the "frontenders" (i'd be glad to have some help), i'm now using svelte for the frontend in haruneko's rewrite from scratch (ongoing for 2 years)

[thatrobotdev]

Thanks for your reply, harukenko looks great! I'll definitely be following the other frontend work there!

I noticed there are some situations where tooltips display cut off.

For example, the last tooltip in the "General" and "Style" panels both get cut-off by the bottom of the window, and creates new space for the tooltip that you need to scroll down to read the entire tooltip. Sometimes the tooltip will open instantaneously then close, but I couldn't figure out how it chooses between making more space and just closing it instantaneously.

In this quick settings panel, every tooltip is cut off by the end of the window.

It looks like as a limitation of the current implementation of the tooltip in the IBM library, we would need to manually change the direction of certain tooltips to avoid this (carbon-design-system/carbon-components-svelte#623). I haven't used that much svelte before, so I'm not sure what the best way to implement an override on these components would be, but it could be a good workaround.

[Sheepux]

the last tooltips isn't cut but it has extra spacing at the end of the document (normal behavior), you can see the scrollbar.
I guess i should set directions on the right side in the global settings and on the left side in the right pannel settings