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

Revised MacOS Keyboard Navigation to use the kbr tag

steve0greatness,
created on Thursday, 15 February 2024, 03:11:01 (1707966661), received on Monday, 6 May 2024, 02:55:38 (1714964138)
Author identity: Steve0Greatness <steve0greatnessiscool@gmail.com>

8b9603cbebe6e99317a748cf45c3eb568dac75f2

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

@@ -1,11 +1,11 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            title: MacOS Keyboard Navigation 
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            date: 2022 Feb 26
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        updated: 2024 Jan 4
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        updated: 2024 Feb 14
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            ---
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            Ok, so I feel like a complete idiot right now.
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        I've been trying to use `Tab` to navigate webpages on my MacBook for what feels like forever now. Turns out, it was as simple as hitting `Ctrl` + `F7`.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        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>.
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            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

@@ -1,4 +1,5 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            @import url("/fonts/inter/inter.css");
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        @import url("/fonts/mononoki/mononoki.css");
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            body,
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            html {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -125,3 +126,14 @@ abbr :any-link {

                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            abbr:has(:any-link) {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                                text-decoration: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        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;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        }