Add labels for WebSocket indicator

allinurl · Dec 4, 2024 · dcef3f1 · dcef3f1
1 parent 0806e0c
commit dcef3f1
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 40 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -687,15 +687,17 @@ GoAccess.Nav = {
 		$$('.nav-ws-status', function (item) {
 			item.classList.remove('fa-circle');
 			item.classList.add('fa-stop');
-			item.setAttribute('title', 'Disconnected');
+			item.setAttribute('aria-label', GoAccess.i18n.websocket_disconnected);
+			item.setAttribute('title', GoAccess.i18n.websocket_disconnected);
 		});
 	},
 
 	WSOpen: function (str) {
 		$$('.nav-ws-status', function (item) {
 			item.classList.remove('fa-stop');
 			item.classList.add('fa-circle');
-			item.setAttribute('title', 'Connected to ' + str);
+			item.setAttribute('aria-label', `${GoAccess.i18n.websocket_connected} (${str})`);
+			item.setAttribute('title', `${GoAccess.i18n.websocket_connected} (${str})`);
 		});
 	},
 

diff --git a/resources/tpls.html b/resources/tpls.html
@@ -206,7 +206,7 @@ <h2 id="{{id}}" class="gheader">{{head}}</h2>
 <script id="tpl-nav-wrap" type="text/template">
 	<button type="button"class="nav-bars" aria-label="{{ button_menu }}"><i class="fa fa-bars" aria-hidden="true"></i></button>
 	<button type="button"class="nav-gears" aria-label="{{ button_settings }}"><i class="fa fa-cog" aria-hidden="true"></i></button>
-	<i class="nav-ws-status fa fa-stop"></i>
+	<i class="nav-ws-status fa fa-stop" aria-live="polite" aria-label="{{ websocket_disconnected }}" title="{{ websocket_disconnected }}"></i>
 	<div class="nav-list"></div>
 	<div class="powered hidden-xs hidden-sm">by <a href="https://goaccess.io/">GoAccess</a> <span>v{{version}}</span> and <a href="https://gwsocket.io/">GWSocket</a></div>
 </script>

diff --git a/src/labels.h b/src/labels.h
@@ -589,9 +589,13 @@
   N_("783 - Unexpected Token: The request includes a JSON syntax error")
 
 /* Menu buttons */
-#define HTML_REPORT_NAV_BUTTON_MENU             \
+#define HTML_REPORT_NAV_BUTTON_MENU                 \
 N_("Menu")
-#define HTML_REPORT_NAV_BUTTON_SETTINGS         \
+#define HTML_REPORT_NAV_BUTTON_SETTINGS             \
 N_("Settings")
+#define HTML_REPORT_WEBSOCKET_STATUS_CONNECTED      \
+N_("WebSocket Status: Connected")
+#define HTML_REPORT_WEBSOCKET_STATUS_DISCONNECTED   \
+N_("WebSocket Status: Disconnected")
 
 #endif // for #ifndef LABELS_H
diff --git a/src/output.c b/src/output.c
@@ -1128,41 +1128,43 @@ print_json_i18n_def (FILE *fp) {
 
   /* *INDENT-OFF* */
   static const char *json_i18n[][2] = {
-    {"theme"          , HTML_REPORT_NAV_THEME}          ,
-    {"dark_gray"      , HTML_REPORT_NAV_DARK_GRAY}      ,
-    {"bright"         , HTML_REPORT_NAV_BRIGHT}         ,
-    {"dark_blue"      , HTML_REPORT_NAV_DARK_BLUE}      ,
-    {"dark_purple"    , HTML_REPORT_NAV_DARK_PURPLE}    ,
-    {"panels"         , HTML_REPORT_NAV_PANELS}         ,
-    {"items_per_page" , HTML_REPORT_NAV_ITEMS_PER_PAGE} ,
-    {"tables"         , HTML_REPORT_NAV_TABLES}         ,
-    {"display_tables" , HTML_REPORT_NAV_DISPLAY_TABLES} ,
-    {"ah_small"       , HTML_REPORT_NAV_AH_SMALL}       ,
-    {"ah_small_title" , HTML_REPORT_NAV_AH_SMALL_TITLE} ,
-    {"toggle_panel"   , HTML_REPORT_NAV_TOGGLE_PANEL}   ,
-    {"layout"         , HTML_REPORT_NAV_LAYOUT}         ,
-    {"horizontal"     , HTML_REPORT_NAV_HOR}            ,
-    {"vertical"       , HTML_REPORT_NAV_VER}            ,
-    {"wide"           , HTML_REPORT_NAV_WIDE}           ,
-    {"file_opts"      , HTML_REPORT_NAV_FILE_OPTS}      ,
-    {"export_json"    , HTML_REPORT_NAV_EXPORT_JSON}    ,
-    {"panel_opts"     , HTML_REPORT_PANEL_PANEL_OPTS}   ,
-    {"previous"       , HTML_REPORT_PANEL_PREVIOUS}     ,
-    {"next"           , HTML_REPORT_PANEL_NEXT}         ,
-    {"first"          , HTML_REPORT_PANEL_FIRST}        ,
-    {"last"           , HTML_REPORT_PANEL_LAST}         ,
-    {"chart_opts"     , HTML_REPORT_PANEL_CHART_OPTS}   ,
-    {"chart"          , HTML_REPORT_PANEL_CHART}        ,
-    {"type"           , HTML_REPORT_PANEL_TYPE}         ,
-    {"area_spline"    , HTML_REPORT_PANEL_AREA_SPLINE}  ,
-    {"bar"            , HTML_REPORT_PANEL_BAR}          ,
-    {"wmap"           , HTML_REPORT_PANEL_WMAP}         ,
-    {"plot_metric"    , HTML_REPORT_PANEL_PLOT_METRIC}  ,
-    {"table_columns"  , HTML_REPORT_PANEL_TABLE_COLS}   ,
-    {"thead"          , T_HEAD}                         ,
-    {"version"        , GO_VERSION}                     ,
-    {"button_menu"           , HTML_REPORT_NAV_BUTTON_MENU}               ,
-    {"button_settings"       , HTML_REPORT_NAV_BUTTON_SETTINGS}               ,
+    {"theme"                    , HTML_REPORT_NAV_THEME}                        ,
+    {"dark_gray"                , HTML_REPORT_NAV_DARK_GRAY}                    ,
+    {"bright"                   , HTML_REPORT_NAV_BRIGHT}                       ,
+    {"dark_blue"                , HTML_REPORT_NAV_DARK_BLUE}                    ,
+    {"dark_purple"              , HTML_REPORT_NAV_DARK_PURPLE}                  ,
+    {"panels"                   , HTML_REPORT_NAV_PANELS}                       ,
+    {"items_per_page"           , HTML_REPORT_NAV_ITEMS_PER_PAGE}               ,
+    {"tables"                   , HTML_REPORT_NAV_TABLES}                       ,
+    {"display_tables"           , HTML_REPORT_NAV_DISPLAY_TABLES}               ,
+    {"ah_small"                 , HTML_REPORT_NAV_AH_SMALL}                     ,
+    {"ah_small_title"           , HTML_REPORT_NAV_AH_SMALL_TITLE}               ,
+    {"toggle_panel"             , HTML_REPORT_NAV_TOGGLE_PANEL}                 ,
+    {"layout"                   , HTML_REPORT_NAV_LAYOUT}                       ,
+    {"horizontal"               , HTML_REPORT_NAV_HOR}                          ,
+    {"vertical"                 , HTML_REPORT_NAV_VER}                          ,
+    {"wide"                     , HTML_REPORT_NAV_WIDE}                         ,
+    {"file_opts"                , HTML_REPORT_NAV_FILE_OPTS}                    ,
+    {"export_json"              , HTML_REPORT_NAV_EXPORT_JSON}                  ,
+    {"panel_opts"               , HTML_REPORT_PANEL_PANEL_OPTS}                 ,
+    {"previous"                 , HTML_REPORT_PANEL_PREVIOUS}                   ,
+    {"next"                     , HTML_REPORT_PANEL_NEXT}                       ,
+    {"first"                    , HTML_REPORT_PANEL_FIRST}                      ,
+    {"last"                     , HTML_REPORT_PANEL_LAST}                       ,
+    {"chart_opts"               , HTML_REPORT_PANEL_CHART_OPTS}                 ,
+    {"chart"                    , HTML_REPORT_PANEL_CHART}                      ,
+    {"type"                     , HTML_REPORT_PANEL_TYPE}                       ,
+    {"area_spline"              , HTML_REPORT_PANEL_AREA_SPLINE}                ,
+    {"bar"                      , HTML_REPORT_PANEL_BAR}                        ,
+    {"wmap"                     , HTML_REPORT_PANEL_WMAP}                       ,
+    {"plot_metric"              , HTML_REPORT_PANEL_PLOT_METRIC}                ,
+    {"table_columns"            , HTML_REPORT_PANEL_TABLE_COLS}                 ,
+    {"thead"                    , T_HEAD}                                       ,
+    {"version"                  , GO_VERSION}                                   ,
+    {"button_menu"              , HTML_REPORT_NAV_BUTTON_MENU}                  ,
+    {"button_settings"          , HTML_REPORT_NAV_BUTTON_SETTINGS}              ,
+    {"websocket_connected"      , HTML_REPORT_WEBSOCKET_STATUS_CONNECTED}       ,
+    {"websocket_disconnected"   , HTML_REPORT_WEBSOCKET_STATUS_DISCONNECTED}    ,
   };
   /* *INDENT-ON* */