Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/templates/popovers/message_actions_popover.hbs

121 lines
6.7 KiB
Handlebars
Raw Normal View History

scroll: Set tabIndex to -1 for simplebar content wrapper. Fixes #30403. Having tabIndex set to 0 led to keyboard focus being put on a scrollbar container, which led to users having to tab twice to skip a container. This commit also removes instances of tabIndex being set to -1 programatically for certain cases, since it is -1 by default now. This commit also removes `outline: none` for simplebar since that property is not needed anymore because the wrapper is not focusable anymore.
2024-06-16 13:46:37 +02:00
<div class="popover-menu" id="message-actions-menu-dropdown" data-simplebar data-simplebar-tab-index="-1">
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
<ul role="menu" class="popover-menu-list">
{{!-- Group 1 --}}
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
{{#if should_display_quote_and_reply}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="respond_button popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-quote-and-reply" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Quote and reply" }}</span>
{{popover_hotkey_hints ">"}}
</a>
unread: Add UI support for marking messages as unread. Fixes #2676. Co-authored-by: Aman Agrawal <amanagr@zulip.com> Co-authored-by: Tim Abbott <tabbott@zulip.com>
2021-08-05 00:59:03 +02:00
</li>
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
{{/if}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
{{!-- Group 2 --}}
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
{{#if (or editability_menu_item move_message_menu_item should_display_delete_option)}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
<li role="separator" class="popover-menu-separator"></li>
{{/if}}
{{#if editability_menu_item}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="popover_edit_message popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i>
<span class="popover-menu-label">{{editability_menu_item}}</span>
{{popover_hotkey_hints "E"}}
</a>
</li>
{{/if}}
{{#if move_message_menu_item}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="popover_move_message popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-move-alt" aria-hidden="true"></i>
<span class="popover-menu-label">{{move_message_menu_item}}</span>
{{popover_hotkey_hints "M"}}
</a>
</li>
{{/if}}
{{#if should_display_delete_option}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="delete_message popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-trash" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Delete message" }}</span>
</a>
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
</li>
{{/if}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
{{!-- Group 3 --}}
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
{{#if should_display_add_reaction_option}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="reaction_button popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-smile" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Add emoji reaction" }}</span>
{{popover_hotkey_hints ":"}}
</a>
</li>
{{/if}}
{{!-- Group 4 --}}
{{#if (or should_display_mark_as_unread should_display_hide_option should_display_collapse should_display_uncollapse)}}
<li role="separator" class="popover-menu-separator"></li>
{{/if}}
{{#if should_display_mark_as_unread}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="mark_as_unread popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-mark-as-unread" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark as unread from here" }}</span>
{{popover_hotkey_hints "Shift" "U"}}
</a>
</li>
{{/if}}
{{#if should_display_hide_option}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="rehide_muted_user_message popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-hide" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Hide muted message again" }}</span>
</a>
</li>
{{/if}}
{{#if should_display_collapse}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-collapse" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Collapse message" }}</span>
{{popover_hotkey_hints "-"}}
</a>
</li>
{{/if}}
{{#if should_display_uncollapse}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-expand" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Expand message" }}</span>
{{popover_hotkey_hints "-"}}
</a>
</li>
{{/if}}
{{!-- Group 5 --}}
message_actions_popover: Hide extra separator in spectator view. In the spectator view, we are only left with the last few options belonging to the same group, and the separator is not needed.
2024-06-05 20:21:27 +02:00
<li role="separator" class="popover-menu-separator hidden-for-spectators"></li>
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
{{#if view_source_menu_item}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="popover_view_source popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-source" aria-hidden="true"></i>
<span class="popover-menu-label">{{view_source_menu_item}}</span>
{{popover_hotkey_hints "E"}}
</a>
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
</li>
{{/if}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
{{#if should_display_read_receipts_option}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" data-message-id="{{message_id}}" class="view_read_receipts popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-readreceipts" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "View read receipts" }}</span>
{{popover_hotkey_hints "Shift" "V"}}
</a>
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
</li>
{{/if}}
message_actions_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure. Also removes the unused `should_display_reminder_option` code, which should have been removed in f40855bad232efe506fe53a361bcb422d1089ba2.
2024-05-08 06:30:29 +02:00
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="copy_link navigate-link-on-enter popover-menu-link" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_url }}" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-link-alt" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Copy link to message" }}</span>
</a>
actions_popover: Use the new "popover-menu" theme. Fixes part of #28699.
2024-02-28 08:37:49 +01:00
</li>
</ul>
</div>