Fossil SCM
Added an ARIA role=alert to the fossil.toast.message/warning/error() popup, per form request. Toast API doc corrections.
Commit
23d6b4570a8752b5f00dfe0496f59324f0602b953d2679274d47ec0342a13d15
Parent
ca7aae80ad701e4…
1 file changed
+15
-9
+15
-9
| --- src/fossil.popupwidget.js | ||
| +++ src/fossil.popupwidget.js | ||
| @@ -266,10 +266,11 @@ | ||
| 266 | 266 | const toastImpl = function f(cssClass, durationMult, argsObject){ |
| 267 | 267 | if(!f.toaster){ |
| 268 | 268 | f.toaster = new F.PopupWidget({ |
| 269 | 269 | cssClass: 'fossil-toast-message' |
| 270 | 270 | }); |
| 271 | + D.attr(f.toaster.e, 'role', 'alert'); | |
| 271 | 272 | } |
| 272 | 273 | const T = f.toaster; |
| 273 | 274 | if(f._timer) clearTimeout(f._timer); |
| 274 | 275 | D.clearElement(T.e); |
| 275 | 276 | if(f._prevCssClass) T.e.classList.remove(f._prevCssClass); |
| @@ -289,23 +290,28 @@ | ||
| 289 | 290 | position: { x: 5, y: 5 /*viewport-relative, pixels*/ }, |
| 290 | 291 | displayTimeMs: 3000 |
| 291 | 292 | }, |
| 292 | 293 | /** |
| 293 | 294 | Convenience wrapper around a PopupWidget which pops up a shared |
| 294 | - PopupWidget instance to show toast-style messages (commonly seen | |
| 295 | - on Android). Its arguments may be anything suitable for passing | |
| 296 | - to fossil.dom.append(), and each argument is first append()ed to | |
| 297 | - the toast widget, then the widget is shown for | |
| 298 | - F.toast.config.displayTimeMs milliseconds. This is called while | |
| 299 | - a toast is currently being displayed, the first will be overwritten | |
| 300 | - and the time until the message is hidden will be reset. | |
| 295 | + PopupWidget instance to show toast-style messages (commonly | |
| 296 | + seen on Android). Its arguments may be anything suitable for | |
| 297 | + passing to fossil.dom.append(), and each argument is first | |
| 298 | + append()ed to the toast widget, then the widget is shown for | |
| 299 | + F.toast.config.displayTimeMs milliseconds. If this is called | |
| 300 | + while a toast is currently being displayed, the first will be | |
| 301 | + overwritten and the time until the message is hidden will be | |
| 302 | + reset. | |
| 301 | 303 | |
| 302 | 304 | The toast is always shown at the viewport-relative coordinates |
| 303 | 305 | defined by the F.toast.config.position. |
| 304 | 306 | |
| 305 | - The toaster's DOM element has the CSS classes fossil-tooltip | |
| 306 | - and fossil-toast, so can be style via those. | |
| 307 | + The toaster's DOM element has the CSS class fossil-tooltip | |
| 308 | + and fossil-toast-message, so can be style via those. | |
| 309 | + | |
| 310 | + The 3 main message types (message, warning, error) each get a | |
| 311 | + CSS class with that same name added to them. Thus CSS can | |
| 312 | + select on .fossil-toast-message.error to style error toasts. | |
| 307 | 313 | */ |
| 308 | 314 | message: function(/*...*/){ |
| 309 | 315 | return toastImpl(false,1, arguments); |
| 310 | 316 | }, |
| 311 | 317 | /** |
| 312 | 318 |
| --- src/fossil.popupwidget.js | |
| +++ src/fossil.popupwidget.js | |
| @@ -266,10 +266,11 @@ | |
| 266 | const toastImpl = function f(cssClass, durationMult, argsObject){ |
| 267 | if(!f.toaster){ |
| 268 | f.toaster = new F.PopupWidget({ |
| 269 | cssClass: 'fossil-toast-message' |
| 270 | }); |
| 271 | } |
| 272 | const T = f.toaster; |
| 273 | if(f._timer) clearTimeout(f._timer); |
| 274 | D.clearElement(T.e); |
| 275 | if(f._prevCssClass) T.e.classList.remove(f._prevCssClass); |
| @@ -289,23 +290,28 @@ | |
| 289 | position: { x: 5, y: 5 /*viewport-relative, pixels*/ }, |
| 290 | displayTimeMs: 3000 |
| 291 | }, |
| 292 | /** |
| 293 | Convenience wrapper around a PopupWidget which pops up a shared |
| 294 | PopupWidget instance to show toast-style messages (commonly seen |
| 295 | on Android). Its arguments may be anything suitable for passing |
| 296 | to fossil.dom.append(), and each argument is first append()ed to |
| 297 | the toast widget, then the widget is shown for |
| 298 | F.toast.config.displayTimeMs milliseconds. This is called while |
| 299 | a toast is currently being displayed, the first will be overwritten |
| 300 | and the time until the message is hidden will be reset. |
| 301 | |
| 302 | The toast is always shown at the viewport-relative coordinates |
| 303 | defined by the F.toast.config.position. |
| 304 | |
| 305 | The toaster's DOM element has the CSS classes fossil-tooltip |
| 306 | and fossil-toast, so can be style via those. |
| 307 | */ |
| 308 | message: function(/*...*/){ |
| 309 | return toastImpl(false,1, arguments); |
| 310 | }, |
| 311 | /** |
| 312 |
| --- src/fossil.popupwidget.js | |
| +++ src/fossil.popupwidget.js | |
| @@ -266,10 +266,11 @@ | |
| 266 | const toastImpl = function f(cssClass, durationMult, argsObject){ |
| 267 | if(!f.toaster){ |
| 268 | f.toaster = new F.PopupWidget({ |
| 269 | cssClass: 'fossil-toast-message' |
| 270 | }); |
| 271 | D.attr(f.toaster.e, 'role', 'alert'); |
| 272 | } |
| 273 | const T = f.toaster; |
| 274 | if(f._timer) clearTimeout(f._timer); |
| 275 | D.clearElement(T.e); |
| 276 | if(f._prevCssClass) T.e.classList.remove(f._prevCssClass); |
| @@ -289,23 +290,28 @@ | |
| 290 | position: { x: 5, y: 5 /*viewport-relative, pixels*/ }, |
| 291 | displayTimeMs: 3000 |
| 292 | }, |
| 293 | /** |
| 294 | Convenience wrapper around a PopupWidget which pops up a shared |
| 295 | PopupWidget instance to show toast-style messages (commonly |
| 296 | seen on Android). Its arguments may be anything suitable for |
| 297 | passing to fossil.dom.append(), and each argument is first |
| 298 | append()ed to the toast widget, then the widget is shown for |
| 299 | F.toast.config.displayTimeMs milliseconds. If this is called |
| 300 | while a toast is currently being displayed, the first will be |
| 301 | overwritten and the time until the message is hidden will be |
| 302 | reset. |
| 303 | |
| 304 | The toast is always shown at the viewport-relative coordinates |
| 305 | defined by the F.toast.config.position. |
| 306 | |
| 307 | The toaster's DOM element has the CSS class fossil-tooltip |
| 308 | and fossil-toast-message, so can be style via those. |
| 309 | |
| 310 | The 3 main message types (message, warning, error) each get a |
| 311 | CSS class with that same name added to them. Thus CSS can |
| 312 | select on .fossil-toast-message.error to style error toasts. |
| 313 | */ |
| 314 | message: function(/*...*/){ |
| 315 | return toastImpl(false,1, arguments); |
| 316 | }, |
| 317 | /** |
| 318 |