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

Ensure that the download modal is announced to screen reader users #3593

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Ensure that the download modal is announced to screen reader users #3593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 0 additions & 19 deletions _scripts/lib/modal.js
View file
Open in desktop

This file was deleted.

44 changes: 31 additions & 13 deletions _scripts/widgets/download-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,37 @@
* Code for opening the download overlay widget on the homepage
*/

import modal from '~/lib/modal'
function detectDialogSupport () {
return typeof document.createElement('dialog').showModal === 'function'
}

// Some browsers have styling for the native dialog element but they dont actually support it.
function swapDialogToDiv ($dialog) {
$dialog.outerHTML = $dialog.outerHTML.replace('<dialog', '<div').replace('</dialog>', '</div>')
}

function moveToAnchor (id) {
var originalURL = location.href
window.location.href = window.location.href.split('#')[0] + '#' + id
// Remove hash from URL after jumping
window.history.replaceState(null, null, originalURL)
}

export function openDownloadOverlay () {
modal.then(($) => {
var $openModal
$openModal = $('.open-modal')
console.log('Open the download overlay!')
$openModal.leanModal({
// Add this class to download buttons to make them close it.
closeButton: '.close-modal',
disableCloseOnOverlayClick: true
})
// This is what actually opens the modal overlay.
$openModal.click()
})
var modalId = 'download-modal'
var $downloadModal = document.getElementById(modalId)
if (!$downloadModal) {
return
}
var supportsDialog = detectDialogSupport()
if (!supportsDialog) {
swapDialogToDiv($downloadModal)
moveToAnchor(modalId)
return
}
$downloadModal.showModal()
var $closeButton = $downloadModal.querySelector('.js-close-button')
$closeButton.addEventListener('click', () => {
$downloadModal.close()
}, { once: true })
}
95 changes: 45 additions & 50 deletions _styles/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1106,47 +1106,19 @@ input:focus::placeholder {
* Modal Dialogs *
****************/

.modal {
background-color: #f5f5f5;
border-radius: 4px;
box-shadow:
inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
inset -1px 0 0 0 rgba(255, 255, 255, 0.2),
inset 0 1px 0 0 #fff,
0 0 0 1px rgba(0, 0, 0, 0.2),
0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
max-height: 100vh;
max-width: 100vw;
padding: 12px;
z-index: 11000;
display: none;
text-align: center;
}

.modal p {
text-align: center;
margin: 0 6px;
max-width: 388px;
}

.modal .row.actions {
margin-top: 24px;
padding: 0;
}

.modal .row.actions .column {
margin: 6px !important;
}

@media only screen and (max-width: 425px) {
.dialog {
width: calc(100vw - 32px);
}
}
/*
The use of the [open] selector is to distinguish between
browsers that support the <dialog> element and therefore <dialog open>
So that for browsers that dont we can have a sensible inline style that can be anchored to.
*/

.dialog {
padding: 24px;
text-align: center;
background-color: #f5f5f5;
}
.dialog[open] {
border: none;
border-radius: 3px;
box-shadow:
inset 1px 0 0 0 rgba(255, 255, 255, 0.2),
Expand All @@ -1156,41 +1128,61 @@ input:focus::placeholder {
0 8px 20px 1px rgba(0, 0, 0, 0.14),
0 3px 28px 2px rgba(0, 0, 0, 0.12),
0 5px 10px -3px rgba(0, 0, 0, 0.4);
margin: 0 auto;
padding: 12px;
padding-top: 24px;
text-align: initial;
}

.dialog img {
@media only screen and (max-width: 425px) {
.dialog[open] {
width: calc(100vw - 32px);
}
}

.dialog[open]::backdrop {
background: rgba(0, 0, 0, 0.7);
}

.dialog[open] .dialog-title {
font-weight: 700;
font-size: 1em;
text-align: left;
line-height: 24px;
margin: 0;
}

.dialog[open] img {
display: inline-block;
margin-right: 12px;
user-select: none;
vertical-align: top;
}

.dialog .content-area {
.dialog[open] .content-area {
display: inline-block;
width: calc(100% - 48px - 18px); /* Subtract icon width and right margin */
}

.dialog p {
margin: 0 auto;
text-align: left;
line-height: 24px;
margin: 6px 0 0;
max-width: 380px;
text-align: left;
}

.dialog p.primary {
font-weight: 700;
margin-top: 0;
.dialog[open] p {
margin: 6px 0 0;
}

.dialog .action-area {
margin-top: 12px;
}

.dialog[open] .action-area {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: flex-end;
margin-top: 12px;
}

.dialog .button {
Expand All @@ -1209,9 +1201,12 @@ input:focus::placeholder {
margin-left: 6px;
}

i.fa.fa-close.close-modal {
cursor: pointer;
float: left;
/* If the dialog is inline hide the close button */
.dialog .close-modal {
display: none;
}
.dialog[open] .close-modal {
display: block;
}

/*********
Expand Down
12 changes: 6 additions & 6 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,21 +467,21 @@

<span id="translate-download" style="display:none;" hidden>Download elementary OS</span>
<span id="translate-purchase" style="display:none;" hidden>Purchase elementary OS</span>
<div id="download-modal" class="dialog modal">
<img alt="Download elementary OS icon" src="images/icons/apps/48/system-os-installer.svg">
<dialog id="download-modal" class="dialog" aria-labelledby="download-modal-title">
Copy link
Contributor Author

@NickColley NickColley Jul 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here I label the dialog based on the heading so that the dialog has a clear name "Choose a Download modal dialog" etc

<img src="images/icons/apps/48/system-os-installer.svg" alt=""/>
Copy link
Contributor Author

@NickColley NickColley Jul 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have set the alt to nothing to mark the image as presentational as it is just for show.

<div class="content-area">
<p class="primary">Choose a Download</p>
<h2 id="download-modal-title" class="dialog-title">Choose a Download</h2>
<p>Download from a localized server or by magnet link. For help and more info, see the <a class="read-more" href="docs/installation" target="_blank" rel="noopener">installation guide</a></p>
</div>
<div class="action-area">
<a class="button clickable close-modal">Close</a>
<button class="js-close-button button clickable close-modal">Close</button>
<div class="linked">
<a class="button suggested-action download-link http" href="<?php echo $download_link.$config['release_filename']; ?>">Download</a>
<a class="button suggested-action download-link magnet" title="Torrent Magnet Link" href="<?php echo 'magnet:?xt=urn:btih:'.$config['release_magnet'].'&dn='.$config['release_filename']; ?>&tr=https%3A%2F%2Fashrise.com%3A443%2Fphoenix%2Fannounce&tr=udp%3A%2F%2Fopen.demonii.com%3A1337%2Fannounce&tr=udp%3A%2F%2Ftracker.openbittorrent.com%3A80%2Fannounce&ws=http%3A<?php echo urlencode($download_link.$config['release_filename']); ?>"><i class="fa fa-magnet"></i></a>
</div>
</div>
</div>
<a style="display:none;" class="open-modal" href="#download-modal"></a>
</dialog>

<!--[if lt IE 10]><script type="text/javascript" src="https://cdn.jsdelivr.net/gh/eligrey/[email protected]/classList.min.js"></script><![endif]-->
<?php
include $template['footer'];
Expand Down
Loading