Only enable slideout sidebar focus trap when toggled via button

[gcamacho079]

Description

There's a bug for slideouts where keyboard focus is trapped inside the details sidebar for desktop users. The focus trap should only exist for users below a certain screen size who have toggled the sidebar open via the button in the slideout header.

Resolves DEV-389

[linear]

DEV-389 Keyboard focus becomes trapped in Edit Element slideout sidebar details

Location: Assets edit slideout

When a user tabs into the details sidebar in the slideout, keyboard focus becomes trapped in a loop between filename input, and Preview/Edit buttons

Ensure focus is trapped between all elements in the slideout, not just those in the details sidebar

Resolves CMS-077

<div class="so-sidebar details" style="right: 0px;"><div id="onkvudaknq-thumb-container" class="preview-thumb-container button-fade checkered"><div class="preview-thumb"><img srcset="http://craft4.nitro/assets/users/_201x190_crop_center-center_none/Screen-Shot-2022-02-25-at-11.31.37-AM.png?v=1647294035 201w, http://craft4.nitro/assets/users/_402x380_crop_center-center_none/Screen-Shot-2022-02-25-at-11.31.37-AM.png?v=1647294035 402w" alt="Screen Shot 2022 02 25 at 11 31 37 AM" sizes="201px"></div><div class="buttons"><button type="button" id="onkvudaknq-preview-btn" class="btn preview-btn">Preview</button><button type="button" id="onkvudaknq-edit-btn" class="btn edit-btn">Edit</button></div></div>
<div class="meta"><div id="onkvudaknq-new-filename-field" class="field first" data-attribute="new-filename"><div class="heading"><label id="onkvudaknq-new-filename-label" for="onkvudaknq-new-filename">Filename<span class="visually-hidden">Required</span><span class="required" aria-hidden="true"></span></label></div><div class="input ltr"><input type="text" id="onkvudaknq-new-filename" class="text filename fullwidth focus-visible" name="onkvudaknq[newFilename]" value="Screen-Shot-2022-02-25-at-11.31.37-AM.png" autocomplete="off" dir="ltr" data-focus-visible-added=""></div></div></div>
<dl class="meta read-only"><div class="data"><dt class="heading">Location</dt>
<dd class="value">Users</dd>
</div>
<div class="data"><dt class="heading">File size</dt>
<dd class="value"><div id="onkvudaknq-file-size-value" title="1,195,395 bytes" aria-label="1,195,395 bytes">1 MB</div></dd>
</div>
<div class="data"><dt class="heading">Dimensions</dt>
<dd class="value"><div id="onkvudaknq-dimensions-value">1226×1158</div></dd>
</div>
<div class="data"><dt class="heading">Created at</dt>
<dd class="value">3/14/2022, 2:40 PM</dd>
</div>
<div class="data"><dt class="heading">Updated at</dt>
<dd class="value">3/14/2022, 2:42 PM</dd>
</div></dl></div>