From 4e26526edcd63adb926a9d481e329aa899ba593f Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Sun, 4 Oct 2026 16:49:41 +0100
Subject: [PATCH 1/8] a11y: homepage sweep - links: update blue slightly to
better meet colour contrast reqs - workflow section: label each figure with
existing h4 - workflow section: mark mail icon as aria-hidden="true" -
showcase section: rework links into buttons with explicit aria-controls -
showcase section: mark all tabs except current as hidden - header: add
explicit title to elementary logo type - press: add explicit title to all
logos - icons: mark some purely decorative icons as aria-hidden="true"
---
_scripts/widgets/showcase.js | 25 +++++---
_styles/home.css | 11 ++++
_styles/main.css | 9 ++-
.../actions/symbolic/appointment-symbolic.svg | 2 +-
.../symbolic/edit-clear-all-symbolic.svg | 2 +-
.../audio-input-microphone-symbolic.svg | 2 +-
.../symbolic/changes-prevent-symbolic.svg | 2 +-
images/logotype-os.svg | 2 +-
.../apps/symbolic/flatpak.svg | 2 +-
.../internet-web-browser-symbolic.svg | 2 +-
images/thirdparty-logos/ars.svg | 2 +-
images/thirdparty-logos/forbes.svg | 2 +-
images/thirdparty-logos/lifehacker.svg | 2 +-
images/thirdparty-logos/maclife.svg | 2 +-
images/thirdparty-logos/wired.svg | 2 +-
index.php | 58 +++++++++----------
16 files changed, 77 insertions(+), 50 deletions(-)
diff --git a/_scripts/widgets/showcase.js b/_scripts/widgets/showcase.js
index 88c43b42ed..e6146f146c 100644
--- a/_scripts/widgets/showcase.js
+++ b/_scripts/widgets/showcase.js
@@ -43,16 +43,16 @@ export default class Showcase {
start () {
for (let i = 0; i < this.slides.length; i++) {
const n = this.slides[i]
- const $iChoice = $("[href$='" + n + "']", this.container)
+ const $iChoice = $("[aria-controls='" + n + "']", this.container)
const $iContainer = $('#' + n, this.container)
- $iContainer.prepend('')
+ $iContainer.prepend('')
// each choice button
const that = this
$iChoice.on('click', function (e) {
e.preventDefault()
- that.slideTo($(this).attr('href').split('#').pop()) // slide on click of button
+ that.slideTo($(this).attr('aria-controls')) // slide on click of button
})
}
@@ -98,10 +98,21 @@ export default class Showcase {
return console.error("could not find requested slide '" + rSlide + "'") // log an error
}
+ // update aria-expanded to alert which slide is active
+ $(this.container).find('button[aria-controls]').each(function() {
+ const $button = $(this)
+ if ($button.attr('aria-controls') === rSlide) {
+ $button.attr('aria-expanded', true)
+ }
+ else {
+ $button.attr('aria-expanded', false)
+ }
+ })
+
if (rSlide === 'index') {
- $(this.index, this.container).addClass('active')
+ $(this.index, this.container).addClass('active').attr('hidden', false)
} else {
- $(this.index, this.container).removeClass('active')
+ $(this.index, this.container).removeClass('active').attr('hidden', true)
}
// iterates through slides based on this.slides
@@ -110,9 +121,9 @@ export default class Showcase {
const $n = $('#' + n, this.container) // current iterated slide
if (n === rSlide) { // if correct slide
- $n.addClass('active')
+ $n.addClass('active').attr('hidden', false)
} else {
- $n.removeClass('active')
+ $n.removeClass('active').attr('hidden', true)
}
}
diff --git a/_styles/home.css b/_styles/home.css
index f8de69c741..8aaea7f167 100644
--- a/_styles/home.css
+++ b/_styles/home.css
@@ -220,6 +220,17 @@ input:focus + .focus-reveal {
color: inherit;
}
+#showcase button {
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ background-image: none;
+ padding: 0;
+ margin: 0;
+ color: inherit;
+ text-shadow: inherit;
+}
+
/********************
* showcase programs *
********************/
diff --git a/_styles/main.css b/_styles/main.css
index 6f12259c5f..36ade62ff4 100644
--- a/_styles/main.css
+++ b/_styles/main.css
@@ -47,11 +47,16 @@ body {
**************/
a {
- color: #08c;
- fill: #08c;
+ color: #007dbc;
+ fill: #007dbc;
text-decoration: none;
}
+section.grey a {
+ color: #0079b6;
+ fill: #0079b6;
+}
+
a:focus {
text-decoration: underline;
}
diff --git a/images/icons/actions/symbolic/appointment-symbolic.svg b/images/icons/actions/symbolic/appointment-symbolic.svg
index 343be92538..b8c5628729 100644
--- a/images/icons/actions/symbolic/appointment-symbolic.svg
+++ b/images/icons/actions/symbolic/appointment-symbolic.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/actions/symbolic/edit-clear-all-symbolic.svg b/images/icons/actions/symbolic/edit-clear-all-symbolic.svg
index db90bce878..3f7f6d55a7 100644
--- a/images/icons/actions/symbolic/edit-clear-all-symbolic.svg
+++ b/images/icons/actions/symbolic/edit-clear-all-symbolic.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/devices/symbolic/audio-input-microphone-symbolic.svg b/images/icons/devices/symbolic/audio-input-microphone-symbolic.svg
index 5834a1cd53..2e91f26681 100644
--- a/images/icons/devices/symbolic/audio-input-microphone-symbolic.svg
+++ b/images/icons/devices/symbolic/audio-input-microphone-symbolic.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/icons/status/symbolic/changes-prevent-symbolic.svg b/images/icons/status/symbolic/changes-prevent-symbolic.svg
index 31b464254f..d82ee5261a 100644
--- a/images/icons/status/symbolic/changes-prevent-symbolic.svg
+++ b/images/icons/status/symbolic/changes-prevent-symbolic.svg
@@ -1 +1 @@
-
+
diff --git a/images/logotype-os.svg b/images/logotype-os.svg
index 1bdd0cde61..865236806b 100644
--- a/images/logotype-os.svg
+++ b/images/logotype-os.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-icons/apps/symbolic/flatpak.svg b/images/thirdparty-icons/apps/symbolic/flatpak.svg
index eba75f509a..43249c0f20 100644
--- a/images/thirdparty-icons/apps/symbolic/flatpak.svg
+++ b/images/thirdparty-icons/apps/symbolic/flatpak.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-icons/apps/symbolic/internet-web-browser-symbolic.svg b/images/thirdparty-icons/apps/symbolic/internet-web-browser-symbolic.svg
index e08fe56115..d2124d4230 100644
--- a/images/thirdparty-icons/apps/symbolic/internet-web-browser-symbolic.svg
+++ b/images/thirdparty-icons/apps/symbolic/internet-web-browser-symbolic.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-logos/ars.svg b/images/thirdparty-logos/ars.svg
index 72ab678507..bec4aa4251 100644
--- a/images/thirdparty-logos/ars.svg
+++ b/images/thirdparty-logos/ars.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-logos/forbes.svg b/images/thirdparty-logos/forbes.svg
index 2b0d48ac72..44240612a9 100644
--- a/images/thirdparty-logos/forbes.svg
+++ b/images/thirdparty-logos/forbes.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-logos/lifehacker.svg b/images/thirdparty-logos/lifehacker.svg
index b397ecccd0..39aaa05257 100644
--- a/images/thirdparty-logos/lifehacker.svg
+++ b/images/thirdparty-logos/lifehacker.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-logos/maclife.svg b/images/thirdparty-logos/maclife.svg
index 888679096c..944ed097ee 100644
--- a/images/thirdparty-logos/maclife.svg
+++ b/images/thirdparty-logos/maclife.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/images/thirdparty-logos/wired.svg b/images/thirdparty-logos/wired.svg
index d695c86e71..0638d2b64a 100644
--- a/images/thirdparty-logos/wired.svg
+++ b/images/thirdparty-logos/wired.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/index.php b/index.php
index c5177ac6a9..1607e41fc8 100644
--- a/index.php
+++ b/index.php
@@ -175,37 +175,37 @@
-
+
-
Multitasking View
+
Multitasking View
Workspaces help organize your work by task. Keep work and play separate, but just one swipe or tap away.
-
+
-
Picture-in-Picture
+
Picture-in-Picture
Whether you’re watching a movie, game, or terminal process, Picture-in-Picture helps keep tabs on one thing while working on another.
-
+
-
+
-
+
-
+
-
Do Not Disturb
+
Do Not Disturb
Tune everything else out to stay focused on your work, or keep notifications at bay while watching a movie. Do Not Disturb stops notifications in their tracks.
@@ -218,19 +218,19 @@
elementary OS comes with a carefully considered set of apps that cater to everyday needs so you can spend more time using your computer and less time cleaning up bloatware.
From 096ec0b8a7d6a03b4bfdf06674444f9c3c4645c2 Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Sun, 4 Oct 2026 16:59:19 +0100
Subject: [PATCH 2/8] a11y: target specific elements for `updateDownloadButton`
call, to avoid marking #choice-buttons as a clickable element
---
_scripts/pages/download.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/_scripts/pages/download.js b/_scripts/pages/download.js
index dfc254ac60..5ef9c08dc6 100644
--- a/_scripts/pages/download.js
+++ b/_scripts/pages/download.js
@@ -93,7 +93,7 @@ Promise.all([config, jQuery, openDownloadOverlay]).then(([config, $, openDownloa
$('#download').text(translateDownload)
}
}
- $('#choice-buttons').on('click', updateDownloadButton)
+ $('#choice-buttons button').on('click', updateDownloadButton)
$('#choice-buttons input').on('input', updateDownloadButton)
updateDownloadButton()
From a9bb65d3b556d4e4b8bb9eb7396194f29dea328a Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Sun, 4 Oct 2026 17:30:59 +0100
Subject: [PATCH 3/8] a11y: allow showcase section to be fully navigable with
tab+space
---
_scripts/widgets/showcase.js | 32 +++++++++++++++++++++++++++++---
index.php | 20 ++++++++++----------
2 files changed, 39 insertions(+), 13 deletions(-)
diff --git a/_scripts/widgets/showcase.js b/_scripts/widgets/showcase.js
index e6146f146c..a602ae58d0 100644
--- a/_scripts/widgets/showcase.js
+++ b/_scripts/widgets/showcase.js
@@ -31,6 +31,7 @@ export default class Showcase {
this.index = options.index || '#showcase-index'
this.slides = options.slides || []
this.fixed = options.fixed || false
+ this.timeout = false
this.current = null
}
@@ -46,7 +47,7 @@ export default class Showcase {
const $iChoice = $("[aria-controls='" + n + "']", this.container)
const $iContainer = $('#' + n, this.container)
- $iContainer.prepend('')
+ $iContainer.prepend('')
// each choice button
const that = this
@@ -109,10 +110,22 @@ export default class Showcase {
}
})
+ // we want to only mark them as hidden after some time has elapsed
+ // this allows us to keep the slide height animation
+ let $targetsToHide = [];
+ let $targetToFocus = false;
+
if (rSlide === 'index') {
$(this.index, this.container).addClass('active').attr('hidden', false)
+ if (this.current) {
+ $targetToFocus = $('button[aria-controls="' + this.current + '"]')
+ }
+ else {
+ $targetToFocus = $(this.index)
+ }
} else {
- $(this.index, this.container).removeClass('active').attr('hidden', true)
+ $(this.index, this.container).removeClass('active')
+ $targetsToHide.push($(this.index, this.container))
}
// iterates through slides based on this.slides
@@ -122,8 +135,12 @@ export default class Showcase {
if (n === rSlide) { // if correct slide
$n.addClass('active').attr('hidden', false)
+ $n.find('.showcase-back').attr('tabindex', 0)
+ $targetToFocus = $n
} else {
- $n.removeClass('active').attr('hidden', true)
+ $n.removeClass('active')
+ $n.find('.showcase-back').attr('tabindex', -1)
+ $targetsToHide.push($n)
}
}
@@ -139,6 +156,15 @@ export default class Showcase {
}
this.resize() // resize the container
+
+ // hide and focus roughly after animations are complete
+ clearTimeout(this.timeout)
+ this.timeout = setTimeout(function() {
+ for (const $target of $targetsToHide) {
+ $target.attr('hidden', true)
+ }
+ $targetToFocus.focus()
+ }, 500)
}
/**
diff --git a/index.php b/index.php
index 1607e41fc8..a701e59fa1 100644
--- a/index.php
+++ b/index.php
@@ -230,7 +230,7 @@
-
+
@@ -242,7 +242,7 @@
-
+
@@ -254,7 +254,7 @@
-
+
@@ -266,7 +266,7 @@
-
+
@@ -278,7 +278,7 @@
-
+
@@ -290,7 +290,7 @@
-
+
@@ -302,7 +302,7 @@
-
+
@@ -314,7 +314,7 @@
-
+
@@ -328,7 +328,7 @@
-
+
@@ -340,7 +340,7 @@
-
+
From 15d703dd085d9d72e8648b11c728bd30a527d6f5 Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Sun, 4 Oct 2026 23:29:25 +0100
Subject: [PATCH 4/8] a11y: properly hide extra tabs in showcase section a11y:
increase snappiness of showcase focusing by using `transitionend` showcase:
const some reused selectors
---
_scripts/widgets/showcase.js | 60 +++++++++++++++++++++++++++---------
_styles/home.css | 1 -
2 files changed, 45 insertions(+), 16 deletions(-)
diff --git a/_scripts/widgets/showcase.js b/_scripts/widgets/showcase.js
index a602ae58d0..5594d27aa8 100644
--- a/_scripts/widgets/showcase.js
+++ b/_scripts/widgets/showcase.js
@@ -31,7 +31,6 @@ export default class Showcase {
this.index = options.index || '#showcase-index'
this.slides = options.slides || []
this.fixed = options.fixed || false
- this.timeout = false
this.current = null
}
@@ -99,8 +98,10 @@ export default class Showcase {
return console.error("could not find requested slide '" + rSlide + "'") // log an error
}
+ const $container = $(this.container)
+
// update aria-expanded to alert which slide is active
- $(this.container).find('button[aria-controls]').each(function() {
+ $container.find('button[aria-controls]').each(function() {
const $button = $(this)
if ($button.attr('aria-controls') === rSlide) {
$button.attr('aria-expanded', true)
@@ -115,17 +116,50 @@ export default class Showcase {
let $targetsToHide = [];
let $targetToFocus = false;
+ /**
+ * unhide a specific jQuery element
+ *
+ * we first set the hidden attribute to false, so that the DOM tree
+ * can update. we then set the active class on the next frame to allow
+ * the animation to play nicely
+ *
+ * @param {*} $target
+ */
+ const unhide = function($target) {
+ $target.attr('hidden', false)
+ requestAnimationFrame(function() {
+ $target.addClass('active')
+ })
+ $target.find('.showcase-back').attr('tabindex', 0)
+ }
+
+ /**
+ * hide a specific jQuery element
+ *
+ * we don't need to worry about any animation frames here!
+ *
+ * @param {*} $target
+ */
+ const hide = function($target) {
+ $target.removeClass('active')
+ $target.find('.showcase-back').attr('tabindex', -1)
+ $targetsToHide.push($target)
+ }
+
+ const $indexSlide = $(this.index, this.container)
+
if (rSlide === 'index') {
- $(this.index, this.container).addClass('active').attr('hidden', false)
+ unhide($indexSlide)
+
if (this.current) {
+ // focus the previous button when returning to the index
$targetToFocus = $('button[aria-controls="' + this.current + '"]')
}
else {
$targetToFocus = $(this.index)
}
} else {
- $(this.index, this.container).removeClass('active')
- $targetsToHide.push($(this.index, this.container))
+ hide($indexSlide)
}
// iterates through slides based on this.slides
@@ -134,37 +168,33 @@ export default class Showcase {
const $n = $('#' + n, this.container) // current iterated slide
if (n === rSlide) { // if correct slide
- $n.addClass('active').attr('hidden', false)
- $n.find('.showcase-back').attr('tabindex', 0)
+ unhide($n)
$targetToFocus = $n
} else {
- $n.removeClass('active')
- $n.find('.showcase-back').attr('tabindex', -1)
- $targetsToHide.push($n)
+ hide($n)
}
}
this.current = rSlide
- $(this.container).trigger('change', {
+ $container.trigger('change', {
active: rSlide
})
if (this.current !== 'index') {
$('body').animate({
- scrollTop: $(this.container).offset().top
+ scrollTop: $container.offset().top
}, 100)
}
this.resize() // resize the container
// hide and focus roughly after animations are complete
- clearTimeout(this.timeout)
- this.timeout = setTimeout(function() {
+ $container.one('transitionend', function() {
for (const $target of $targetsToHide) {
$target.attr('hidden', true)
}
$targetToFocus.focus()
- }, 500)
+ })
}
/**
diff --git a/_styles/home.css b/_styles/home.css
index 8aaea7f167..5c92322b98 100644
--- a/_styles/home.css
+++ b/_styles/home.css
@@ -165,7 +165,6 @@ input:focus + .focus-reveal {
}
#showcase > div {
- display: block;
margin: auto;
width: 100%;
padding: 0 24px;
From aa9c91fd6c1586917bba35dd3c9ff796e85020f9 Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Sat, 10 Oct 2026 13:19:01 +0100
Subject: [PATCH 5/8] a11y: mark icons in each showcase section as aria-hidden
---
index.php | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/index.php b/index.php
index a701e59fa1..8fe092e12b 100644
--- a/index.php
+++ b/index.php
@@ -234,7 +234,7 @@
-
+
Music
Organize and listen to your music. Browse by album, use lightning-fast search, and build playlists of your favorites.
@@ -244,7 +244,7 @@
-
+
@@ -258,7 +258,7 @@
-
+
Mail
Manage multiple accounts quickly and effortlessly with conversation-based email, fast-as-you-type search, new email notifications, and more.
@@ -270,7 +270,7 @@
-
+
Photos
Import, organize, and edit photos. Make a slideshow. Share with online services.
@@ -282,7 +282,7 @@
-
+
Videos
Smart and simple video viewing with a library, thumbnail previews on the seekbar, playlists, subtitle support, smart fullscreen, and the ability to resume what was last playing.
@@ -294,7 +294,7 @@
-
+
Calendar
Easily view and create events. Sync with online accounts.
@@ -306,7 +306,7 @@
-
+
Files
The smart pathbar makes it easy to browse with breadcrumbs, search, or path completion. Quickly navigate with the column view and enjoy browser-class tabs with smart features like tab history.
@@ -320,7 +320,7 @@
-
+
Terminal
Switchable color schemes designed to prevent eye strain, browser-class tabs with history and smart naming, task-completion notifications, natural copy & paste, backlog search, paste protection, and more. Who says you can’t teach an old app new tricks?
@@ -332,7 +332,7 @@
-
+
Code
Tailor-made with autosaving, project folders, Git integration, smart whitespace, EditorConfig support, Mini Map, Vala symbols, and extensions like Markdown shortcuts and Vim Emulation. Code will be the last editor you’ll ever need.
@@ -344,7 +344,7 @@
-
+
Camera
Easily snap pictures or video from your built-in or USB webcam.
From edef648b080ee2e12bffcb6f3a4ee2d6db26343b Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Thu, 15 Oct 2026 11:41:27 +0100
Subject: [PATCH 6/8] showcase: update markup from
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -244,9 +244,9 @@
-
+
-
+
Web
Surf the web with a fast & lightweight web browser. Web lets you use modern sites and web apps while protecting your privacy and being lighter on battery life.
From 795931eaea65f06c55a5a3d81851a02a91073cdd Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Thu, 15 Oct 2026 11:46:49 +0100
Subject: [PATCH 7/8] logotype: remove "logo" from title as unnecessary for
screenreaders
---
images/logotype-os.svg | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/images/logotype-os.svg b/images/logotype-os.svg
index 865236806b..5b8e56f98f 100644
--- a/images/logotype-os.svg
+++ b/images/logotype-os.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
From 97f2a1dab47ccfa7d3f4524dd9aa6b3314e0724e Mon Sep 17 00:00:00 2001
From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com>
Date: Sat, 17 Oct 2026 15:01:16 +0100
Subject: [PATCH 8/8] showcase: apply aria-hidden to icons on each button
---
index.php | 20 ++++++++++----------
1 file changed, 10 insertions(+), 10 deletions(-)
diff --git a/index.php b/index.php
index f540e318b1..15192838a8 100644
--- a/index.php
+++ b/index.php
@@ -218,16 +218,16 @@
elementary OS comes with a carefully considered set of apps that cater to everyday needs so you can spend more time using your computer and less time cleaning up bloatware.
+
Music
Web
Mail
Photos
Videos
Calendar
Files
Terminal
Code
Camera
@@ -328,7 +328,7 @@
