m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

ToggleButton: Use label so users can click text (#13876)

Browse Source
This commit is contained in:
David Walsh 2022-03-18 10:16:11 -05:00 committed by GitHub
parent e3ea4f2cd0
commit b5088f65a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
test/e2e/tests/send-eth.spec.js
View File

@ -190,7 +190,7 @@ describe('Send ETH from dapp using advanced gas controls', function () {
await driver.clickElement({ text: 'Settings', tag: 'div' }); await driver.clickElement({ text: 'Settings', tag: 'div' });
await driver.clickElement({ text: 'Advanced', tag: 'div' }); await driver.clickElement({ text: 'Advanced', tag: 'div' });
await driver.clickElement( await driver.clickElement(
'[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > div > div', '[data-testid="advanced-setting-show-testnet-conversion"] .settings-page__content-item-col > label > div',
); );
const advancedGasTitle = await driver.findElement({ const advancedGasTitle = await driver.findElement({
text: 'Advanced gas controls', text: 'Advanced gas controls',
@ -198,7 +198,7 @@ describe('Send ETH from dapp using advanced gas controls', function () {
}); });
await driver.scrollToElement(advancedGasTitle); await driver.scrollToElement(advancedGasTitle);
await driver.clickElement( await driver.clickElement(
'[data-testid="advanced-setting-advanced-gas-inline"] .settings-page__content-item-col > div > div', '[data-testid="advanced-setting-advanced-gas-inline"] .settings-page__content-item-col > label > div',
); );
windowHandles = await driver.getAllWindowHandles(); windowHandles = await driver.getAllWindowHandles();
extension = windowHandles[0]; extension = windowHandles[0];

2
ui/components/ui/toggle-button/index.scss
View File

@ -1,5 +1,7 @@
.toggle-button { .toggle-button {
display: flex; display: flex;
cursor: pointer;
$self: &; $self: &;
&__status { &__status {

4
ui/components/ui/toggle-button/toggle-button.component.js
View File

@ -52,7 +52,7 @@ const ToggleButton = (props) => {
const modifier = value ? 'on' : 'off'; const modifier = value ? 'on' : 'off';
return ( return (
<div <label
tabIndex="0" tabIndex="0"
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@ -82,7 +82,7 @@ const ToggleButton = (props) => {
<span className="toggle-button__label-off">{offLabel}</span> <span className="toggle-button__label-off">{offLabel}</span>
<span className="toggle-button__label-on">{onLabel}</span> <span className="toggle-button__label-on">{onLabel}</span>
</div> </div>
</div> </label>
); );
}; };