tooltips: Use <div> tags inside tooltip's inner content.

By replacing `<span>` tags with `<div>` tags inside the tooltip's inner
content we remove the redundancy of having to use break tags to
separate the tooltip's title and it's content.

We also replace any `<p>` tags with `<div>` tags for the following
reasons:

- Since what we want to achieve are just block elements in order to
avoid the break tags, using `<div>` tags provide use with a wider
scope of use cases.

- We don't want the pause, screen readers often introduce after reading
the contents of a paragraph.

- The `<p>` tag cannot contain tables and other block-level elements.

- The semantic meaning of the <p> tag doesn't apply to the commonly
used tooltip content.
This commit is contained in:
Sayam Samal 2023-10-02 04:29:35 +05:30 committed by Tim Abbott
parent 456f3a0d94
commit 8d3f2baebf
7 changed files with 13 additions and 22 deletions

View File

@ -83,13 +83,6 @@
opacity: 1;
}
.narrow_to_compose_recipient_current_view_help {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compose_table {
height: 100%;
display: flex;

View File

@ -1,14 +1,14 @@
<div class="buddy_list_tooltip_content">
<span>
<div>
{{first_line}}
{{#if show_you}}
<span class="my_user_status">{{t "(you)" }}</span>
{{/if}}
</span>
</div>
{{#if second_line}}
<br /><span class="tooltip-inner-content">{{second_line}}</span>
<div class="tooltip-inner-content">{{second_line}}</div>
{{/if}}
{{#if third_line}}
<br /><span class="tooltip-inner-content">{{third_line}}</span>
<div class="tooltip-inner-content">{{third_line}}</div>
{{/if}}
</div>

View File

@ -1,5 +1,4 @@
<div id="change_visibility_policy_button_tooltip">
<strong>{{current_visibility_policy_str}}</strong>
<br/>
<span class="tooltip-inner-content italic">{{t 'Click to change notifications for this topic.' }}</span>
<div class="tooltip-inner-content italic">{{t 'Click to change notifications for this topic.' }}</div>
</div>

View File

@ -1,6 +1,6 @@
<div>
<div>{{edited_notice_str}}</div>
{{#if realm_allow_edit_history}}
<i>{{t 'Click to view edit history.' }}</i>
<div class="tooltip-inner-content italic">{{t 'Click to view edit history.' }}</div>
{{/if}}
</div>

View File

@ -1,5 +1,4 @@
<div id="message_inline_image_tooltip">
<strong>{{ title }}</strong>
<br/>
<span class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</span>
<div class="tooltip-inner-content italic">{{t 'Click to view or download.'}}</div>
</div>

View File

@ -1,7 +1,7 @@
<div>
<span>{{t 'Go to conversation' }}</span>
<div>{{t "Go to conversation"}}</div>
{{#if display_current_view}}
<p class="narrow_to_compose_recipient_current_view_help tooltip-inner-content italic">{{display_current_view}}</p>
<div class="tooltip-inner-content italic">{{display_current_view}}</div>
{{/if}}
</div>
{{tooltip_hotkey_hints "Ctrl" "."}}

View File

@ -55,8 +55,8 @@
</template>
<template id="add-global-time-tooltip">
<div>
<span>{{t "Add global time" }}</span><br/>
<span class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</span>
<div>{{t "Add global time" }}</div>
<div class="tooltip-inner-content italic">{{t "Everyone sees global times in their own time zone." }}</div>
</div>
</template>
<template id="delete-draft-tooltip-template">
@ -124,11 +124,11 @@
{{tooltip_hotkey_hints "I"}}
</template>
<template id="star-message-tooltip-template">
<span class="starred-status">{{t "Star this message" }}</span>
<div class="starred-status">{{t "Star this message" }}</div>
{{tooltip_hotkey_hints "Ctrl" "S"}}
</template>
<template id="unstar-message-tooltip-template">
<span class="starred-status">{{t "Unstar this message" }}</span>
<div class="starred-status">{{t "Unstar this message" }}</div>
{{tooltip_hotkey_hints "Ctrl" "S"}}
</template>
<template id="search-query-tooltip-template">