refactor(Notify): small tweaks to Notify's new "attrs" props quasarframework#7477 quasarframework#7482

Author: rstoenescu

docs/src/pages/quasar-plugins/notify.md

@@ -105,20 +105,21 @@ You can use HTML on message if you specify the `html: true` prop. **Please note
 <doc-example title="Unsafe HTML message" file="Notify/UnsafeHtml" />
 
 ### Setting attributes
-You can set custom attributes on the notification by setting the `attrs` key of the configuration object.
-You can set custom attributes on the notification actions by setting the `attrs` key of the configuration object of the action.
+You can set custom HTML attributes on the notification itself or on individual notification actions by setting the `attrs` Object property.
 
 ```js
 this.$q.notify({
   ...
 
   attrs: {
+    // for the notification itself:
     role: 'alertdialog'
   },
 
   actions: [
     {
       icon: 'close',
+      // for individual action (button):
       attrs: {
         'aria-label': 'Dismiss'
       }

ui/src/plugins/Notify.js

@@ -11,8 +11,6 @@ import { isSSR } from './Platform.js'
 let uid = 0
 const defaults = {}
 
-const attrs = { role: 'alert' }
-
 const positionList = [
   'top-left', 'top-right',
   'bottom-left', 'bottom-right',
@@ -60,7 +58,7 @@ const Notifications = {
       this.notifs[pos] = []
 
       const
-        vert = ['left', 'center', 'right'].includes(pos) ? 'center' : (pos.indexOf('top') > -1 ? 'top' : 'bottom'),
+        vert = ['left', 'center', 'right'].includes(pos) === true ? 'center' : (pos.indexOf('top') > -1 ? 'top' : 'bottom'),
         align = pos.indexOf('left') > -1 ? 'start' : (pos.indexOf('right') > -1 ? 'end' : 'center'),
         classes = ['left', 'right'].includes(pos) ? `items-${pos === 'left' ? 'start' : 'end'} justify-center` : (pos === 'center' ? 'flex-center' : `items-${align}`)
 
@@ -180,7 +178,7 @@ const Notifications = {
           (notif.multiLine === true ? '' : ' col'),
 
         attrs: {
-          ...attrs,
+          role: 'alert',
           ...notif.attrs
         }
       })

ui/src/plugins/Notify.json

@@ -138,8 +138,9 @@
       "attrs": {
         "type": "Object",
         "desc": "Key-value for attributes to be set on the notification",
-        "examples": [ "{ 'aria-label': 'Button label' }" ],
-        "__exemption": [ "definition" ]
+        "examples": [ "{ role: 'alertdialog' }" ],
+        "__exemption": [ "definition" ],
+        "addedIn": "v1.13.0"
       },
 
       "timeout": {
@@ -304,8 +305,9 @@
             "attrs": {
               "type": "Object",
               "desc": "Key-value for attributes to be set on the notification",
-              "examples": [ "{ 'aria-label': 'Button label' }" ],
-              "__exemption": [ "definition" ]
+              "examples": [ "{ role: 'alertdialog' }" ],
+              "__exemption": [ "definition" ],
+              "addedIn": "v1.13.0"
             },
 
             "timeout": {
@@ -494,8 +496,9 @@
             "attrs": {
               "type": "Object",
               "desc": "Key-value for attributes to be set on the notification",
-              "examples": [ "{ 'aria-label': 'Button label' }" ],
-              "__exemption": [ "definition" ]
+              "examples": [ "{ role: 'alertdialog' }" ],
+              "__exemption": [ "definition" ],
+              "addedIn": "v1.13.0"
             },
 
             "timeout": {
@@ -680,8 +683,9 @@
             "attrs": {
               "type": "Object",
               "desc": "Key-value for attributes to be set on the notification",
-              "examples": [ "{ 'aria-label': 'Button label' }" ],
-              "__exemption": [ "definition" ]
+              "examples": [ "{ role: 'alertdialog' }" ],
+              "__exemption": [ "definition" ],
+              "addedIn": "v1.13.0"
             },
 
             "timeout": {