From 2823e1d069435d37e52788c18358b3a16b20310c Mon Sep 17 00:00:00 2001 From: Shelley Vohr Date: Sun, 6 Oct 2019 22:51:05 +0200 Subject: [PATCH] feat: improve TouchBarButton accessibility --- docs/api/touch-bar-button.md | 7 +++++++ lib/browser/api/touch-bar.js | 3 ++- shell/browser/ui/cocoa/atom_touch_bar.mm | 4 ++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/docs/api/touch-bar-button.md b/docs/api/touch-bar-button.md index 89c4ccaa48884..fbab74267aaef 100644 --- a/docs/api/touch-bar-button.md +++ b/docs/api/touch-bar-button.md @@ -8,16 +8,23 @@ Process: [Main](../tutorial/application-architecture.md#main-and-renderer-proces * `options` Object * `label` String (optional) - Button text. + * `accessibilityLabel` String (optional) - A short description of the button for use by screenreaders like VoiceOver. * `backgroundColor` String (optional) - Button background color in hex format, i.e `#ABCDEF`. * `icon` [NativeImage](native-image.md) | String (optional) - Button icon. * `iconPosition` String (optional) - Can be `left`, `right` or `overlay`. Defaults to `overlay`. * `click` Function (optional) - Function to call when the button is clicked. +If you choose to define the `accessibilityLabel`, ensure you have considered macOS [best practices](https://developer.apple.com/documentation/appkit/nsaccessibilitybutton/1524910-accessibilitylabel?language=objc). + ### Instance Properties The following properties are available on instances of `TouchBarButton`: +#### `touchBarButton.accessibilityLabel` + +A `String` representing the description of the button to be read by a screen reader. Will only be read by screen readers if no label is set. + #### `touchBarButton.label` A `String` representing the button's current text. Changing this value immediately updates the button diff --git a/lib/browser/api/touch-bar.js b/lib/browser/api/touch-bar.js index 183a1e05bc740..a8b79a715d374 100644 --- a/lib/browser/api/touch-bar.js +++ b/lib/browser/api/touch-bar.js @@ -191,8 +191,9 @@ TouchBar.TouchBarButton = class TouchBarButton extends TouchBarItem { super() if (config == null) config = {} this._addImmutableProperty('type', 'button') - const { click, icon, iconPosition, label, backgroundColor } = config + const { click, icon, iconPosition, label, backgroundColor, accessibilityLabel } = config this._addLiveProperty('label', label) + this._addLiveProperty('accessibilityLabel', accessibilityLabel) this._addLiveProperty('backgroundColor', backgroundColor) this._addLiveProperty('icon', icon) this._addLiveProperty('iconPosition', iconPosition) diff --git a/shell/browser/ui/cocoa/atom_touch_bar.mm b/shell/browser/ui/cocoa/atom_touch_bar.mm index a95422323e516..cf132818a4019 100644 --- a/shell/browser/ui/cocoa/atom_touch_bar.mm +++ b/shell/browser/ui/cocoa/atom_touch_bar.mm @@ -363,6 +363,10 @@ - (void)updateButton:(NSCustomTouchBarItem*)item button.bezelColor = nil; } + std::string accessibilityLabel; + settings.Get("accessibilityLabel", &accessibilityLabel); + button.accessibilityLabel = base::SysUTF8ToNSString(accessibilityLabel); + std::string label; settings.Get("label", &label); button.title = base::SysUTF8ToNSString(label);