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; opacity: 1;
} }
.narrow_to_compose_recipient_current_view_help {
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.compose_table { .compose_table {
height: 100%; height: 100%;
display: flex; display: flex;

View File

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

View File

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

View File

@@ -1,6 +1,6 @@
<div> <div>
<div>{{edited_notice_str}}</div> <div>{{edited_notice_str}}</div>
{{#if realm_allow_edit_history}} {{#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}} {{/if}}
</div> </div>

View File

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

View File

@@ -1,7 +1,7 @@
<div> <div>
<span>{{t 'Go to conversation' }}</span> <div>{{t "Go to conversation"}}</div>
{{#if display_current_view}} {{#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}} {{/if}}
</div> </div>
{{tooltip_hotkey_hints "Ctrl" "."}} {{tooltip_hotkey_hints "Ctrl" "."}}

View File

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