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

32 lines
2.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 visibility-policy-popover" data-simplebar data-simplebar-tab-index="-1">
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
<ul role="menu" class="popover-menu-list">
<li role="none" class="popover-menu-list-item">
<div role="group" class="recipient-bar-topic-visibility-switcher tab-picker tab-picker-vertical" aria-label="{{t 'Topic visibility' }}">
<input type="radio" id="select-muted-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.MUTED}}" {{#if (eq visibility_policy all_visibility_policies.MUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-muted-policy" tabindex="0">
<i class="zulip-icon zulip-icon-mute-new" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Mute"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
<input type="radio" id="select-inherit-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.INHERIT}}" {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-inherit-policy" tabindex="0">
<i class="zulip-icon zulip-icon-inherit" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Default"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
{{#if (or stream_muted topic_unmuted)}}
<input type="radio" id="select-unmuted-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-unmuted-policy" tabindex="0">
<i class="zulip-icon zulip-icon-unmute-new" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Unmute"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
{{/if}}
<input type="radio" id="select-followed-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-followed-policy" tabindex="0">
<i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Follow"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
<span class="slider"></span>
</div>
</li>
</ul>
</div>