Instead of displaying contextual options in the message buttons popover
based on the message type, we instead abstract the logic behind the
scenes and instead just show the "Start new conversation" with the
relevant hotkey hint.
This also removes the `is_in_private_narrow` parameter which now serves
no purpose in the popover template, as we display the
"New direct message" option in all cases.
As part of the popover menu redesign, this redesigns the mobile message
buttons popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
This commit standardizes the naming of the day and night themes to light
and dark, respectively. This makes the codebase more consistent with
the naming used in the settings and the user interface.
Standardize theme selection across the web app by replacing separate
light/dark theme menu options being used in the spectator view with the
new 3-way theme switcher.
Fixes#30318.
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.
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.
This commit also sets all popover labels to flex grow into the remaining
available space. This allows us to align the unread counters, if any
to the rightmost corner of the menu option. This change, however, does
not lead to visual changes in any popover.
Fixes part of #28699.
This commit, adds the `.popover-menu-tab-group` class to the tab pickers
that appear together with the other popover menu options and thus
need to match their spacing and margins for a uniform look.
This removes the need to maintain a cluttered list of tab pickers that
need to be styled as such in the `popovers.css` file.
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.
Create has:reaction search operator and search suggestions.
Create sidebar view for the user to view their messages that
have reactions using has:reaction sender:me operators.
Add custom heading for the view and tooltip in the sidebar.
Add documentation for the new operator.
Fixes: #27328.
This commit updates the sidebar topic actions popover to use the new
sliding tab switcher for the topics visibility policy switcher.
This also includes changes such as hiding the popover only on
successful request completion, and adds error feedback by indicating
it via the sliding animation.
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="group"` to the topic visibility picker, identifying it as a
container for related menu items.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
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.
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.
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="group"` to the theme switcher, identifying it as a container
for related menu items.
- `role="none"` to `<li>` elements, removing the implied `listitem`
role that conflicts with the parent menu structure.
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.
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 f40855bad2.
We use "prop-element" class only to handle save-discard widget
and not anywhere else, so there is no need to have this class
for elements that do not use save-discard widget.
For more discoverability, the keyboard shortcuts for preview, and bold,
italic and link formatting are now displayed in the tooltips of those
compose buttons.
Updates the base hash for the streams setting overlay to be
"channels" instead of "streams".
Because there are Welcome Bot and Notification Bot messages that
would have been sent with the "/#streams" hash, we will need to
support parsing those overlay hashes as an alias for "/#channels"
permanently.
Part of the stream to channels rename project.
Updates a chunk of translated strings that overlap between files,
with the streams settings overlay being the starting point for
finding these strings, to use channel instead of stream.
Part of stream to channel rename project.
This fixes the bug where on hovering / selecting an emoji picker search
results emoji, invariably its canonical name would show / be used, which
is not always the same as the matching alias. For example, searching for
"swe" would show the "sweeping" emoji, but its canonical name is "broom"
which can be a confusing search result for "swe".