Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiModal] Adjust position of close button, end #8230

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[EuiModal] Adjust position of close button, end #8230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13a19dc
[EuiModal] Adjust position of close button
acstll Dec 12, 2024
60cf5d3
[EuiModal] Update snapshots
acstll Dec 12, 2024
33e9fa7
Changelog
acstll Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/eui/changelogs/upcoming/8230.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Accessibility**

- In `EuiModal` the close button is now placed last in the DOM, for correctness in reading order.
48 changes: 24 additions & 24 deletions packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
role="alertdialog"
tabindex="0"
>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
<div
class="euiModalHeader emotion-euiModalHeader"
>
Expand Down Expand Up @@ -90,6 +78,18 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
</span>
</button>
</div>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
</div>,
<div
Expand Down Expand Up @@ -118,18 +118,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
role="alertdialog"
tabindex="0"
>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
<div
class="euiModalHeader emotion-euiModalHeader"
>
Expand Down Expand Up @@ -174,6 +162,18 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
</span>
</button>
</div>
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="cross"
/>
</button>
</div>
</div>,
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/modal/__snapshots__/modal.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ exports[`EuiModal renders 1`] = `
role="dialog"
tabindex="0"
>
children
<button
aria-label="Closes this modal window"
class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
Expand All @@ -36,7 +37,6 @@ exports[`EuiModal renders 1`] = `
data-euiicon-type="cross"
/>
</button>
children
</div>
</div>
<div
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/modal/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
aria-modal={true}
{...rest}
>
{children}
<EuiI18n
token="euiModal.closeModal"
default="Closes this modal window"
Expand All @@ -119,7 +120,6 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
/>
)}
</EuiI18n>
{children}
</div>
</EuiFocusTrap>
</EuiOverlayMask>
Expand Down
Loading