Skip to content

Commit b9aedf3

Browse files
sbates-idrcsbates-idrc
authored
Merge pull request #447 from sbates-idrc/remove-images-accessibility-tree
Remove unnecessary images from the accessibility tree (fixes #432)
2 parents deb3c04 + b468ac8 commit b9aedf3

22 files changed

Lines changed: 113 additions & 43 deletions

‎src/ActionPanel.js‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import AriaDisablingButton from './AriaDisablingButton';
55
import ProgramSequence from './ProgramSequence';
66
import { injectIntl } from 'react-intl';
77
import type {IntlShape} from 'react-intl';
8-
import {ReactComponent as ActionPanelBackground} from './svg/ActionPanel.svg';
8+
import { ReactComponent as ActionPanelBackground } from './svg/ActionPanel.svg';
99
import { ReactComponent as MovePreviousIcon } from './svg/MovePrevious.svg';
1010
import { ReactComponent as MoveNextIcon } from './svg/MoveNext.svg';
1111
import { ReactComponent as DeleteIcon } from './svg/Delete.svg';
@@ -222,7 +222,7 @@ class ActionPanel extends React.Component<ActionPanelProps, {}> {
222222
return (
223223
<React.Fragment>
224224
<div className="ActionPanel__background">
225-
<ActionPanelBackground/>
225+
<ActionPanelBackground aria-hidden={true} />
226226
</div>
227227
<div
228228
id='ActionPanel'
@@ -235,7 +235,10 @@ class ActionPanel extends React.Component<ActionPanelProps, {}> {
235235
aria-label={this.props.intl.formatMessage({id:'ActionPanel.action.delete'}, stepMessageData)}
236236
className='ActionPanel__action-buttons focus-trap-action-panel__action-panel-button'
237237
onClick={this.handleClickDelete}>
238-
<DeleteIcon className='ActionPanel__action-button-svg' />
238+
<DeleteIcon
239+
className='ActionPanel__action-button-svg'
240+
aria-hidden={true}
241+
/>
239242
</AriaDisablingButton>
240243
{replaceIsVisible &&
241244
<AriaDisablingButton
@@ -245,7 +248,10 @@ class ActionPanel extends React.Component<ActionPanelProps, {}> {
245248
aria-label={this.props.intl.formatMessage({id:'ActionPanel.action.replace'}, stepMessageData)}
246249
className='ActionPanel__action-buttons focus-trap-action-panel__action-panel-button'
247250
onClick={this.handleClickReplace}>
248-
<ReplaceIcon className='ActionPanel__action-button-svg' />
251+
<ReplaceIcon
252+
className='ActionPanel__action-button-svg'
253+
aria-hidden={true}
254+
/>
249255
</AriaDisablingButton>
250256
}
251257
<AriaDisablingButton
@@ -255,7 +261,10 @@ class ActionPanel extends React.Component<ActionPanelProps, {}> {
255261
aria-label={this.props.intl.formatMessage({id:'ActionPanel.action.moveToPreviousStep'}, stepMessageData)}
256262
className='ActionPanel__action-buttons focus-trap-action-panel__action-panel-button'
257263
onClick={this.handleClickMoveToPreviousStep}>
258-
<MovePreviousIcon className='ActionPanel__action-button-svg' />
264+
<MovePreviousIcon
265+
className='ActionPanel__action-button-svg'
266+
aria-hidden={true}
267+
/>
259268
</AriaDisablingButton>
260269
<AriaDisablingButton
261270
name='moveToNextStep'
@@ -264,7 +273,10 @@ class ActionPanel extends React.Component<ActionPanelProps, {}> {
264273
aria-label={this.props.intl.formatMessage({id:'ActionPanel.action.moveToNextStep'}, stepMessageData)}
265274
className='ActionPanel__action-buttons focus-trap-action-panel__action-panel-button'
266275
onClick={this.handleClickMoveToNextStep}>
267-
<MoveNextIcon className='ActionPanel__action-button-svg' />
276+
<MoveNextIcon
277+
className='ActionPanel__action-button-svg'
278+
aria-hidden={true}
279+
/>
268280
</AriaDisablingButton>
269281
</div>
270282
</React.Fragment>

‎src/AddNode.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,15 +43,15 @@ const AddNode = React.forwardRef<AddNodeProps, HTMLDivElement>(
4343
aria-label={props['aria-label']}
4444
onClick={handleClick}
4545
>
46-
<AddIcon />
46+
<AddIcon aria-hidden={true} />
4747
</AriaDisablingButton>
4848
</div>
4949
);
5050
} else {
5151
return (
5252
<div ref={ref} className={addNodeClasses}>
5353
<div className='AddNode__collapsed-icon'>
54-
<AddIcon />
54+
<AddIcon aria-hidden={true} />
5555
</div>
5656
</div>
5757
);

‎src/App.js‎

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -54,22 +54,22 @@ import TilePanel from './TilePanel';
5454
import { ReactComponent as HiddenBlock } from './svg/Hidden.svg';
5555
import KeyboardInputModal from './KeyboardInputModal';
5656
import ShareModal from './ShareModal';
57-
import { ReactComponent as ShareIcon} from './svg/Share.svg';
57+
import { ReactComponent as ShareIcon } from './svg/Share.svg';
5858

5959
import type {ActionName, KeyboardInputSchemeName} from './KeyboardInputSchemes';
6060
import {findKeyboardEventSequenceMatches, isRepeatedEvent, isKeyboardInputSchemeName} from './KeyboardInputSchemes';
6161
import { ReactComponent as AudioIcon } from './svg/Audio.svg';
62-
import { ReactComponent as KeyboardModalToggleIcon} from './svg/Keyboard.svg';
62+
import { ReactComponent as KeyboardModalToggleIcon } from './svg/Keyboard.svg';
6363
import { ReactComponent as ThemeIcon } from './svg/Theme.svg';
6464
import { ReactComponent as WorldIcon } from './svg/World.svg';
6565
import { ReactComponent as ActionsMenuToggleIcon } from './svg/Simplification.svg'
6666
import ProgramChangeController from './ProgramChangeController';
6767
import PrivacyModal from './PrivacyModal';
6868

69-
import { ReactComponent as LogoContrast} from './svg/LogoContrast.svg';
70-
import { ReactComponent as LogoGrayscale} from './svg/LogoGrayscale.svg';
71-
import { ReactComponent as LogoDark} from './svg/LogoDark.svg';
72-
import { ReactComponent as LogoMixedAndLight} from './svg/LogoMixedAndLight.svg';
69+
import { ReactComponent as LogoContrast } from './svg/LogoContrast.svg';
70+
import { ReactComponent as LogoGrayscale } from './svg/LogoGrayscale.svg';
71+
import { ReactComponent as LogoDark } from './svg/LogoDark.svg';
72+
import { ReactComponent as LogoMixedAndLight } from './svg/LogoMixedAndLight.svg';
7373

7474
function getThemeLogo (theme: ThemeName) {
7575
if (theme === "contrast") { return LogoContrast; }
@@ -989,7 +989,7 @@ export class App extends React.Component<AppProps, AppState> {
989989
className='command-block--hidden'
990990
key={`CommandBlock-${index}`}
991991
aria-hidden='true'>
992-
<HiddenBlock />
992+
<HiddenBlock aria-hidden={true} />
993993
</div>
994994
);
995995
}
@@ -1315,28 +1315,40 @@ export class App extends React.Component<AppProps, AppState> {
13151315
ariaLabel={this.props.intl.formatMessage({ id: 'SoundOptionsModal.title' })}
13161316
onClick={this.handleClickSoundIcon}
13171317
>
1318-
<AudioIcon className='App__header-soundOptions-icon'/>
1318+
<AudioIcon
1319+
className='App__header-soundOptions-icon'
1320+
aria-hidden={true}
1321+
/>
13191322
</IconButton>
13201323
<IconButton
13211324
className="App__header-themeSelectorIcon"
13221325
ariaLabel={this.props.intl.formatMessage({ id: 'ThemeSelector.iconButton' })}
13231326
onClick={this.handleClickThemeSelectorIcon}
13241327
>
1325-
<ThemeIcon className='App__header-theme-icon'/>
1328+
<ThemeIcon
1329+
className='App__header-theme-icon'
1330+
aria-hidden={true}
1331+
/>
13261332
</IconButton>
13271333
<IconButton
13281334
className="App__header-keyboardMenuIcon"
13291335
ariaLabel={this.props.intl.formatMessage({ id: 'KeyboardInputModal.ShowHide.AriaLabel' })}
13301336
onClick={this.handleClickKeyboardIcon}
13311337
>
1332-
<KeyboardModalToggleIcon className='App__header-keyboard-icon'/>
1338+
<KeyboardModalToggleIcon
1339+
className='App__header-keyboard-icon'
1340+
aria-hidden={true}
1341+
/>
13331342
</IconButton>
13341343
<IconButton className="App__ActionsMenu__toggle-button"
13351344
ariaLabel={this.props.intl.formatMessage({ id: 'ActionsMenu.toggleActionsMenu' })}
13361345
disabled={this.isEditingDisabled()}
13371346
onClick={this.handleClickActionsSimplificationIcon}
13381347
>
1339-
<ActionsMenuToggleIcon className='App__header-actionsMenu-icon'/>
1348+
<ActionsMenuToggleIcon
1349+
className='App__header-actionsMenu-icon'
1350+
aria-hidden={true}
1351+
/>
13401352
</IconButton>
13411353
</div>
13421354
</div>
@@ -1391,7 +1403,10 @@ export class App extends React.Component<AppProps, AppState> {
13911403
ariaLabel={this.props.intl.formatMessage({ id: 'WorldSelectorButton.label' })}
13921404
onClick={this.handleClickWorldIcon}
13931405
>
1394-
<WorldIcon className='App__world-selector-icon'/>
1406+
<WorldIcon
1407+
className='App__world-selector-icon'
1408+
aria-hidden={true}
1409+
/>
13951410
</IconButton>
13961411
<CustomBackgroundDesignModeButton
13971412
customBackgroundDesignMode={this.state.customBackgroundDesignMode}
@@ -1566,7 +1581,10 @@ export class App extends React.Component<AppProps, AppState> {
15661581
className='App__ShareButton'
15671582
onClick={this.handleShareButtonClick}
15681583
>
1569-
<ShareIcon className='App__ShareButton__icon'/>
1584+
<ShareIcon
1585+
className='App__ShareButton__icon'
1586+
aria-hidden={true}
1587+
/>
15701588
<div className='App__ShareButton__label'>
15711589
{this.props.intl.formatMessage({id:'ShareButton'})}
15721590
</div>

‎src/BluetoothApiWarning.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ class BluetoothApiWarning extends React.Component<BluetoothApiWarningProps, {}>
1717
<span
1818
role='img'
1919
aria-label={this.props.intl.formatMessage({ id: 'BluetoothApiWarning.errorIconLabel' })}>
20-
<ErrorIcon className='BluetoothApiWarning__error-icon-svg' />
20+
<ErrorIcon
21+
className='BluetoothApiWarning__error-icon-svg'
22+
aria-hidden={true}
23+
/>
2124
</span>
2225
<FormattedMessage id='BluetoothApiWarning.message' />
2326
</div>

‎src/CharacterPositionController.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,7 @@ class CharacterPositionController extends React.Component<CharacterPositionContr
315315
>
316316
<PaintbrushIcon
317317
className='CharacterPositionController__centerButtonIcon'
318+
aria-hidden={true}
318319
/>
319320
</IconButton>
320321
:
@@ -326,6 +327,7 @@ class CharacterPositionController extends React.Component<CharacterPositionContr
326327
>
327328
<SetStartIcon
328329
className='CharacterPositionController__centerButtonIcon'
330+
aria-hidden={true}
329331
/>
330332
</IconButton>
331333
}

‎src/CommandBlock.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,8 @@ export default React.forwardRef<CommandBlockProps, Button>(
108108
children = React.createElement(
109109
iconType,
110110
{
111-
className: 'command-block-svg'
111+
className: 'command-block-svg',
112+
'aria-hidden': true
112113
}
113114
);
114115
}

‎src/CustomBackgroundDesignModeButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ class CustomBackgroundDesignModeButton extends React.PureComponent<CustomBackgro
3030
onClick={this.handleClick}
3131
>
3232
{this.props.customBackgroundDesignMode ?
33-
<ExitDesignModeIcon/>
33+
<ExitDesignModeIcon aria-hidden={true} />
3434
:
35-
<EnterDesignModeIcon/>
35+
<EnterDesignModeIcon aria-hidden={true} />
3636
}
3737
</IconButton>
3838
);

‎src/CustomBackgroundSceneLayer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default class CustomBackgroundSceneLayer extends React.PureComponent<Cust
3434
tiles.push(React.createElement(tileImage,
3535
{
3636
key: `custom-background-tile-${x}-${y}`,
37+
'aria-hidden': true,
3738
x: x - 0.5,
3839
y: y - 0.5,
3940
width: 1,

‎src/DashConnectionErrorModal.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ class DashConnectionErrorModal extends React.Component<DashConnectionErrorModalP
2626
<Modal.Body className='DashConnectionErrorModal__content'>
2727
<div className='DashConnectionErrorModal__header'>
2828
<span role='img' aria-label={this.props.intl.formatMessage({id:'DashConnectionErrorModal.error'})} >
29-
<ErrorIcon className='DashConnectionErrorModal__error-svg' />
29+
<ErrorIcon
30+
className='DashConnectionErrorModal__error-svg'
31+
aria-hidden={true}
32+
/>
3033
</span>
3134
<FormattedMessage id='DashConnectionErrorModal.title' />
3235
</div>

‎src/DeviceConnectControl.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,26 @@ class DeviceConnectControl extends React.Component<DeviceConnectControlProps, {}
2525
<span
2626
role='img'
2727
aria-label={this.props.intl.formatMessage({id:'DeviceConnectControl.connected'})}>
28-
<DashConnectionIcon className='DeviceConnectControl__dash-icon DeviceConnectControl__dash-icon--connected' />
28+
<DashConnectionIcon
29+
className='DeviceConnectControl__dash-icon DeviceConnectControl__dash-icon--connected'
30+
aria-hidden={true}
31+
/>
2932
</span>
3033
);
3134
case 'connecting':
3235
return (
3336
<span>
34-
<DashConnectionIcon className='DeviceConnectControl__dash-icon' />
37+
<DashConnectionIcon
38+
className='DeviceConnectControl__dash-icon'
39+
aria-hidden={true}
40+
/>
3541
<span
3642
role='img'
3743
aria-label={this.props.intl.formatMessage({id:'DeviceConnectControl.connecting'})}>
38-
<ConnectingIcon className='DeviceConnectControl__status-icon' />
44+
<ConnectingIcon
45+
className='DeviceConnectControl__status-icon'
46+
aria-hidden={true}
47+
/>
3948
</span>
4049
</span>
4150
);

0 commit comments

Comments
 (0)