video-conference:add tooltips to tab sliders
TabSliderButton's take a label and tooltip text. The tooltip text is optional. If it's empty, use the label as the tooltip text base. Because TabSliderButton's have state, append the state to the tooltip text. Make it standard across all SliderButtons by implementing this on the base class. Also, remove calls to SetAccessibleName to ensure that the views::Button impl of SetTooltipText also sets a matching accessible name. Finally, update the focus behavior of the header text that houses the sliders in the VCControls Bubble, and update the VC Controls string formatting in ash_strings.grd Bug: 253646076 Change-Id: Id6da3fca1a474724c89908947e25108d86b8af78 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4457398 Commit-Queue: Alex Newcomer <newcomer@chromium.org> Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com> Reviewed-by: Andre Le <leandre@chromium.org> Reviewed-by: Xiaodan Zhu <zxdan@chromium.org> Cr-Commit-Position: refs/heads/main@{#1135605}
This commit is contained in:
Alex Newcomer
committed by
Chromium LUCI CQ
Chromium LUCI CQ
parent
464cb044f6
commit
5076ddc332
ash
@ -1481,33 +1481,33 @@ Style notes:
|
||||
</message>
|
||||
|
||||
<!-- Video Conference tray -->
|
||||
<message name="IDS_ASH_VIDEO_CONFERENCE_TOGGLE_BUBBLE_BUTTON_TOOLTIP" desc="The tooltip for the toggle bubble button in the video conference tray.">
|
||||
<message name="IDS_ASH_VIDEO_CONFERENCE_TOGGLE_BUBBLE_BUTTON_TOOLTIP" desc="The tooltip for the toggle bubble button in the video conference tray.">
|
||||
Camera and audio controls
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TOOLTIP" desc="Tooltip shown for the toggle buttons shown in the shelf tray. There is a different toggle button for each (Microphone, Camera, Screen Capture). If the button is toggled on, it may also be in-use.">
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TOOLTIP" desc="Tooltip shown for the toggle buttons shown in the shelf tray. There is a different toggle button for each (Microphone, Camera, Screen Capture). If the button is toggled on, it may also be in-use.">
|
||||
Toggle <ph name="CAPTURE_MEDIUM">$1<ex>Camera</ex></ph>. <ph name="CAPTURE_MEDIUM">$1<ex>Camera</ex></ph> is <ph name="CAPTURE_STATE">$2<ex>on and in use</ex></ph>
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_ONE_WAY_TOGGLE_BUTTON_TOOLTIP" desc="Tooltip shown for a toggle button in the shelf tray which is 'one way', which means that activating the button only turns the behavior off and it cannot be turned back on.">
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_ONE_WAY_TOGGLE_BUTTON_TOOLTIP" desc="Tooltip shown for a toggle button in the shelf tray which is 'one way', which means that activating the button only turns the behavior off and it cannot be turned back on.">
|
||||
Stop <ph name="CAPTURE_MEDIUM">$1<ex>Camera</ex></ph>. <ph name="CAPTURE_MEDIUM">$1<ex>Camera</ex></ph> is <ph name="CAPTURE_STATE">$2<ex>on and in use</ex></ph>
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TYPE_CAMERA" desc="The portion of the tooltip for the camera toggle button.">
|
||||
Camera
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TYPE_MICROPHONE" desc="The portion of the tooltip for the microphone toggle button.">
|
||||
Microphone
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TYPE_SCREEN_SHARE" desc="The portion of the tooltip for the screen capture toggle button.">
|
||||
Screen Share
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_STATE_ON" desc="The state of the toggle button when the toggle is on but not capturing.">
|
||||
on
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_STATE_ON_AND_IN_USE" desc="The state of the toggle button when the toggle is on and capturing.">
|
||||
on and in use
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_STATE_OFF" desc="The state of the toggle button when the toggle is muting.">
|
||||
off
|
||||
</message>
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TYPE_CAMERA" desc="The portion of the tooltip for the camera toggle button.">
|
||||
Camera
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TYPE_MICROPHONE" desc="The portion of the tooltip for the microphone toggle button.">
|
||||
Microphone
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_TYPE_SCREEN_SHARE" desc="The portion of the tooltip for the screen capture toggle button.">
|
||||
Screen Share
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_STATE_ON" desc="The state of the toggle button when the toggle is on but not capturing.">
|
||||
on
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_STATE_ON_AND_IN_USE" desc="The state of the toggle button when the toggle is on and capturing.">
|
||||
on and in use
|
||||
</message>
|
||||
<message name="VIDEO_CONFERENCE_TOGGLE_BUTTON_STATE_OFF" desc="The state of the toggle button when the toggle is muting.">
|
||||
off
|
||||
</message>
|
||||
<!-- Video Conference bubble -->
|
||||
<message name="IDS_ASH_VIDEO_CONFERENCE_RETURN_TO_APP_SUMMARY_TEXT" desc="The summary text in the return to app panel of the video conference panel, specifying how many video conferencing apps are in used.">
|
||||
Used by <ph name="APP_COUNT">$1<ex>2</ex></ph> apps
|
||||
@ -4457,6 +4457,14 @@ Connect your device to power.
|
||||
Connecting <ph name="NAME">$1<ex>Pixel Buds</ex></ph>
|
||||
</message>
|
||||
|
||||
<!-- Tab Slider Strings -->
|
||||
<message name="TAB_SLIDER_BUTTON_STATE_SELECTED" desc="The state of a single button in a tab slider, which is a group of 2-3 buttons, when that button is activated and the associated behavior is turned on.">
|
||||
<ph name="BUTTON_LABEL">$1<ex>Medium</ex></ph>, selected
|
||||
</message>
|
||||
<message name="TAB_SLIDER_BUTTON_STATE_NOT_SELECTED" desc="The state of a single button in a tab slider, which is a group of 2-3 buttons, when that button is not activated and the associated behavior is turned off.">
|
||||
<ph name="BUTTON_LABEL">$1<ex>Medium</ex></ph>, not selected
|
||||
</message>
|
||||
|
||||
<!-- In-session auth dialog strings -->
|
||||
<message name="IDS_ASH_IN_SESSION_AUTH_TITLE" desc="Text shown in the auth dialog to indicate authentication is needed.">
|
||||
Verify your identity
|
||||
|
||||
@ -0,0 +1 @@
|
||||
c8c1208cf424d860383a070b20addf489f46199a
|
||||
@ -0,0 +1 @@
|
||||
328e12585bd72ea0ab018c6991196dd1be9006b3
|
||||
@ -5,8 +5,10 @@
|
||||
#include "ash/style/tab_slider_button.h"
|
||||
|
||||
#include "ash/resources/vector_icons/vector_icons.h"
|
||||
#include "ash/strings/grit/ash_strings.h"
|
||||
#include "ash/style/color_util.h"
|
||||
#include "ash/style/style_util.h"
|
||||
#include "ui/base/l10n/l10n_util.h"
|
||||
#include "ui/base/metadata/metadata_impl_macros.h"
|
||||
#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
|
||||
#include "ui/compositor/layer.h"
|
||||
@ -55,8 +57,10 @@ constexpr int kIconLabelSliderBetweenButtonsSpacing = 0;
|
||||
//------------------------------------------------------------------------------
|
||||
// TabSliderButton:
|
||||
|
||||
TabSliderButton::TabSliderButton(PressedCallback callback)
|
||||
: views::Button(std::move(callback)) {
|
||||
TabSliderButton::TabSliderButton(PressedCallback callback,
|
||||
const std::u16string& tooltip_text_base)
|
||||
: views::Button(std::move(callback)),
|
||||
tooltip_text_base_(tooltip_text_base) {
|
||||
SetPaintToLayer();
|
||||
layer()->SetFillsBoundsOpaquely(false);
|
||||
|
||||
@ -72,6 +76,8 @@ TabSliderButton::TabSliderButton(PressedCallback callback)
|
||||
// Set the highlight path to `kHighlightPathGeneratorKey` property for the ink
|
||||
// drop to use.
|
||||
views::InstallPillHighlightPathGenerator(this);
|
||||
|
||||
UpdateTooltipAndAccessibleName();
|
||||
}
|
||||
|
||||
TabSliderButton::~TabSliderButton() = default;
|
||||
@ -92,6 +98,7 @@ void TabSliderButton::SetSelected(bool selected) {
|
||||
}
|
||||
|
||||
OnSelectedChanged();
|
||||
UpdateTooltipAndAccessibleName();
|
||||
}
|
||||
|
||||
SkColor TabSliderButton::GetColorIdOnButtonState() {
|
||||
@ -112,6 +119,13 @@ TabSliderButton::GetRecommendedSliderLayout() const {
|
||||
return absl::nullopt;
|
||||
}
|
||||
|
||||
void TabSliderButton::UpdateTooltipAndAccessibleName() {
|
||||
SetTooltipText(l10n_util::GetStringFUTF16(
|
||||
selected_ ? TAB_SLIDER_BUTTON_STATE_SELECTED
|
||||
: TAB_SLIDER_BUTTON_STATE_NOT_SELECTED,
|
||||
tooltip_text_base_));
|
||||
}
|
||||
|
||||
BEGIN_METADATA(TabSliderButton, views::Button)
|
||||
END_METADATA
|
||||
|
||||
@ -120,10 +134,9 @@ END_METADATA
|
||||
|
||||
IconSliderButton::IconSliderButton(PressedCallback callback,
|
||||
const gfx::VectorIcon* icon,
|
||||
const std::u16string& tooltip_text)
|
||||
: TabSliderButton(std::move(callback)), icon_(icon) {
|
||||
const std::u16string& tooltip_text_base)
|
||||
: TabSliderButton(std::move(callback), tooltip_text_base), icon_(icon) {
|
||||
SetPreferredSize(gfx::Size(kIconButtonSize, kIconButtonSize));
|
||||
SetTooltipText(tooltip_text);
|
||||
|
||||
// Replace the pill shaped highlight path of focus ring with a circle shaped
|
||||
// highlight path.
|
||||
@ -172,13 +185,11 @@ END_METADATA
|
||||
|
||||
LabelSliderButton::LabelSliderButton(PressedCallback callback,
|
||||
const std::u16string& text,
|
||||
const std::u16string& tooltip_text)
|
||||
: TabSliderButton(std::move(callback)),
|
||||
const std::u16string& tooltip_text_base)
|
||||
: TabSliderButton(std::move(callback), tooltip_text_base),
|
||||
label_(AddChildView(std::make_unique<views::Label>(text))) {
|
||||
SetBorder(views::CreateEmptyBorder(kLabelButtonBorderInsets));
|
||||
SetUseDefaultFillLayout(true);
|
||||
SetTooltipText(tooltip_text);
|
||||
SetAccessibleName(text);
|
||||
// Force the label to use requested colors.
|
||||
label_->SetAutoColorReadabilityEnabled(false);
|
||||
}
|
||||
@ -230,11 +241,13 @@ END_METADATA
|
||||
//------------------------------------------------------------------------------
|
||||
// IconLabelSliderButton:
|
||||
|
||||
IconLabelSliderButton::IconLabelSliderButton(PressedCallback callback,
|
||||
const gfx::VectorIcon* icon,
|
||||
const std::u16string& text,
|
||||
const std::u16string& tooltip_text)
|
||||
: TabSliderButton(std::move(callback)),
|
||||
IconLabelSliderButton::IconLabelSliderButton(
|
||||
PressedCallback callback,
|
||||
const gfx::VectorIcon* icon,
|
||||
const std::u16string& text,
|
||||
const std::u16string& tooltip_text_base)
|
||||
: TabSliderButton(std::move(callback),
|
||||
tooltip_text_base.empty() ? text : tooltip_text_base),
|
||||
image_view_(AddChildView(std::make_unique<views::ImageView>())),
|
||||
label_(AddChildView(std::make_unique<views::Label>(text))) {
|
||||
SetLayoutManager(std::make_unique<views::BoxLayout>(
|
||||
@ -257,8 +270,6 @@ IconLabelSliderButton::IconLabelSliderButton(PressedCallback callback,
|
||||
|
||||
// Force the label to use requested colors.
|
||||
label_->SetAutoColorReadabilityEnabled(false);
|
||||
SetAccessibleName(text);
|
||||
SetTooltipText(tooltip_text);
|
||||
}
|
||||
|
||||
IconLabelSliderButton::~IconLabelSliderButton() = default;
|
||||
|
||||
@ -5,6 +5,8 @@
|
||||
#ifndef ASH_STYLE_TAB_SLIDER_BUTTON_H_
|
||||
#define ASH_STYLE_TAB_SLIDER_BUTTON_H_
|
||||
|
||||
#include <string>
|
||||
|
||||
#include "ash/ash_export.h"
|
||||
#include "ash/style/tab_slider.h"
|
||||
#include "base/memory/raw_ptr.h"
|
||||
@ -33,7 +35,8 @@ class ASH_EXPORT TabSliderButton : public views::Button {
|
||||
public:
|
||||
METADATA_HEADER(TabSliderButton);
|
||||
|
||||
explicit TabSliderButton(PressedCallback callback);
|
||||
TabSliderButton(PressedCallback callback,
|
||||
const std::u16string& tooltip_text_base);
|
||||
TabSliderButton(const TabSliderButton&) = delete;
|
||||
TabSliderButton& operator=(const TabSliderButton&) = delete;
|
||||
~TabSliderButton() override;
|
||||
@ -60,6 +63,10 @@ class ASH_EXPORT TabSliderButton : public views::Button {
|
||||
// Called when the button selected state is changed.
|
||||
virtual void OnSelectedChanged() = 0;
|
||||
|
||||
// Updates the accessible name and tooltip with `tooltip_text_base_` and the
|
||||
// buttons state.
|
||||
void UpdateTooltipAndAccessibleName();
|
||||
|
||||
// views::Button:
|
||||
void NotifyClick(const ui::Event& event) override;
|
||||
|
||||
@ -67,6 +74,10 @@ class ASH_EXPORT TabSliderButton : public views::Button {
|
||||
raw_ptr<TabSlider, ExperimentalAsh> tab_slider_ = nullptr;
|
||||
// The selected state indicating if the button is selected.
|
||||
bool selected_ = false;
|
||||
|
||||
// The base for the buttons accessible name and tooltip. The state is appended
|
||||
// in `UpdateAccessibleName()`.
|
||||
const std::u16string tooltip_text_base_;
|
||||
};
|
||||
|
||||
// An extension of `TabSliderButton` which is a circle button with an icon in
|
||||
@ -78,7 +89,7 @@ class ASH_EXPORT IconSliderButton : public TabSliderButton {
|
||||
|
||||
IconSliderButton(PressedCallback callback,
|
||||
const gfx::VectorIcon* icon,
|
||||
const std::u16string& tooltip_text = u"");
|
||||
const std::u16string& tooltip_text_base = u"");
|
||||
IconSliderButton(const IconSliderButton&) = delete;
|
||||
IconSliderButton& operator=(const IconSliderButton&) = delete;
|
||||
~IconSliderButton() override;
|
||||
@ -107,7 +118,7 @@ class ASH_EXPORT LabelSliderButton : public TabSliderButton {
|
||||
|
||||
LabelSliderButton(PressedCallback callback,
|
||||
const std::u16string& text,
|
||||
const std::u16string& tooltip_text = u"");
|
||||
const std::u16string& tooltip_text_base = u"");
|
||||
LabelSliderButton(const LabelSliderButton&) = delete;
|
||||
LabelSliderButton& operator=(const LabelSliderButton&) = delete;
|
||||
~LabelSliderButton() override;
|
||||
@ -140,7 +151,7 @@ class ASH_EXPORT IconLabelSliderButton : public TabSliderButton {
|
||||
IconLabelSliderButton(PressedCallback callback,
|
||||
const gfx::VectorIcon* icon,
|
||||
const std::u16string& text,
|
||||
const std::u16string& tooltip_text = u"");
|
||||
const std::u16string& tooltip_text_base = u"");
|
||||
IconLabelSliderButton(const IconLabelSliderButton&) = delete;
|
||||
IconLabelSliderButton& operator=(const IconLabelSliderButton&) = delete;
|
||||
~IconLabelSliderButton() override;
|
||||
|
||||
@ -37,8 +37,10 @@ SetValueEffectSlider::SetValueEffectSlider(const VcHostedEffect* effect)
|
||||
views::BoxLayout::MainAxisAlignment::kStart);
|
||||
label_container->SetInsideBorderInsets(gfx::Insets::TLBR(0, 8, 0, 0));
|
||||
|
||||
label_container->AddChildView(
|
||||
auto* label = label_container->AddChildView(
|
||||
std::make_unique<views::Label>(effect->label_text()));
|
||||
label->SetFocusBehavior(FocusBehavior::ACCESSIBLE_ONLY);
|
||||
|
||||
auto* spacer_view =
|
||||
label_container->AddChildView(std::make_unique<views::View>());
|
||||
// Let the spacer fill the remaining space, pushing the label to the
|
||||
|
||||
Reference in New Issue
Block a user