File tree 4 files changed +17
-4
lines changed
Filter options
4 files changed +17
-4
lines changed
Original file line number Diff line number Diff line change @@ -35,7 +35,7 @@ export default function Layout({
3535 target = "_blank"
3636 rel = "noopener noreferrer"
3737 // here we are using the `isolate` property to create a new stacking context: https://github.com/tailwindlabs/tailwindcss/discussions/5675#discussioncomment-1987063
38- className = "relative isolate overflow-hidden rounded-full w-32 px-10 py-4 focus:outline-none focus:ring-0 "
38+ className = "relative isolate overflow-hidden rounded-full w-32 px-10 py-4"
3939 >
4040 < span className = "absolute inset-px z-10 grid place-items-center rounded-full bg-black bg-gradient-to-t from-neutral-800 text-neutral-400 text-sm" >
4141 View the code
Original file line number Diff line number Diff line change @@ -38,6 +38,7 @@ export default function SlackButton({
3838 } }
3939 className = "group-hover:hidden block"
4040 viewBox = "0 0 122.8 122.8"
41+ aria-hidden = "true"
4142 >
4243 < path
4344 d = "M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9zm6.5 0c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z"
Original file line number Diff line number Diff line change 11import Modal from "./modal" ;
22import {
3+ useRef ,
4+ useEffect ,
35 useState ,
46 Dispatch ,
57 SetStateAction ,
@@ -14,14 +16,22 @@ const VideoModal = ({
1416 showVideoModal : boolean ;
1517 setShowVideoModal : Dispatch < SetStateAction < boolean > > ;
1618} ) => {
19+ const videoRef = useRef < HTMLVideoElement > ( null ) ;
20+ useEffect ( ( ) => {
21+ if ( showVideoModal ) videoRef . current ?. focus ( ) ;
22+ } , [ showVideoModal ] ) ;
23+
1724 return (
1825 < Modal showModal = { showVideoModal } setShowModal = { setShowVideoModal } >
1926 < video
27+ ref = { videoRef }
2028 className = "w-11/12 max-w-screen-xl aspect-video overflow-hidden shadow-xl rounded-2xl object-fill"
2129 autoPlay
2230 controls
2331 src = "/assets/demo.mp4"
2432 poster = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABIpJREFUWEeNV4tynEYQ3F24L04sWYKzLSfKT/tYUv2YfSA5FakoDuqge3p6Hpf3P76cyX9nykkXOVV8zriOI/Ez/toD7Q6eiCfxma/wt7Ov9ayv2hfylQBf1YCTiPiYwTtt43USwiJwA8zxSXfNLnUCBNVjBJyi10OnXzxIRj1Cl/kcSnwWuV+Et+5/Pvl9fjzjXBqBZCIfCFwTd8aNINRVaJ/47jERGQSeHXhIo+hBAuApF8XoxI75lyFw57yce7Ii/s9IkMr+5euFgIBzLikVkyCZwVl84uQ/CcSBO2e1S00Vp3g2nDFc5/3ptRHIjjjAeQYZEKEKYSRCp0QwgIJENXhcB8FQXd4ShyEV+/M2ECiMHIA6Fp1DkW5eg3bgs4qAzlKF/z1nTm1Pp1LwfBcxgxQDl0UEeE1SiB6pcUSMPAB9rocJiASPRiKqSEo2M25fv52KUFIDsAB48RGE/B1mwsaboq5HqocIVBOrFxVk7osC28sP3hcBgJa0lJUEloFEgQL2AF4jsylyAR+pmkR1OkiAh3ypPiIFmBm8b3t94/0W/bISeFlBQJ+lSkmFKrj0+GJHTAIPEjkOE5lICNy5JgeVNghsP0/mtmRKH8DraiKhxAcCNl0AHiJQj0c6qIRSIRVmBcZU5G37Sx4okL6kBcDrmkBgpRKr7i9WQN1HLqfplPuDBB5SAJ9rTYcrQl6ACtHSeznmbf/bJgSIFCB4IwElBgJMgXpAJ/BIx8PRk4QI8KAKocDY7iMF+3tXYAF4ELilG9VYpAR90BvRaEBGDOCHwEXgoAJTCkKFoRrydn+nB2AyKbCm2y0UuInQhQA83HrAKP/jlwmEGU0gnanGpG3gnhLb/R9WAQlcol+DyH8q8DF6KCEPHCzDnoJehionVMFEAJEjBbdBBZsxUuBGFApIfkT8q6Wgl6MUqBpb3in61OWdDwosa0Lkt/XGM+QHKXmg9KWsNaFw/+iB3gtmD7gNRytG9e37+wk5wgPh/u4DkVAzUiNCK24KsAxtvGZCG9BlqJnQy1Av8WwRAXuA0fYSVBX8XwJjGUKBKMNhIo4GtAp5Rx9gJ1StTz2AZDwTpjKMPgCQAI5mhOh7J4xZ0PaAgQRx9086YSeBElQjwpDCLKB0MeU4gDCMogMCHJ5Q9EyTW3G4PqSPkZx3zwLmmB3PUVN6NSINpJwK9gKWr6ccZe5TUJEPw6jG5tS3IpZe80BK+f76JhPmIKBm1OZAG0baEycCaLNBwsCYBRzRzYAGb8uMx3r0ARJwI2rdMIbQtBOMD8acHwg0In0h0Wo2EpDzexqgwMsPVQEUYBoked8HtCFpRxyXUkxDdLlIg85z9J2A1rkLATSi+8v3eSHBTuBNCCS0nrkJMXeKSOYa1q8ou7acxm+Ftv15pxx6AO7ch50wFOBiEusYwWXCMI/biiZdjFwAt32wr+ZqwFJOKqCbKhBeiwDSolWcLTcUaB0QKfgNgWZElV2F8/17IfIf8IRuaWgE7m0lAwl6IGSfNmP9PogfNz0F8sGc+/htMP5Elw7cK4cfOf8CzsEZUbNybRAAAAAASUVORK5CYII="
33+ tabIndex = { showVideoModal ? 0 : - 1 }
34+ aria-label = "Slacker Introduction Video"
2535 />
2636 </ Modal >
2737 ) ;
Original file line number Diff line number Diff line change @@ -32,13 +32,13 @@ export default function Home() {
3232 < div className = "relative my-10" >
3333 < button
3434 onClick = { ( ) => setShowVideoModal ( true ) }
35- className = "group flex justify-center items-center absolute z-10 w-[350px] h-[350px] sm:w-[500px] sm:h-[500px] rounded-full hover:backdrop-blur-sm hover:bg-black/20 focus:outline-none focus:ring-0 transition-all overflow-hidden"
35+ className = "group flex justify-center items-center absolute z-10 w-[350px] h-[350px] sm:w-[500px] sm:h-[500px] rounded-full hover:backdrop-blur-sm hover:bg-black/20 transition-all overflow-hidden"
3636 >
3737 < div className = "flex justify-center items-center w-14 h-14 rounded-full bg-white shadow-lg" >
38- < Play size = { 20 } fill = "#27272A" />
38+ < Play size = { 20 } fill = "#27272A" aria-hidden = "true" />
3939 </ div >
4040 < p className = "font-mono text-white absolute -bottom-10 group-hover:bottom-5 transition-all ease-in-out duration-300" >
41- 1:03
41+ < span className = "sr-only" > Play Video. Length of Video is </ span > 1:03
4242 </ p >
4343 </ button >
4444 < video
@@ -47,6 +47,8 @@ export default function Home() {
4747 muted
4848 src = "/assets/demo-preview.mp4"
4949 className = "w-[350px] h-[350px] sm:w-[500px] sm:h-[500px] rounded-full object-cover"
50+ tabIndex = { - 1 }
51+ aria-label = "Looping video preview"
5052 />
5153 </ div >
5254 < div className = "flex flex-col text-center space-y-2" >
You can’t perform that action at this time.
0 commit comments