Skip to content

Instantly share code, notes, and snippets.

View yuschick's full-sized avatar

Daniel Yuschick yuschick

40 followers · 34 following
View GitHub Profile
@yuschick
yuschick / aria-current-styling.css
Created January 24, 2022 06:57
Aria Current Styles
[aria-current="page"] {
/* Active link styles */
}
@yuschick
yuschick / aria-current-demo.html
Last active February 24, 2022 06:55
Aria Current
<a aria-current="page" href="/">Home</a>
@yuschick
yuschick / html-land-demo.html
Created January 24, 2022 06:56
HTML lanh
<html lang="en-US">
@yuschick
yuschick / lang-demo.html
Created January 24, 2022 06:55
Lang and Hreflang
<a lang="fi" hreflang="fi" href="/" title="Suomeksi">
<bdi>Suomeksi</bdi>
</a>
@yuschick
yuschick / aria-sort-demo.html
Created January 24, 2022 06:55
Aria Sort Demo
<thead>
<tr>
<th>First Name</th>
<th aria-sort="ascending">Last Name</th>
</tr>
</thead>
@yuschick
yuschick / aria-setsize-demo.html
Last active February 24, 2022 06:58
Aria SetSize and PosInSet Example
<h2 id="top-artists-title">Top Artists of 2021</h2>
<ul role="listbox" aria-labelledby="top-artists-title">
<li role="option" aria-setsize="20" aria-posinset="5">Bloodbound</li>
<li role="option" aria-setsize="20" aria-posinset="6">Manimal</li>
<li role="option" aria-setsize="20" aria-posinset="7">Powerwolf</li>
</ul>
@yuschick
yuschick / prefers-reduced-motion.css
Created January 21, 2022 22:13
Prefers Reduced Motion
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@yuschick
yuschick / logicalMixins.ts
Created March 23, 2021 06:30
A collection of Styled Components mixins in TypeScript to support the use of logical CSS with physical property fallbacks.
import { css } from 'styled-components';
interface IProps {
all?: string;
bottom?: string;
left?: string;
right?: string;
top?: string;
x?: string;
y?: string;
@yuschick
yuschick / dialog-styles.css
Last active November 9, 2017 12:07
Accessible Web Apps with React, TypeScript & Ally.js
.popup-outer-container {
align-items: center;
background: rgba(0, 0, 0, 0.2);
display: flex;
height: 100vh;
justify-content: center;
padding: 10px;
position: absolute;
width: 100%;
z-index: 10;
@yuschick
yuschick / dialog-component-six.js
Last active November 9, 2017 11:29
Accessible Web Apps with React, TypeScript & Ally.js
class Dialog extends React.Component<Props> {
dialog: HTMLElement | null;
disabledHandle: Handle;
focusHandle: Handle;
keyHandle: Handle;
focusedElementBeforeDialogOpened: HTMLInputElement | HTMLButtonElement;
componentDidMount() {
if (document.activeElement instanceof HTMLInputElement ||
document.activeElement instanceof HTMLButtonElement) {