Accessibility improvements

Update configuration.md

docs/configuration.md

@@ -356,7 +356,7 @@ pages:
 ### Properties
 | Name | Type | Required | Default |
 | ---- | ---- | -------- | ------- |
-| title | string | yes | |
+| name | string | yes | |
 | slug | string | no | |
 | width | string | no | |
 | center-vertically | boolean | no | false |
@@ -374,7 +374,7 @@ The URL friendly version of the title which is used to access the page. For exam
 #### `width`
 The maximum width of the page on desktop. Possible values are `slim` and `wide`.
 
-* default: `1600px`
+* default: `1600px` (when no value is specified)
 * slim: `1100px`
 * wide: `1920px`
 
@@ -1311,7 +1311,7 @@ headers:
 When set to `true`, removes the border and padding around the widget.
 
 ##### `template`
-The template that will be used to display the data. It relies on Go's `html/template` package so it's recommended to go through [its documentation](https://pkg.go.dev/text/template) to understand how to do basic things such as conditionals, loops, etc. In addition, it also uses [tidwall's gjson](https://pkg.go.dev/github.com/tidwall/gjson) package to parse the JSON data so it's worth going through its documentation if you want to use more advanced JSON selectors. You can view additional examples with explanations and function definitions [here](custom-api.md).
+The template that will be used to display the data. It relies on Go's `html/template` package so it's recommended to go through [its documentation](https://pkg.go.dev/text/template) to understand how to do basic things such as conditionals, loops, etc. In addition, it also uses [tidwall's gjson](https://github.com/tidwall/gjson) package to parse the JSON data so it's worth going through its documentation if you want to use more advanced JSON selectors. You can view additional examples with explanations and function definitions [here](custom-api.md).
 
 ### Extension
 Display a widget provided by an external source (3rd party). If you want to learn more about developing extensions, checkout the [extensions documentation](extensions.md) (WIP).
@@ -1608,7 +1608,7 @@ services:
   glance:
     image: glanceapp/glance
     environment:
-      - GITHUB_TOKEN: <your token>
+      - GITHUB_TOKEN=<your token>
 ```
 
 and then use it in your `glance.yml` like this:

docs/themes.md

@@ -53,6 +53,16 @@ theme:
   primary-color: 97 13 80
 ```
 
+### Gruvbox Dark
+![screenshot](images/themes/gruvbox.png)
+```yaml
+theme:
+  background-color: 0 0 16
+  primary-color: 43 59 81
+  positive-color: 61 66 44
+  negative-color: 6 96 59
+```
+
 ### Kanagawa Dark
 ![screenshot](images/themes/kanagawa-dark.png)
 ```yaml

internal/glance/config.go

@@ -242,7 +242,7 @@ func configFilesWatcher(
 	// needed for lastContents and lastIncludes because they get updated in multiple goroutines
 	mu := sync.Mutex{}
 
-	checkForContentChangesBeforeCallback := func() {
+	parseAndCompareBeforeCallback := func() {
 		currentContents, currentIncludes, err := parseYAMLIncludes(mainFilePath)
 		if err != nil {
 			onErr(fmt.Errorf("parsing main file contents for comparison: %w", err))
@@ -268,15 +268,22 @@ func configFilesWatcher(
 
 	const debounceDuration = 500 * time.Millisecond
 	var debounceTimer *time.Timer
-	debouncedCallback := func() {
+	debouncedParseAndCompareBeforeCallback := func() {
 		if debounceTimer != nil {
 			debounceTimer.Stop()
 			debounceTimer.Reset(debounceDuration)
 		} else {
-			debounceTimer = time.AfterFunc(debounceDuration, checkForContentChangesBeforeCallback)
+			debounceTimer = time.AfterFunc(debounceDuration, parseAndCompareBeforeCallback)
 		}
 	}
 
+	deleteLastInclude := func(filePath string) {
+		mu.Lock()
+		defer mu.Unlock()
+		fileAbsPath, _ := filepath.Abs(filePath)
+		delete(lastIncludes, fileAbsPath)
+	}
+
 	go func() {
 		for {
 			select {
@@ -285,16 +292,33 @@ func configFilesWatcher(
 					return
 				}
 				if event.Has(fsnotify.Write) {
-					debouncedCallback()
+					debouncedParseAndCompareBeforeCallback()
-				} else if event.Has(fsnotify.Remove) {
+				} else if event.Has(fsnotify.Rename) {
-					func() {
+					// on linux the file will no longer be watched after a rename, on windows
-						mu.Lock()
+					// it will continue to be watched with the new name but we have no access to
-						defer mu.Unlock()
+					// the new name in this event in order to stop watching it manually and match the
-						fileAbsPath, _ := filepath.Abs(event.Name)
+					// behavior in linux, may lead to weird unintended behaviors on windows as we're
-						delete(lastIncludes, fileAbsPath)
+					// only handling renames from linux's perspective
-					}()
+					// see https://github.com/fsnotify/fsnotify/issues/255
 
-					debouncedCallback()
+					// remove the old file from our manually tracked includes, calling
+					// debouncedParseAndCompareBeforeCallback will re-add it if it's still
+					// required after it triggers
+					deleteLastInclude(event.Name)
+
+					// wait for file to maybe get created again
+					// see https://github.com/glanceapp/glance/pull/358
+					for i := 0; i < 10; i++ {
+						if _, err := os.Stat(event.Name); err == nil {
+							break
+						}
+						time.Sleep(200 * time.Millisecond)
+					}
+
+					debouncedParseAndCompareBeforeCallback()
+				} else if event.Has(fsnotify.Remove) {
+					deleteLastInclude(event.Name)
+					debouncedParseAndCompareBeforeCallback()
 				}
 			case err, isOpen := <-watcher.Errors:
 				if !isOpen {

internal/glance/glance.go

@@ -68,7 +68,7 @@ func newApplication(config *config) (*application, error) {
 
 			for w := range column.Widgets {
 				widget := column.Widgets[w]
-				app.widgetByID[widget.id()] = widget
+				app.widgetByID[widget.GetID()] = widget
 
 				widget.setProviders(providers)
 			}

internal/glance/static/js/main.js

@@ -284,7 +284,9 @@ function setupGroups() {
 
                 for (let i = 0; i < titles.length; i++) {
                     titles[i].classList.remove("widget-group-title-current");
+                    titles[i].setAttribute("aria-selected", "false");
                     tabs[i].classList.remove("widget-group-content-current");
+                    tabs[i].setAttribute("aria-hidden", "true");
                 }
 
                 if (current < t) {
@@ -296,7 +298,9 @@ function setupGroups() {
                 current = t;
 
                 title.classList.add("widget-group-title-current");
+                title.setAttribute("aria-selected", "true");
                 tabs[t].classList.add("widget-group-content-current");
+                tabs[t].setAttribute("aria-hidden", "false");
             });
         }
     }
@@ -670,6 +674,7 @@ async function setupPage() {
         setupLazyImages();
     } finally {
         pageElement.classList.add("content-ready");
+        pageElement.setAttribute("aria-busy", "false");
 
         for (let i = 0; i < contentReadyCallbacks.length; i++) {
             contentReadyCallbacks[i]();

internal/glance/static/main.css

@@ -110,7 +110,7 @@
 .visited-indicator:not(.text-truncate)::after,
 .visited-indicator.text-truncate::before,
 .bookmarks-link:not(.bookmarks-link-no-arrow)::after {
-    content: '↗';
+    content: '↗' / "";
     margin-left: 0.5em;
     display: inline-block;
     position: relative;
@@ -189,7 +189,7 @@
 }
 
 .expand-toggle-button-icon::before {
-    content: '';
+    content: '' / "";
     font-size: 0.8rem;
     transform: rotate(90deg);
     line-height: 1;
@@ -341,6 +341,19 @@ html, body, .body-content {
     height: 100%;
 }
 
+h1, h2, h3, h4, h5 {
+    font: inherit;
+}
+
+.visually-hidden {
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
 a {
     text-decoration: none;
     color: inherit;
@@ -563,7 +576,7 @@ kbd:active {
 }
 
 .summary::after {
-    content: "◀";
+    content: "◀" / "";
     font-size: 1.2em;
     position: absolute;
     top: 0;
@@ -822,7 +835,7 @@ details[open] .summary::after {
 }
 
 .list-horizontal-text > *:not(:last-child)::after {
-    content: '•';
+    content: '•' / "";
     color: var(--color-text-subdue);
     margin: 0 0.4rem;
     position: relative;

internal/glance/templates/dns-stats.html

@@ -76,7 +76,7 @@
         <summary class="summary">Top blocked domains</summary>
         <ul class="list list-gap-4 list-with-transition size-h5">
             {{ range .Stats.TopBlockedDomains }}
-            <li class="flex justify-between">
+            <li class="flex justify-between gap-10">
                 <div class="text-truncate rtl">{{ .Domain }}</div>
                 <div class="text-right" style="width: 4rem;"><span class="color-highlight">{{ .PercentBlocked }}</span>%</div>
             </li>

internal/glance/templates/group.html

@@ -4,17 +4,18 @@
 
 {{ define "widget-content" }}
 <div class="widget-group-header">
-    <div class="widget-header gap-20">
+    <div class="widget-header gap-20" role="tablist">
-        {{ range $i, $widget := .Widgets }}
+        {{- range $i, $widget := .Widgets }}
-            <button class="widget-group-title{{ if eq $i 0 }} widget-group-title-current{{ end }}"{{ if ne "" .TitleURL }} data-title-url="{{ .TitleURL }}"{{ end }}>{{ $widget.Title }}</button>
+        <button class="widget-group-title{{ if eq $i 0 }} widget-group-title-current{{ end }}"{{ if ne "" .TitleURL }} data-title-url="{{ .TitleURL }}"{{ end }} aria-selected="{{ if eq $i 0 }}true{{ else }}false{{ end }}" arial-level="2" role="tab" aria-controls="widget-{{ .GetID }}-tabpanel-{{ $i }}" id="widget-{{ .GetID }}-tab-{{ $i }}">{{ $widget.Title }}</button>
-        {{ end }}
+        {{- end }}
     </div>
 </div>
 
 <div class="widget-group-contents">
-{{ range $i, $widget := .Widgets }}
+{{- range $i, $widget := .Widgets }}
-    <div class="widget-group-content{{ if eq $i 0 }} widget-group-content-current{{ end }}">{{ .Render }}</div>
+    <div class="widget-group-content{{ if eq $i 0 }} widget-group-content-current{{ end }}" id="widget-{{ .GetID }}-tabpanel-{{ $i }}" role="tabpanel" aria-labelledby="widget-{{ .GetID }}-tab-{{ $i }}" aria-hidden="{{ if eq $i 0 }}false{{ else }}true{{ end }}">
-{{ end }}
+        {{- .Render -}}
+    </div>
+{{- end }}
 </div>
-
 {{ end }}

internal/glance/templates/page.html

@@ -25,7 +25,7 @@
 
 {{ define "navigation-links" }}
 {{ range .App.Config.Pages }}
-<a href="{{ $.App.Config.Server.BaseURL }}/{{ .Slug }}" class="nav-item{{ if eq .Slug $.Page.Slug }} nav-item-current{{ end }}">{{ .Title }}</a>
+<a href="{{ $.App.Config.Server.BaseURL }}/{{ .Slug }}" class="nav-item{{ if eq .Slug $.Page.Slug }} nav-item-current{{ end }}"{{ if eq .Slug $.Page.Slug }} aria-current="page"{{ end }}>{{ .Title }}</a>
 {{ end }}
 {{ end }}
 
@@ -35,10 +35,10 @@
     <div class="header-container content-bounds">
         <div class="header flex padding-inline-widget widget-content-frame">
             <!-- TODO: Replace G with actual logo, first need an actual logo -->
-            <div class="logo">{{ if ne "" .App.Config.Branding.LogoURL }}<img src="{{ .App.Config.Branding.LogoURL }}" alt="">{{ else if ne "" .App.Config.Branding.LogoText }}{{ .App.Config.Branding.LogoText }}{{ else }}G{{ end }}</div>
+            <div class="logo" aria-hidden="true">{{ if ne "" .App.Config.Branding.LogoURL }}<img src="{{ .App.Config.Branding.LogoURL }}" alt="">{{ else if ne "" .App.Config.Branding.LogoText }}{{ .App.Config.Branding.LogoText }}{{ else }}G{{ end }}</div>
-            <div class="nav flex grow">
+            <nav class="nav flex grow">
                 {{ template "navigation-links" . }}
-            </div>
+            </nav>
         </div>
     </div>
     {{ end }}
@@ -57,17 +57,19 @@
     </div>
 
     <div class="content-bounds grow">
-        <div class="page" id="page">
+        <main class="page" id="page" aria-live="polite" aria-busy="true">
+            <h1 class="visually-hidden">{{ .Page.Title }}</h1>
             <div class="page-content" id="page-content"></div>
             <div class="page-loading-container">
                 <!-- TODO: add a bigger/better loading indicator -->
-                <div class="loading-icon"></div>
+                 <div class="visually-hidden">Loading</div>
-            </div>
+                <div class="loading-icon" aria-hidden="true"></div>
             </div>
+        </main>
     </div>
 
     {{ if not .App.Config.Branding.HideFooter }}
-    <div class="footer flex items-center flex-column">
+    <footer class="footer flex items-center flex-column">
     {{ if eq "" .App.Config.Branding.CustomFooter }}
         <div>
             <a class="size-h3" href="https://github.com/glanceapp/glance" target="_blank" rel="noreferrer">Glance</a> {{ if ne "dev" .App.Version }}<a class="visited-indicator" title="Release notes" href="https://github.com/glanceapp/glance/releases/tag/{{ .App.Version }}" target="_blank" rel="noreferrer">{{ .App.Version }}</a>{{ else }}({{ .App.Version }}){{ end }}
@@ -75,7 +77,7 @@
     {{ else }}
         {{ .App.Config.Branding.CustomFooter }}
     {{ end }}
-    </div>
+    </footer>
     {{ end }}
 
     <div class="mobile-navigation-offset"></div>

internal/glance/templates/widget-base.html

@@ -2,9 +2,9 @@
     {{- if not .HideHeader}}
     <div class="widget-header">
         {{- if ne "" .TitleURL }}
-        <a href="{{ .TitleURL | safeURL }}" target="_blank" rel="noreferrer" class="uppercase">{{ .Title }}</a>
+        <h2><a href="{{ .TitleURL | safeURL }}" target="_blank" rel="noreferrer" class="uppercase">{{ .Title }}</a></h2>
         {{- else }}
-        <div class="uppercase">{{ .Title }}</div>
+        <h2 class="uppercase">{{ .Title }}</h2>
         {{- end }}
         {{- if .IsWIP }}
         <div data-popover-type="html" data-popover-position="above">

internal/glance/widget-docker-containers.go

@@ -241,7 +241,7 @@ func isDockerContainerHidden(container *dockerContainerJsonResponse, hideByDefau
 
 func fetchAllDockerContainersFromSock(socketPath string) ([]dockerContainerJsonResponse, error) {
 	client := &http.Client{
-		Timeout: 3 * time.Second,
+		Timeout: 5 * time.Second,
 		Transport: &http.Transport{
 			DialContext: func(_ context.Context, _, _ string) (net.Conn, error) {
 				return net.Dial("unix", socketPath)

internal/glance/widget-markets.go

@@ -124,6 +124,7 @@ func fetchMarketsDataFromYahoo(marketRequests []marketRequest) (marketList, erro
 
 	for i := range marketRequests {
 		request, _ := http.NewRequest("GET", fmt.Sprintf("https://query1.finance.yahoo.com/v8/finance/chart/%s?range=1mo&interval=1d", marketRequests[i].Symbol), nil)
+		setBrowserUserAgentHeader(request)
 		requests = append(requests, request)
 	}
 
@@ -165,8 +166,7 @@ func fetchMarketsDataFromYahoo(marketRequests []marketRequest) (marketList, erro
 
 		points := svgPolylineCoordsFromYValues(100, 50, maybeCopySliceWithoutZeroValues(prices))
 
-		currency, exists := currencyToSymbol[response.Chart.Result[0].Meta.Currency]
+		currency, exists := currencyToSymbol[strings.ToUpper(response.Chart.Result[0].Meta.Currency)]
-
 		if !exists {
 			currency = response.Chart.Result[0].Meta.Currency
 		}

internal/glance/widget-utils.go

@@ -8,8 +8,11 @@ import (
 	"errors"
 	"fmt"
 	"io"
+	"math/rand/v2"
 	"net/http"
+	"strconv"
 	"sync"
+	"sync/atomic"
 	"time"
 )
 
@@ -35,8 +38,15 @@ type requestDoer interface {
 	Do(*http.Request) (*http.Response, error)
 }
 
+var userAgentPersistentVersion atomic.Int32
+
 func setBrowserUserAgentHeader(request *http.Request) {
-	request.Header.Set("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0")
+	if rand.IntN(2000) == 0 {
+		userAgentPersistentVersion.Store(rand.Int32N(5))
+	}
+
+	version := strconv.Itoa(130 + int(userAgentPersistentVersion.Load()))
+	request.Header.Set("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:"+version+".0) Gecko/20100101 Firefox/"+version+".0")
 }
 
 func decodeJsonFromRequest[T any](client requestDoer, request *http.Request) (T, error) {

internal/glance/widget.go

@@ -121,13 +121,13 @@ type widget interface {
 	// These need to be exported because they get called in templates
 	Render() template.HTML
 	GetType() string
+	GetID() uint64
 
 	initialize() error
 	requiresUpdate(*time.Time) bool
 	setProviders(*widgetProviders)
 	update(context.Context)
 	setID(uint64)
-	id() uint64
 	handleRequest(w http.ResponseWriter, r *http.Request)
 	setHideHeader(bool)
 }
@@ -184,7 +184,7 @@ func (w *widgetBase) update(ctx context.Context) {
 
 }
 
-func (w *widgetBase) id() uint64 {
+func (w *widgetBase) GetID() uint64 {
 	return w.ID
 }
 

pkg/sysinfo/sysinfo.go

@@ -202,7 +202,8 @@ func Collect(req *SystemInfoRequest) (*SystemInfo, []error) {
 	// keeps returning a single sensor with key "ACPI\\ThermalZone\\TZ00_0" which
 	// doesn't seem to be the CPU sensor or correspond to anything useful when
 	// compared against the temperatures Libre Hardware Monitor reports
-	if runtime.GOOS != "windows" {
+	// also disabled on openbsd because it's not implemented by go-psutil
+	if runtime.GOOS != "windows" && runtime.GOOS != "openbsd" {
 		sensorReadings, err := sensors.SensorsTemperatures()
 		if err == nil {
 			if req.CPUTempSensor != "" {