JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="box">
The next part of creating an accessible dialog is to manage focus. When a dialog is displayed, the focus should be placed inside of the dialog so users can continue to navigate with the keyboard. Exactly where inside the dialogue focus is set depends largely on the purpose of the dialogue itself. If you have a confirmation dialog with one button to continue in one button to cancel then you may want the default focus to be on the cancel button. If you have a dialog where the user is supposed to enter text, then you may want the focus to be on the text box by default. If you can’t figure out where to set focus, then a good starting point is to set focus to the element representing the dialog.

Since most of the time you will be using a <div> element to represent a dialog, you can’t set focus to it by default. Instead, you’ll need to enable focus on that element by setting the tabIndex property to -1. This allows you to set focus to the element using JavaScript but doesn’t insert the element into the normal tab order. That means users won’t be able to press tab to set focus to the dialog. You can either do this directly in HTML or in JavaScript. For HTML:</div>

CSS

.box {margin:20px;padding:20px;
background-image:linear-gradient(#000 1px, transperent 1px);
background-size:100% 1.25em;
}