popovers: Add the missing aria-hidden attribute to popover icons.

Some of the popover icons were missing the aria-hidden attribute, which
caused them to be read out by screen readers.
This commit is contained in:
Sayam Samal 2024-05-28 14:19:31 +05:30 committed by Tim Abbott
parent 17424c5f14
commit ce1163ebe8
3 changed files with 15 additions and 15 deletions

View File

@ -9,18 +9,18 @@
<li role="none" class="popover-menu-list-item hidden-for-spectators"> <li role="none" class="popover-menu-list-item hidden-for-spectators">
<div role="group" class="tabs-container" aria-label="{{t 'Topic visibility' }}"> <div role="group" class="tabs-container" aria-label="{{t 'Topic visibility' }}">
<div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.MUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.MUTED}}" data-tippy-content="{{t 'Mute' }}" aria-label="{{t 'Mute' }}"> <div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.MUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.MUTED}}" data-tippy-content="{{t 'Mute' }}" aria-label="{{t 'Mute' }}">
<i class="zulip-icon zulip-icon-mute-new"></i> <i class="zulip-icon zulip-icon-mute-new" aria-hidden="true"></i>
</div> </div>
<div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.INHERIT}}" data-tippy-content="{{t 'Default' }}" aria-label="{{t 'Default' }}"> <div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.INHERIT}}" data-tippy-content="{{t 'Default' }}" aria-label="{{t 'Default' }}">
<i class="zulip-icon zulip-icon-inherit"></i> <i class="zulip-icon zulip-icon-inherit" aria-hidden="true"></i>
</div> </div>
{{#if (or stream_muted topic_unmuted)}} {{#if (or stream_muted topic_unmuted)}}
<div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" data-tippy-content="{{t 'Unmute' }}" aria-label="{{t 'Unmute' }}"> <div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" data-tippy-content="{{t 'Unmute' }}" aria-label="{{t 'Unmute' }}">
<i class="zulip-icon zulip-icon-unmute-new"></i> <i class="zulip-icon zulip-icon-unmute-new" aria-hidden="true"></i>
</div> </div>
{{/if}} {{/if}}
<div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" data-tippy-content="{{t 'Follow' }}" aria-label="{{t 'Follow' }}"> <div role="menuitemradio" class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" data-tippy-content="{{t 'Follow' }}" aria-label="{{t 'Follow' }}">
<i class="zulip-icon zulip-icon-follow"></i> <i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
</div> </div>
</div> </div>
</li> </li>

View File

@ -27,7 +27,7 @@
</li> </li>
<li role="none" class="link-item popover-menu-list-item" id="gear_menu_about_zulip"> <li role="none" class="link-item popover-menu-list-item" id="gear_menu_about_zulip">
<a role="menuitem" href="#about-zulip" class="navigate-link-on-enter popover-menu-link"> <a role="menuitem" href="#about-zulip" class="navigate-link-on-enter popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-info"></i> <i class="popover-menu-icon zulip-icon zulip-icon-info" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "About Zulip" }}</span> <span class="popover-menu-label">{{t "About Zulip" }}</span>
</a> </a>
</li> </li>

View File

@ -18,7 +18,7 @@
<ul role="menu" class="popover-menu-list"> <ul role="menu" class="popover-menu-list">
{{#if user_time}} {{#if user_time}}
<li role="none" class="text-item hidden-for-spectators popover-menu-list-item"> <li role="none" class="text-item hidden-for-spectators popover-menu-list-item">
<i class="popover-menu-icon zulip-icon zulip-icon-clock"></i> <i class="popover-menu-icon zulip-icon zulip-icon-clock" aria-hidden="true"></i>
{{#tr}}{user_time} local time{{/tr}} {{#tr}}{user_time} local time{{/tr}}
</li> </li>
<li role="separator" class="popover-menu-separator"></li> <li role="separator" class="popover-menu-separator"></li>
@ -44,20 +44,20 @@
</span> </span>
</span> </span>
<a role="menuitem" tabindex="0" class="personal-menu-clear-status popover-menu-link" aria-label="{{t 'Clear status'}}" data-tippy-content="{{t 'Clear your status' }}"> <a role="menuitem" tabindex="0" class="personal-menu-clear-status popover-menu-link" aria-label="{{t 'Clear status'}}" data-tippy-content="{{t 'Clear your status' }}">
<i class="personal-menu-clear-status-icon popover-menu-icon zulip-icon zulip-icon-x-circle"></i> <i class="personal-menu-clear-status-icon popover-menu-icon zulip-icon zulip-icon-x-circle" aria-hidden="true"></i>
</a> </a>
</li> </li>
{{!-- Group 1 --}} {{!-- Group 1 --}}
<li role="none" class="link-item popover-menu-list-item"> <li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" tabindex="0" class="update_status_text popover-menu-link"> <a role="menuitem" tabindex="0" class="update_status_text popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-smile-smaller"></i> <i class="popover-menu-icon zulip-icon zulip-icon-smile-smaller" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Edit status' }}</span> <span class="popover-menu-label">{{t 'Edit status' }}</span>
</a> </a>
</li> </li>
{{else}} {{else}}
<li role="none" class="link-item hidden-for-spectators popover-menu-list-item"> <li role="none" class="link-item hidden-for-spectators popover-menu-list-item">
<a role="menuitem" tabindex="0" class="update_status_text popover-menu-link"> <a role="menuitem" tabindex="0" class="update_status_text popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-smile-smaller"></i> <i class="popover-menu-icon zulip-icon zulip-icon-smile-smaller" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Set status' }}</span> <span class="popover-menu-label">{{t 'Set status' }}</span>
</a> </a>
</li> </li>
@ -65,14 +65,14 @@
{{#if invisible_mode}} {{#if invisible_mode}}
<li role="none" class="link-item hidden-for-spectators popover-menu-list-item"> <li role="none" class="link-item hidden-for-spectators popover-menu-list-item">
<a role="menuitem" tabindex="0" class="invisible_mode_turn_off popover-menu-link"> <a role="menuitem" tabindex="0" class="invisible_mode_turn_off popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-play-circle"></i> <i class="popover-menu-icon zulip-icon zulip-icon-play-circle" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Turn off invisible mode' }}</span> <span class="popover-menu-label">{{t 'Turn off invisible mode' }}</span>
</a> </a>
</li> </li>
{{else}} {{else}}
<li role="none" class="link-item hidden-for-spectators popover-menu-list-item"> <li role="none" class="link-item hidden-for-spectators popover-menu-list-item">
<a role="menuitem" tabindex="0" class="invisible_mode_turn_on popover-menu-link"> <a role="menuitem" tabindex="0" class="invisible_mode_turn_on popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-stop-circle"></i> <i class="popover-menu-icon zulip-icon zulip-icon-stop-circle" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Go invisible' }}</span> <span class="popover-menu-label">{{t 'Go invisible' }}</span>
</a> </a>
</li> </li>
@ -100,19 +100,19 @@
<li role="separator" class="popover-menu-separator"></li> <li role="separator" class="popover-menu-separator"></li>
<li role="none" class="link-item popover-menu-list-item"> <li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" href="#user/{{user_id}}" tabindex="0" class="view_full_user_profile popover-menu-link"> <a role="menuitem" href="#user/{{user_id}}" tabindex="0" class="view_full_user_profile popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-account"></i> <i class="popover-menu-icon zulip-icon zulip-icon-account" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'View your profile' }}</span> <span class="popover-menu-label">{{t 'View your profile' }}</span>
</a> </a>
</li> </li>
<li role="none" class="link-item popover-menu-list-item"> <li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" tabindex="0" class="narrow-self-direct-message popover-menu-link"> <a role="menuitem" tabindex="0" class="narrow-self-direct-message popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-users"></i> <i class="popover-menu-icon zulip-icon zulip-icon-users" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'View messages with yourself' }}</span> <span class="popover-menu-label">{{t 'View messages with yourself' }}</span>
</a> </a>
</li> </li>
<li role="none" class="link-item popover-menu-list-item"> <li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" tabindex="0" class="narrow-messages-sent popover-menu-link"> <a role="menuitem" tabindex="0" class="narrow-messages-sent popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-message-square"></i> <i class="popover-menu-icon zulip-icon zulip-icon-message-square" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'View messages sent' }}</span> <span class="popover-menu-label">{{t 'View messages sent' }}</span>
</a> </a>
</li> </li>
@ -120,7 +120,7 @@
<li role="separator" class="popover-menu-separator"></li> <li role="separator" class="popover-menu-separator"></li>
<li role="none" class="link-item popover-menu-list-item"> <li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" href="#settings/profile" class="open-profile-settings popover-menu-link"> <a role="menuitem" href="#settings/profile" class="open-profile-settings popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-tool"></i> <i class="popover-menu-icon zulip-icon zulip-icon-tool" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Settings' }}</span> <span class="popover-menu-label">{{t 'Settings' }}</span>
</a> </a>
</li> </li>