Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/webchat.suggested-actions.css.html

Last active December 4, 2020 11:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/a91cb226c30e14e617e5e146302c509c to your computer and use it in GitHub Desktop.
Save nfreear/a91cb226c30e14e617e5e146302c509c to your computer and use it in GitHub Desktop.
Download ZIP
Usability and accessibility fixes using `flex-wrap` for "Suggested action" buttons / BotFramework-WebChat.js.
Raw
webchat.suggested-actions.css.html
<!doctype html> <title> *Suggested action buttons </title>
<style>
body { margin: 1rem auto; max-width: 35rem; }
button {
background: rgb(182, 14, 1);
border: 2px solid rgb(182, 14, 1);
color: #fff;
font-size: 1.1rem;
padding: 1.25rem;
}
ul {
border: 2px solid black;
list-style: none;
margin: 0;
padding: 0;
width: 466px;
}
li > div { padding: 2px; }
.hide { display: none; }
/**
* Accessibility:
*
* We need to hide the "left" / "right" buttons as they obscure the
* suggested-action buttons and add extra TAB-bing / clutter ...
*
* ... So we wrap the suggested-action buttons.
*/
.webchat__suggested-actions .react-film__main > button.react-film__flipper {
display: none;
}
.webchat__suggested-actions ul.react-film__filmstrip__list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>
<h1> WebChat — <q>Suggested action</q> buttons </h1>
<p> Usability and accessibility fixes using <tt>flex-wrap</tt> for <q>Suggested action</q> buttons. </p>
<div id="webchat">
<div aria-labelledby="webchat__suggested-actions--q05xu" aria-live="polite" role="status" class="webchat__suggested-actions webchat--css-xqyzj-1yadaek webchat--css-xqyzj-1gdqhru">
<div class="hide webchat--css-xqyzj-111jw2m" id="webchat__suggested-actions--q05xu">Suggested Actions Container: Has content. Press Alt + Shift + A to select.</div>
<div class="react-film--css-aukyf-1wly9t3 webchat__suggested-actions__carousel" dir="ltr">
<div class="react-film__main">
<div class="react-film__filmstrip">
<ul class="react-film__filmstrip__list">
<li class="react-film__filmstrip__item">
<div aria-hidden="false" class="webchat__suggested-action webchat--css-xqyzj-1fkc509 webchat--css-xqyzj-1ueyfg7">
<button aria-keyshortcuts="Ctrl + Option + A" class="webchat__suggested-action__button" type="button">
<nobr class="webchat__suggested-action__button-text">Yes</nobr>
</button>
</div>
</li>
<li class="react-film__filmstrip__item">
<div aria-hidden="false" class="webchat__suggested-action webchat--css-xx">
<button aria-keyshortcuts="" class="webchat__suggested-action__button" type="button">
<nobr class="webchat__suggested-action__button-text">No</nobr>
</button>
</div>
</li>
<li class="react-film__filmstrip__item">
<div aria-hidden="false" class="webchat__suggested-action webchat--css-xx">
<button aria-keyshortcuts="" class="webchat__suggested-action__button" type="button">
<nobr class="webchat__suggested-action__button-text">Watch a video thanks</nobr>
</button>
</div>
</li>
<li class="react-film__filmstrip__item">
<div aria-hidden="false" class="webchat__suggested-action webchat--css-xx">
<button aria-keyshortcuts="" class="webchat__suggested-action__button" type="button">
<nobr class="webchat__suggested-action__button-text">Move on please</nobr>
</button>
</div>
</li>
<li class="react-film__filmstrip__item">
<div aria-hidden="false" class="webchat__suggested-action webchat--css-xx">
<button aria-keyshortcuts="" class="webchat__suggested-action__button" type="button">
<nobr class="webchat__suggested-action__button-text">Continue</nobr>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<pre>
Nick Freear, 04-Dec-2020.
* https://gist.github.com/nfreear/a91cb226c30e14e617e5e146302c509c;
* https://github.com/microsoft/BotFramework-WebChat/blob/master/packages/component/src/Styles/defaultStyleOptions.js#L115;
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment