Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

a11y: add callout to Onboarding toggle switch #2390

Merged
merged 14 commits into from
Apr 2, 2020
Merged

a11y: add callout to Onboarding toggle switch #2390

merged 14 commits into from
Apr 2, 2020

Conversation

beyackle
Copy link
Contributor

Description

This adds a Callout to the "Onboarding" toggle in the settings, prompting a user to go back to Design view to start the process. The callout is also read out by a screen-reader (twice, for some reason, but this is still a draft).

Task Item

Closes #2101

Screenshots

image

@beyackle
Copy link
Contributor Author

beyackle commented Mar 27, 2020 •
edited
Loading

This definitely could use some designer eyes on it; I was just making something up that looked all right to me, but it's not hard to change if I need to.

@github-actions
Copy link

Coverage Status

Coverage decreased (-0.03%) to 40.148% when pulling aad49a1 on beyackle/onboardingToggleText into becea53 on master.

@cwhitten cwhitten requested a review from DesignPolice March 27, 2020 16:52
@cwhitten
Copy link
Member

hey @DesignPolice can you look at this and comment? thanks!

@DesignPolice
Copy link

Cool,

I will make something up today, I could use a distraction. Thanks @beyackle

@DesignPolice
Copy link

okay well Friday didn't work out for fixing this... so I will try again today @beyackle

Is this just a banner with info or clickable to take you back to Design View?

@beyackle
Copy link
Contributor Author

beyackle commented Mar 30, 2020 via email

@DesignPolice
Copy link

@cwhitten @beyackle
Sorry for the delay, had to finish another deadline...

I would just keep this simple... I thought about using the Purple to tie it back to Onboarding, Which Marieke may want to do, but thinking just leave that in the Onboarding.

I made one with an icon and one without.
https://www.figma.com/file/Ux0vucOvaLL2xH22WpFgV65X/MarcB_Composer-UI?node-id=5316%3A140

@beyackle
Copy link
Contributor Author

@cwhitten @beyackle
Sorry for the delay, had to finish another deadline...

I would just keep this simple... I thought about using the Purple to tie it back to Onboarding, Which Marieke may want to do, but thinking just leave that in the Onboarding.

I made one with an icon and one without.
https://www.figma.com/file/Ux0vucOvaLL2xH22WpFgV65X/MarcB_Composer-UI?node-id=5316%3A140

Thanks - those look great! I'll use the one with the icon.

@DesignPolice
Copy link

I just changed the size of the icon box... to 32px - to give it 8px on both sides and between the blue and text... @beyackle

@beyackle
Copy link
Contributor Author

image

There's still a bug where the callout ends up attached too far to the left. This happens because the initial flip causes a "Loading" pane to appear on the right, which skews the apparent width of everything to the point where the callout decides it needs to be attached farther over. This does solve the immediate issue, though, and should be adequately close to the given design.

@beyackle beyackle marked this pull request as ready for review March 31, 2020 21:14
@a-b-r-o-w-n a-b-r-o-w-n merged commit 9f8e1a5 into master Apr 2, 2020
@a-b-r-o-w-n a-b-r-o-w-n deleted the beyackle/onboardingToggleText branch April 2, 2020 15:34
@a-b-r-o-w-n a-b-r-o-w-n mentioned this pull request May 15, 2020
Merged
lei9444 pushed a commit to lei9444/BotFramework-Composer-1 that referenced this pull request Jun 15, 2021
@beyackle @cwhitten @a-b-r-o-w-n
a11y: add callout to Onboarding toggle switch (microsoft#2390)
549b8e5 
* add callout label to Onboarding toggle

* add callout label to Onboarding toggle

* Update index.tsx

* add callout label to Onboarding toggle

* add callout label to Onboarding toggle

* Update index.tsx

* Update index.tsx

Co-authored-by: Chris Whitten <christopher.whitten@microsoft.com>
Co-authored-by: Andy Brown <asbrown002@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@a-b-r-o-w-n a-b-r-o-w-n a-b-r-o-w-n approved these changes

@DesignPolice DesignPolice Awaiting requested review from DesignPolice

@boydc2014 boydc2014 Awaiting requested review from boydc2014 boydc2014 is a code owner

@corinagum corinagum Awaiting requested review from corinagum

@cwhitten cwhitten Awaiting requested review from cwhitten cwhitten is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@beyackle @cwhitten @DesignPolice @a-b-r-o-w-n