mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions 1

feat: improve TouchBarButton accessibility (#20454)

Browse source
This commit is contained in:
Shelley Vohr 2019-10-08 17:13:57 +02:00 • committed by John Kleinschmidt
parent 8da9a3c416
commit c16a186de0
4 changed files with 53 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

63
lib/browser/api/touch-bar.js
View file

@ -191,12 +191,12 @@ TouchBar.TouchBarButton = class TouchBarButton extends TouchBarItem {
super()
if (config == null) config = {}
this._addImmutableProperty('type', 'button')
const { click, icon, iconPosition, label, backgroundColor } = config
this._addLiveProperty('label', label)
this._addLiveProperty('backgroundColor', backgroundColor)
this._addLiveProperty('icon', icon)
this._addLiveProperty('iconPosition', iconPosition)
if (typeof click === 'function') {
this._addLiveProperty('label', config.label)
this._addLiveProperty('accessibilityLabel', config.accessibilityLabel)
this._addLiveProperty('backgroundColor', config.backgroundColor)
this._addLiveProperty('icon', config.icon)
this._addLiveProperty('iconPosition', config.iconPosition)
if (typeof config.click === 'function') {
this._addImmutableProperty('onInteraction', () => {
config.click()
})
@ -209,14 +209,13 @@ TouchBar.TouchBarColorPicker = class TouchBarColorPicker extends TouchBarItem {
super()
if (config == null) config = {}
this._addImmutableProperty('type', 'colorpicker')
const { availableColors, change, selectedColor } = config
this._addLiveProperty('availableColors', availableColors)
this._addLiveProperty('selectedColor', selectedColor)
this._addLiveProperty('availableColors', config.availableColors)
this._addLiveProperty('selectedColor', config.selectedColor)
if (typeof change === 'function') {
if (typeof config.change === 'function') {
this._addImmutableProperty('onInteraction', (details) => {
this._selectedColor = details.color
change(details.color)
config.change(details.color)
})
}
}
@ -239,6 +238,7 @@ TouchBar.TouchBarLabel = class TouchBarLabel extends TouchBarItem {
if (config == null) config = {}
this._addImmutableProperty('type', 'label')
this._addLiveProperty('label', config.label)
this._addLiveProperty('accessibilityLabel', config.accessibilityLabel)
this._addLiveProperty('textColor', config.textColor)
}
}
@ -262,16 +262,15 @@ TouchBar.TouchBarSlider = class TouchBarSlider extends TouchBarItem {
super()
if (config == null) config = {}
this._addImmutableProperty('type', 'slider')
const { change, label, minValue, maxValue, value } = config
this._addLiveProperty('label', label)
this._addLiveProperty('minValue', minValue)
this._addLiveProperty('maxValue', maxValue)
this._addLiveProperty('value', value)
this._addLiveProperty('label', config.label)
this._addLiveProperty('minValue', config.minValue)
this._addLiveProperty('maxValue', config.maxValue)
this._addLiveProperty('value', config.value)
if (typeof change === 'function') {
if (typeof config.change === 'function') {
this._addImmutableProperty('onInteraction', (details) => {
this._value = details.value
change(details.value)
config.change(details.value)
})
}
}
@ -290,17 +289,16 @@ TouchBar.TouchBarSegmentedControl = class TouchBarSegmentedControl extends Touch
constructor (config) {
super()
if (config == null) config = {}
const { segmentStyle, segments, selectedIndex, change, mode } = config
this._addImmutableProperty('type', 'segmented_control')
this._addLiveProperty('segmentStyle', segmentStyle)
this._addLiveProperty('segments', segments || [])
this._addLiveProperty('selectedIndex', selectedIndex)
this._addLiveProperty('mode', mode)
this._addLiveProperty('segmentStyle', config.segmentStyle)
this._addLiveProperty('segments', config.segments || [])
this._addLiveProperty('selectedIndex', config.selectedIndex)
this._addLiveProperty('mode', config.mode)
if (typeof change === 'function') {
if (typeof config.change === 'function') {
this._addImmutableProperty('onInteraction', (details) => {
this._selectedIndex = details.selectedIndex
change(details.selectedIndex, details.isSelected)
config.change(details.selectedIndex, details.isSelected)
})
}
}
@ -310,15 +308,16 @@ TouchBar.TouchBarScrubber = class TouchBarScrubber extends TouchBarItem {
constructor (config) {
super()
if (config == null) config = {}
const { items, selectedStyle, overlayStyle, showArrowButtons, continuous, mode } = config
let { select, highlight } = config
this._addImmutableProperty('type', 'scrubber')
this._addLiveProperty('items', items)
this._addLiveProperty('selectedStyle', selectedStyle || null)
this._addLiveProperty('overlayStyle', overlayStyle || null)
this._addLiveProperty('showArrowButtons', showArrowButtons || false)
this._addLiveProperty('mode', mode || 'free')
this._addLiveProperty('continuous', typeof continuous === 'undefined' ? true : continuous)
this._addLiveProperty('items', config.items)
this._addLiveProperty('selectedStyle', config.selectedStyle || null)
this._addLiveProperty('overlayStyle', config.overlayStyle || null)
this._addLiveProperty('showArrowButtons', config.showArrowButtons || false)
this._addLiveProperty('mode', config.mode || 'free')
const cont = typeof config.continuous === 'undefined' ? true : config.continuous
this._addLiveProperty('continuous', cont)
if (typeof select === 'function' || typeof highlight === 'function') {
if (select == null) select = () => {}