From deb7e0f73b6c39b09edc19d8db6b3bca801ffbd0 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 11 Apr 2026 15:57:50 +0100 Subject: [PATCH] =?UTF-8?q?=E2=99=BF=20A11y=20mode=20for=20status=20indica?= =?UTF-8?q?tors=20(#1957,=20#1276)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a new config option (`appConfig.statusCheckAccessibility`) which will display status check indicators as distinct shapes, for easier distinction for colorblind users. --- docs/configuring.md | 1 + docs/status-indicators.md | 14 +++++++++++++ src/components/LinkItems/StatusIndicator.vue | 22 +++++++++++++++++++- src/utils/ConfigSchema.json | 6 ++++++ 4 files changed, 42 insertions(+), 1 deletion(-) diff --git a/docs/configuring.md b/docs/configuring.md index c80adfbe..b8d3795a 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -108,6 +108,7 @@ For more info, see the[Multi-Page docs](/docs/pages-and-sections.md#multi-page-s **`defaultOpeningMethod`** | `enum` | _Optional_ | The default opening method for items, if no `target` is specified for a given item. Can be either `newtab`, `sametab`, `modal`, `workspace`, `clipboard`, `top` or `parent`. Defaults to `newtab` **`statusCheck`** | `boolean` | _Optional_ | When set to `true`, Dashy will ping each of your services and display their status as a dot next to each item. This can be overridden by setting `statusCheck` under each item. Defaults to `false` **`statusCheckInterval`** | `number` | _Optional_ | The number of seconds between checks. If set to `0` then service will only be checked on initial page load, which is usually the desired functionality. If value is less than `10` you may experience a hit in performance. Defaults to `0` +**`statusCheckAccessibility`** | `boolean` | _Optional_ | When set to `true`, status indicators will use distinct shapes to indicate status for color-blind users. Defaults to `false` **`webSearch`** | `object` | _Optional_ | Configuration options for the web search feature, set your default search engine, opening method or disable web search. See [`webSearch`](#appconfigwebsearch-optional) **`backgroundImg`** | `string` | _Optional_ | Path to an optional full-screen app background image. This can be either remote (http) or local (relative to /app/public/item-icons/ inside the container). Note that this will slow down initial load **`enableFontAwesome`** | `boolean` | _Optional_ | If set to `true` font-awesome will be loaded, if set to `false` they will not be. if left blank font-awesome will be enabled only if required by 1 or more icons diff --git a/docs/status-indicators.md b/docs/status-indicators.md index 80993fc2..9cc484d4 100644 --- a/docs/status-indicators.md +++ b/docs/status-indicators.md @@ -100,6 +100,20 @@ For further troubleshooting, use an application like [Postman](https://postman.c If you're serving Dashy though a CDN, instead of using the Node server or Docker image, then the Node endpoint that makes requests will not be available to you, and all requests will fail. A workaround for this may be implemented in the future, but in the meantime, your only option is to use the Docker or Node deployment method. +## Color-Blind Accessibility + +The default indicators rely on color alone to illustrate status (green, yellow, red and grey). For greater visual distinction and colorblind support, the accessibility mode will use shapes instead of dots to show status. This can be enabled by setting `appConfig.statusCheckAccessibility: true`. + +By default, this will be: circle (online), square (offline), triangle (checking) and diamond (timed out). + +```yaml +appConfig: + statusCheck: true + statusCheckAccessibility: true +``` + +Alternatively, you can set your own colors for status indicators, with these variables: `--success`, `--warning`, `--danger`, see: [modifying theme colors](/docs/theming.md#modifying-theme-colors). + ## How it Works When the app is loaded, if `appConfig.statusCheck: true` is set, or if any items have the `statusCheck: true` enabled, then Dashy will make a request, to `https://[your-host-name]/status-check?url=[address-or-servce]` (may al include GET params for headers and the secure flag), which in turn will ping that running service, and respond with a status code. Response time is calculated from the difference between start and end time of the request. diff --git a/src/components/LinkItems/StatusIndicator.vue b/src/components/LinkItems/StatusIndicator.vue index c4d6b2d6..d8f38f67 100644 --- a/src/components/LinkItems/StatusIndicator.vue +++ b/src/components/LinkItems/StatusIndicator.vue @@ -5,7 +5,7 @@ classes: ['status-tooltip', `tip-${color()}`], delay: { show: 0, hide: 150 } }"> -
+
@@ -19,6 +19,12 @@ export default { statusText: String, statusSuccess: Boolean, }, + computed: { + /* If true, will use shapes instead of dots for indicator status */ + a11yMode() { + return !!this.$store.getters.appConfig.statusCheckAccessibility; + }, + }, methods: { /* Returns a color, based on success status */ color() { @@ -108,6 +114,20 @@ export default { opacity: 0.4; } } + + &.a11y-mode { + > span { display: none; } + // dot-green stays a circle + &.dot-red { border-radius: 0; } // square + &.dot-yellow { // triangle + border-radius: 0; + clip-path: polygon(50% 0%, 0% 100%, 100% 100%); + } + &.dot-grey { // diamond + border-radius: 0; + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); + } + } } diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index 87d27092..f1a4827f 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -223,6 +223,12 @@ "default": 0, "description": "How often to recheck statuses. If set to 0, status will only be checked on page load" }, + "statusCheckAccessibility": { + "title": "Status Check Accessibility Mode", + "type": "boolean", + "default": false, + "description": "If enabled, status indicators will use distinct shapes (in addition to color) for better color-blind accessibility" + }, "language": { "title": "Language", "type": "string",