Skip to content

Commit

Permalink
button, list, menu
Browse files Browse the repository at this point in the history
  • Loading branch information
Juraj Kapsiar committed Jul 10, 2018
1 parent 9607c76 commit 31eba05
Show file tree
Hide file tree
Showing 8 changed files with 671 additions and 0 deletions.
93 changes: 93 additions & 0 deletions buttons/buttons.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Buttons</title>
<style>
button[aria-pressed="true"] {
background-color: green;
}
button {
background-color: #ccc;
padding: 10px 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<h2>Buttons</h2>
<h3>Button with text</h3>
<button>Text Only</button>
<h3>Button with image</h3>
<button aria-label="chat">
<img role="presentation" src="/img/icons-chat.png" />
</button>
<h3>Button with svg image</h3>
<button aria-label="something">
<svg viewBox="0 0 32 32" role="presentation">
<g>
<g>
<path d="M18.4,17.6V20h-4.8v-2.4H18.4 M19.2,16.8h-6.4v4h6.4V16.8L19.2,16.8z" />
<g>
<rect x="13.3" y="13.6" width="5.2" height="0.8" />
</g>
<path d="M18.8,10.1C18.3,8.9,17.2,8,16,8c-1.2,0-2.3,0.9-2.8,2.1c-2.1,0.2-3.7,2-3.7,4.1v7.6c0,1.2,0.9,2.1,2.1,2.1
h8.9c1.2,0,2.1-0.9,2.1-2.1v-7.6C22.6,12.1,20.9,10.4,18.8,10.1z M16,8.8c0.8,0,1.5,0.5,1.9,1.3h-3.8C14.5,9.3,15.2,8.8,16,8.8z
M21.8,21.9c0,0.7-0.6,1.3-1.3,1.3h-8.9c-0.7,0-1.3-0.6-1.3-1.3v-7.6c0-1.9,1.5-3.4,3.4-3.4h4.8c1.9,0,3.4,1.5,3.4,3.4V21.9z"
/>
</g>
<g>
<rect x="13.6" y="17.6" width="4.8" height="2.4" />
<path d="M18.8,10.1C18.3,8.9,17.2,8,16,8c-1.2,0-2.3,0.9-2.8,2.1c-2.1,0.2-3.7,2-3.7,4.1v7.6c0,1.2,0.9,2.1,2.1,2.1
h8.9c1.2,0,2.1-0.9,2.1-2.1v-7.6C22.6,12.1,20.9,10.4,18.8,10.1z M16,8.8c0.8,0,1.5,0.5,1.9,1.3h-3.8C14.5,9.3,15.2,8.8,16,8.8z
M13.3,13.6h5.2v0.8h-5.2V13.6z M19.2,20.8h-6.4v-4h6.4V20.8z" />
</g>
</g>
</svg>
</button>
<h3>Button with text and tooltip = "this shows on hover"</h3>
<button title="this shows on hover">Text with tooltip</button>
<h3>Button with image and tooltip = "this shows on hover"</h3>
<button title="this shows on hover" aria-label="chat">
<img role="presentation" src="/img/icons-chat.png" />
</button>
<h3>Button with image, text and tooltip = "this shows on hover"</h3>
<button title="this shows on hover">
<img role="presentation" src="/img/icons-star.png" />
<span>Favorite</span>
</button>
<h3>Button with image, text and tooltip and different aria-label</h3>
<button title="this shows on hover" aria-label="Great - 3 new messages">
<img role="presentation" src="/img/icons-star.png" />
<span>Favorite</span>
</button>
<h3>Button with image, text and tooltip and same aria-label</h3>
<button title="this shows on hover" aria-label="Favorite">
<img role="presentation" src="/img/icons-star.png" />
<span>Favorite</span>
</button>
<h3>Button with image, text and tooltip and same aria-labelledby</h3>
<button title="this shows on hover" aria-labelledby="_fav">
<div id="_fav">
<img role="presentation" src="/img/icons-star.png" />
<span>Favorite</span>
</div>
</button>
<h3>Toggle button with title, aria-pressed and aria-label</h3>
<button class="toggle-button" aria-pressed="false" title="this shows on hover" aria-label="Toggle this button">Press me!</button>
<script>
var toggleButton = document.querySelector('.toggle-button');
toggleButton.addEventListener('click', buttonPressed);
toggleButton.addEventListener('keydown', buttonPressed);
function buttonPressed(event) {
if (event.type === 'keydown' && event.keyCode !== 13) {
return;
}
var currState = toggleButton.getAttribute('aria-pressed');
var nextState = currState === "false" ? true : false;
toggleButton.setAttribute('aria-pressed', nextState);
}
</script>
</body>
</html>
101 changes: 101 additions & 0 deletions lists/list.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<style>
button {
background-color: #ccc;
padding: 10px 20px;
border-radius: 5px;
}
</style>
<ul>
<li>
<div>Text in a div not focusable</div>
</li>
<li>
<span>Text in a span not focusable</span>
</li>
<li>
<div tabindex="0">Text in a div focusable. Facebook messenger has its messages in thread with tabindex="0"</div>
</li>
<li>
<span tabindex="0">Text in a span focusable. Facebook messenger has its messages in thread with tabindex="0"</span>
</li>
<li>
<a href="#">Anchor tag only with text content. Focusable.</a>
</li>
<li>
<a href="#">
<img role="presentation" src="/img/icons-activity.png" title="anchor tag with image. anchor as a whole should be focusable."
/>
</a>
</li>
<li>
<a href="#">
<img role="presentation" src="/img/icons-activity.png" />
<span>Anchor tag with image and text. Anchor tag as a whole should receive focus.</span>
</a>
</li>
<li>
<div>
<a href="#">
<img role="presentation" src="/img/icons-activity.png" />
<span>Div with anchor tag with image and text. Anchor tag as a whole should receive focus.</span>
</a>
</div>
</li>
<li>
<button>Button with a text. should receive focus.</button>
</li>
<li>
<button>
<img src="/img/icons-activity.png" title="button with an image, button should get focus" />
</button>
</li>
<li>
<div>
<a href="#">
<span>Complex div with button and link. Both of them should receive focus, first anchor then button.</span>
</a>
<button>
<img src="/img/icons-dots-white.png" title="button with an image, button should get focus" />
</button>
</div>
</li>
<li>
<div style="display: flex; flex-direction: row-reverse">
<button style>
<img src="/img/icons-dots-white.png" title="button with an image, button should get focus" />
</button>
<a href="#">
<span>Same as above but with flex direction reversed. Found this example in facebook. Focus seems wrong but actually is
based on html syntax.</span>
</a>
</div>
</li>
<li>
<div>
<a style="display: block" href="#">Complex div that can resemble a message/post in a thread.</a>
<button style>
<img src="/img/icons-compose-1.png" />
</button>
<button style>
<img src="/img/icons-compose-2.png" />
</button>
<button style>
<img src="/img/icons-compose-3.png" />
</button>
<a style="display: block" href="#">In angular client we focus on posts rather than post elements. We focus on post elements only after hitting enter while
on post.</a>
<button style>
<img src="/img/icons-compose-4.png" />
</button>
<button style>
<img src="/img/icons-compose-5.png" />
</button>
<button style>
<img src="/img/icons-compose-6.png" />
</button>
<a style="display: block" href="#">Facebook handles this without post focus, just natural focus on focusable elements. This example is meant to be like
that.
</a>
</div>
</li>
</ul>
25 changes: 25 additions & 0 deletions lists/selectable-list.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.info-card-container {
display: flex;
}
.info-card-right-title,
.info-card-right-msg {
display: block;
}
.info-card-right-msg {
font-size: 14px;
font-style: italic;
}
li {
list-style-type: none;
}
li:focus {
outline: none;
background-color: purple;
}
.selected {
background-color: pink;
}
img {
height: 100%;
width: 100%;
}
90 changes: 90 additions & 0 deletions lists/selectable-list.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Selectable List</title>
<link rel="stylesheet" href="selectable-list.css">
</head>
<a href="#">Just for the sake of focus</a>
<ul>
<li>
<div class="info-card-container">
<div class="info-card-left">
<img role="presentation" src="/img/icons-star.png" />
</div>
<div class="info-card-right singleLineTruncation">
<span class="info-card-right-title singleLineTruncation">
Mr Batman
</span>
<span class="info-card-right-msg singleLineTruncation">
If we program the sensor, we can get to the SAS alarm through the haptic SQL card!
</span>
</div>
</div>
</li>
<li>
<div class="info-card-container">
<div class="info-card-left">
<img role="presentation" src="/img/icons-star.png" />
</div>
<div class="info-card-right singleLineTruncation">
<span class="info-card-right-title singleLineTruncation">
Miss Black Widow
</span>
<span class="info-card-right-msg singleLineTruncation">
The GB pixel is down, navigate the virtual interface!
</span>
</div>
</div>
</li>
<li>
<div class="info-card-container">
<div class="info-card-left">
<img role="presentation" src="/img/icons-star.png" />
</div>
<div class="info-card-right singleLineTruncation">
<span class="info-card-right-title singleLineTruncation">
Ted
</span>
<span class="info-card-right-msg singleLineTruncation">
Use the online FTP application, then you can input the multi-byte application!
</span>
</div>
</div>
</li>
<li>
<div class="info-card-container">
<div class="info-card-left">
<img role="presentation" src="/img/icons-star.png" />
</div>
<div class="info-card-right singleLineTruncation">
<span class="info-card-right-title singleLineTruncation">
Rihanna
</span>
<span class="info-card-right-msg singleLineTruncation">
Umbrella ella ella e e e.
</span>
</div>
</div>
</li>
<li>
<div class="info-card-container">
<div class="info-card-left">
<img role="presentation" src="/img/icons-star.png" />
</div>
<div class="info-card-right singleLineTruncation">
<span class="info-card-right-title singleLineTruncation">
Ted
</span>
<span class="info-card-right-msg singleLineTruncation">
Use the online FTP application, then you can input the multi-byte application!
</span>
</div>
</div>
</li>
</ul>
<a href="#">Just for the sake of focus</a>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="selectable-list.js"></script>
</html>
68 changes: 68 additions & 0 deletions lists/selectable-list.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
const keys = {
tab: 9,
enter: 13,
esc: 27,
space: 32,
left: 37,
up: 38,
right: 39,
down: 40
};
const listItems = document.getElementsByTagName("li");
let selectedIndex = 0;
let kbFocusIndex = 0;
function applySelection(index) {
if (index >= listItems.length || index < 0) {
return;
}
kbFocusIndex = index;
listItems[selectedIndex].setAttribute("tabindex", "-1");
listItems[selectedIndex].classList.remove("selected");
selectedIndex = index;
listItems[selectedIndex].focus();
listItems[selectedIndex].setAttribute("tabindex", "0");
listItems[selectedIndex].classList.add("selected");
}
function applyKbFocus(index) {
if (index >= listItems.length || index < 0) {
return;
}
listItems[kbFocusIndex].setAttribute("tabindex", "-1");
kbFocusIndex = index;
listItems[kbFocusIndex].focus();
listItems[kbFocusIndex].setAttribute("tabindex", "0");
}
function getIndexInList(child) {
return $(child)
.closest("li")
.index();
}
for (let index = 0; index < listItems.length; index++) {
const item = listItems.item(index);
if (index === 0) {
item.setAttribute("tabindex", "0");
} else {
item.setAttribute("tabindex", "-1");
}
item.addEventListener("click", event => {
applySelection(getIndexInList(event.target));
});
item.addEventListener("keydown", event => {
switch (event.keyCode) {
case keys.down:
applyKbFocus(kbFocusIndex + 1);
break;
case keys.up:
applyKbFocus(kbFocusIndex - 1);
break;
case keys.enter:
case keys.space:
applySelection(kbFocusIndex);
break;
default:
break;
}
if (event.shiftKey) {
}
});
}
Loading

0 comments on commit 31eba05

Please sign in to comment.