A mirror of my website's source code.

By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

MacOS tab nav now uses kbd for key-combo + improved kbd and samp styles.

steve0greatness,
created on Friday, 16 February 2024, 03:58:59 (1708055939), received on Monday, 6 May 2024, 02:55:38 (1714964138)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>

147ce01778e5846793195005f09355a23f047447

blog-posts/macos-page-tab-nav.md

@@ -5,7 +5,7 @@ updated: 2024 Feb 14

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            Ok, so I feel like a complete idiot right now.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        I've been trying to use <kbd>Tab</kbd> to navigate webpages on my MacBook for what feels like forever now. Turns out, it was as simple as hitting <kbd>Ctrl</kbd> + <kbd>F7</kbd>.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        I've been trying to use <kbd>Tab</kbd> to navigate webpages on my MacBook for what feels like forever now. Turns out, it was as simple as hitting <kbd><kbd>Ctrl</kbd>+<kbd>F7</kbd></kbd>.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            To be honest, I thought that it was just an issue with FireFox, and then I read [Browser keyboard navigation in macOS](https://www.a11yproject.com/posts/macos-browser-keyboard-navigation/) by [Scott Vinkle](https://scottvinkle.me/) for [The A11Y Project](https://www.a11yproject.com/) and realized that it was an issue with MacOS! This should really be enabled by default, but Apple is stupid.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/src/global.css

@@ -128,14 +128,23 @@ abbr:has(:any-link) {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            kbd {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	white-space: pre-wrap;	
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	font-family: "mononoki", monospace;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	display: inline-block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	font-size: .85rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        :not(samp) kbd:not(:has(kbd)) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	background-color: #222728;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	color: currentColor;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	border: currentColor 1px solid;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	border-radius: 10px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	font-family: "mononoki", monospace;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	padding: 5px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	margin: 1px 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	display: inline-block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        samp kbd {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	display: block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            samp {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -144,5 +153,6 @@ samp {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	font-family: "mononoki", monospace;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	padding: 10px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	display: block;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        	font-size: .85rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            	white-space: pre-wrap;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }