? ????? ??? ?? ??? ??? ? ???? ??? ?????. ???? Tab ?? ???? ??? ??? ??? ??? ??? ? ???? ??? ??? ?? ? ???? ?? ?? ? ?? ??? ?????. ? ????? ? ??? ????? ???? ?? ??? `keyup` ???? ????? ?? ?? ?? ??? ???? ???????. 'keydown' ???? ???? 'e.preventDefault()'? ???? ???? ??? ??? ???? ???? ???? ???? ??? ??? ??? ? ???? ? ??????? ???? ?? ?????.

??? ??? ? ??? ??

?? ??? ????? ??? ??? ??? ?? ? ??????? ???? ????? ? ???? ??? ??? ?? ?? ?????. ???? ?? ?? ??, ?? ?? ?? ???? ???? ??? UI ?? ??? ? ? ??? ??? ??? ???? ?? ?? ??? ????? ???. ?, ???? Tab ?? Shift Tab ?? ?? ?? ?? ?? ??? ???? ??? ? ???? ??? ??? ????? ??? ??? ?? ? ????. ?? ??? ??? ???? ???, ?? ?? ???? ???? ????? ?????.

?? ??: ?? ???? ??? ?? ?? ??

??? ??? ??? ? ???? ?? ??? ???? ?? ??? ??? ??? ??? ??? ??? ? Tab ?? ?? ??? ???? ? ?? ??? ??? ??? ?? ??? ? ??? ????. ??? ? ?? ???? Shift Tab ?? ??? ???? ??? ??? ??? ? ????.

??? ???? ??? keyup ???? ???? Tab ?? ???? ??? ???? ? ?? ??? ???? ????? ? ? ???? ??? ??? "??" ? ??? ???? ?? ??? ??? "??"?? ?? ???? ?? ? ?? ??? ?? ????? ????.

???? ??? ??? ???????.

 const ?? = document.getElementById("PromptsDialog");
const focusableElements = element.querySelectorAll("span:not([disabled])");

const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];

element.addEventListener("keyup", function(e) {
  if (e.key === "Tab") {
    // ???? ??? ??? ?? ?? if (document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      e.preventDefault(); // ?? ??? ????? ????? ?? ?????.}
  }
});

? ??? ? ??????

??? ?? ??? Tab ?? ???? ????? ?? ??? ?? ???? ??? ???? ????.

1. Tab ? ???(keydown) : ???? Tab ?? ??? ????? ?? ?? ??? ?????. ?, ???? ?? ? ?? ?? ??? ???? ?????.
2. ??? ?? : ?? ?? ???? ??? ???? ? ?? ??? ?? ?? Tab ?? ?? ? ??? ??? ???? ?? ?????.
3. Tab ? ??(keyup) : keyup ???? ???? Tab ?? ?? ?? ??????.
4. ??? ?? : ?? document.activeElement? ?? ??? ??? ???? ????. ??? ???? ?? ???? firstFocusableElement.focus()? ???? ???? ? ?? ??? ?????.

??? ???? ???? ??? Tab ?? ????? ???? ??? ??? ???? Tab ?? ??? ???? ??? ? ?? ??? ????? ?????. ?? ?? ???? "?? ?? ??"??? ??? ????, ?? "??? ??? ?? ??? ???? ??"??? ??? ??? ??? ???? ????.

?? ??: keydown ??? ??

? ??? ???? ??? ??? ?? ???? ???? ????. ????? Tab ?? ?? ??? ?? ??? ???? ?? ?? ???? ???? ???? ???. keydown ???? ?? ??? ??? ?????.

keydown ???? ???? Tab ?? ???? ????? ?? ?? ??? ?? ??? ???? ??? ? ??? ??? ? ????. e.preventDefault()? ???? ????? ?? ??? ??? ???? ???? ???? ??? ? ????.

??? ??? ?? ?????.

 const ?? = document.getElementById("PromptsDialog");
// tabindex? ?? ???? ??? ?? ??? ???? ??? ?? ??? ?? ???? ???. const focusableElements = element.querySelectorAll("span[tabindex]:not([disabled]), ??:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]:not([disabled])");

const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];

element.addEventListener("keydown", function(e) {
  if (e.key === "Tab") {
    // ??? ? ??: ???? ??? ??? ?? ? Tab ?? ??? ???? ? ?? ??? ?????. if (!e.shiftKey && document.activeElement === lastFocusableElement) {
      firstFocusableElement.focus();
      e.preventDefault(); // ????? ?? ??? ??? ?????.}
    // ??? ? ??: ???? ? ?? ??? ?? ? Shift Tab ?? ??? ???? ??? ??? ?????. else if (e.shiftKey && document.activeElement === firstFocusableElement) {
      lastFocusableElement.focus();
      e.preventDefault(); // ????? ?? ??? ??? ?????.}
  }
});

? ??????:

1. ???? Tab ?? ??? keydown ???? ?? ?????.
2. document.activeElement? lastFocusableElement?? Shift ?? ??? ?? ??(Tab ??? ??? ???) ???? ???? firstFocusableElement? ?????.
3. ?? ??? ?? e.preventDefault()? ????? ????. ??? ?? ????? keydown ??? ?? ?? ??? ?? ??? ???? ??? ???. ??? ???? ?? "??" ?? ??? ?? ??? ??? ???? ? ?? ??? ?????.
4. ??? ?? ???? ?? Shift Tab ??? ??? ?? ??? ??????. ??? ???? ? ?? ??? ?? ? Shift Tab? ??? ??? ??? ?????.

HTML ?? ?

?? JavaScript ??? ??? ????? HTML ??? ??? ??? ??? ????? ?? ???? ??? ? ??? ?? ???? ?? ??? ???. ?? ??:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="PromptsDialog" style="display: block; border: 1px solid #ccc; padding: 20px; width: 300px; margin: 50px auto;">
  <div>
    <h4 style="margin-top:-4px;">?? ????</h4>
    <div id="??????">
      <div style="display: flex; justify-content: space-around; margin-top: 15px;">
        <span type="" tabindex="1" data-toggle="tooltip" data-placement="top" title="Save" class="command-icon" id="btnSaveWindow"><i class="fa fa-save"></i></span>
        <span type="" tabindex="2" data-toggle="tooltip" data-placement="top" title="?? ??" class="command-icon" id="btnRemoveFromItemsGrid"><i class="fa fa-trash"></i></span>
        <span type="" tabindex="3" data-toggle="tooltip" data-placement="top" title="Close" class="command-icon" id="btnClosePromptDialog"><i class="fa fa-remove"></i></span>
      </div>
    </div>
  </div>
</div>


  .command-??? {
    ??: ???;
    ??: 8px;
    ???: 1px ??? ??;
    ??? ??: 4px;
    ??: ?? 0.2? Ease-in-out;
  }
  .command-icon:?? {
    ??: 2px ??? #007bff;
    ??? ??: #007bff;
  }

? HTML ???? ??? tabindex ??? ?? ???? ?? ? ?? ?? ?? ??? ?? ???? ??? ??? ???? ? ?????.

?? ?? ? ?? ??

1. ??? ??? ??? ???? ????? . querySelectorAll? ???? ??? ? ?????? ?? a[href], ??, ??, ??, ??? ?? ? tabindex ??? ?? ?? ??? ?? ???? ?? ? ?? ?? ??? ?????? ???.
2. ?? ??? ?? : ??? ??? ???? ???? ????? ???? ?? ???? ??? ? focusableElements ??? ?? ?? ????? ? ??? ???? ???.
3. WAI-ARIA ?? : ?? ?? ??? ?? ??? ?? ??? ?? WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Application) ??? role="dialog", aria-modal="true" ?? ?? ??? ???? ?? ??? ? ??? ?? ??? ???? ?? ????.
4. ??? ??? ?? : ?? ?? ?? ?? ???? ??? ??? ?? ? ???? ?? ????? ???? ?? ?? ??? ???? ???? ???.
5. ???? ? ??? : e.key? ?? ?????? ?? ?????, ?? ????? ???? ?? ?? e.keyCode ?? e.which? ??? ? ????.

??

? ??????? ???? ????? ??? ??? ???? ???? ?? ?????. ???? ??? ???? keydown ???? keyup ??? ?? ??? ??? ?????? ???? ??? ?? ??? ?? ? ????. e.preventDefault()? ??? ??? ??? ???? ????? ???? ??? ?? ??? ??? ??? ???? ?? ????? ???? ?? ??? ??? ?? ??? ?????.

? ??? JavaScript ??? ??: Tab ? ????? ?? ???? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!