@visns-studio/visns-components 6.32.3 → 6.34.0

package/src/components/Field.jsx

@@ -992,6 +992,8 @@ function Field({
                         {settings.create && (
                             <button
                                 className={styles.buttonRight}
+                                title="Create a new record to choose in this field"
+                                aria-label="Create a new record to choose in this field"
                                 onClick={(e) => {
                                     e.preventDefault();
                                     let allow = false;
@@ -1285,6 +1287,8 @@ function Field({
                         {settings.create && (
                             <button
                                 className={styles.buttonRight}
+                                title="Create a new record to choose in this field"
+                                aria-label="Create a new record to choose in this field"
                                 onClick={(e) => {
                                     e.preventDefault();
                                     let allow = false;
@@ -1484,6 +1488,8 @@ function Field({
                                                 
                                                 <button
                                                     className={styles['trash-button']}
+                                                    title="Remove this file from the selection"
+                                                    aria-label="Remove this file from the selection"
                                                     onClick={(e) => {
                                                         e.preventDefault();
                                                         e.stopPropagation();
@@ -1580,6 +1586,18 @@ function Field({
                                         {((inputValue.key && inputValue.uuid) || inputValue.file_url || inputValue.file_path || inputValue.id) && (
                                             <button
                                                 className={styles['download-button']}
+                                                // NO NATIVE `title` HERE, unlike every
+                                                // other button in this file: this one
+                                                // already draws react-tooltip's card off
+                                                // `data-tooltip-content`, and a `title`
+                                                // beside it makes the browser draw a
+                                                // SECOND tooltip a moment later, in a
+                                                // different place. The `aria-label` is
+                                                // the part that was genuinely missing —
+                                                // the body is a glyph, and a
+                                                // `data-tooltip-content` is not an
+                                                // accessible name.
+                                                aria-label="Download a copy of this file"
                                                 data-tooltip-id="system-tooltip"
                                                 data-tooltip-content={`Download ${inputValue.filename || inputValue.name || inputValue.file_name}`}
                                                 onClick={(e) => {
@@ -2083,6 +2101,7 @@ function Field({
                                                         }
                                                         className={styles.jsonTableDeleteBtn}
                                                         title="Delete row"
+                                                        aria-label="Delete row"
                                                     >
                                                         <Trash2 size={14} />
                                                     </button>
@@ -2102,6 +2121,7 @@ function Field({
                                         onAddJsonTableRow && onAddJsonTableRow(settings.id, settings.defaultRow || {})
                                     }
                                     className={styles.jsonTableAddBtn}
+                                    title="Add another row to this list"
                                 >
                                     <CirclePlus size={16} />
                                     <span>{settings.addRowButton?.label || 'Add Row'}</span>
@@ -2214,6 +2234,8 @@ function Field({
                         {settings.create && (
                             <button
                                 className={styles.buttonRight}
+                                title="Create a new record to choose in this field"
+                                aria-label="Create a new record to choose in this field"
                                 onClick={(e) => {
                                     e.preventDefault();
                                     let allow = false;
@@ -2502,6 +2524,7 @@ function Field({
                             <button
                                 type="button"
                                 className={styles.signButton}
+                                title="Open the signature pad and sign this document"
                                 onClick={(e) => {
                                     e.preventDefault();
 
@@ -3143,6 +3166,7 @@ function Field({
                     control). Visibility is CSS-only. */}
                 <button
                     type="button"
+                    title="Empty this date field"
                     aria-label="Clear date"
                     aria-hidden={value ? undefined : 'true'}
                     tabIndex={value ? 0 : -1}
@@ -3672,6 +3696,8 @@ function Field({
                             <h1>Edit Canvas</h1>
                             <button
                                 className={styles.modal__close}
+                                title="Close this drawing without keeping it"
+                                aria-label="Close this drawing without keeping it"
                                 onClick={() => setCanvasPopupOpen(false)}
                             >
                                 <X size={24} color="#FFF" />
@@ -3684,6 +3710,7 @@ function Field({
                             <ul className={styles.drawactions}>
                                 <li>
                                     <button
+                                        title="Keep this drawing on the field and close it"
                                         onClick={() => {
                                             handleCanvasSave();
                                         }}
@@ -3694,6 +3721,7 @@ function Field({
                                 </li>
                                 <li>
                                     <button
+                                        title="Draw freehand on this drawing"
                                         onClick={() => {
                                             setSketchTool(Tools.Pencil);
                                             setToolClass('pencil');
@@ -3711,6 +3739,7 @@ function Field({
                                 </li>
                                 <li>
                                     <button
+                                        title="Draw straight lines on this drawing"
                                         onClick={() => {
                                             setSketchTool(Tools.Line);
 
@@ -3729,6 +3758,7 @@ function Field({
                                 </li>
                                 <li>
                                     <button
+                                        title="Draw circles on this drawing"
                                         onClick={() => {
                                             setSketchTool(Tools.Circle);
 
@@ -3747,6 +3777,7 @@ function Field({
                                 </li>
                                 <li>
                                     <button
+                                        title="Take back the last mark you made"
                                         onClick={() => sketchRef.current.undo()}
                                         className={styles['drawaction-undo']}
                                     >
@@ -3755,6 +3786,7 @@ function Field({
                                 </li>
                                 <li>
                                     <button
+                                        title="Erase every mark on this drawing"
                                         onClick={() =>
                                             sketchRef.current.clearCanvas()
                                         }

package/src/components/Form.jsx

@@ -3686,6 +3686,16 @@ function Form({
                                                       >
                                                           <button
                                                               className="group-expand-btn"
+                                                              title={
+                                                                  collapsed
+                                                                      ? 'Show the rows in this group'
+                                                                      : 'Hide the rows in this group'
+                                                              }
+                                                              aria-label={
+                                                                  collapsed
+                                                                      ? 'Show the rows in this group'
+                                                                      : 'Hide the rows in this group'
+                                                              }
                                                               onClick={(e) => {
                                                                   e.preventDefault();
                                                                   e.stopPropagation();
@@ -3949,6 +3959,7 @@ function Form({
                     formSettings.customButton.url ? (
                         <button
                             className={styles.btn}
+                            title="Run this action against the record on this form"
                             onClick={(e) => {
                                 e.preventDefault();
                                 handleCustom(formSettings);
@@ -3961,14 +3972,22 @@ function Form({
                     ) : null}
 
                     {formSettings?.download?.button?.label && (
-                        <button className={styles.btn} onClick={handleDownload}>
+                        <button
+                            className={styles.btn}
+                            title="Download the result of this form as a file"
+                            onClick={handleDownload}
+                        >
                             {formSettings.download.button.label}
                         </button>
                     )}
 
                     {formSettings.hasOwnProperty('sortButton') &&
                     formSettings.sortButton.url ? (
-                        <button className={styles.btn} onClick={handleSort}>
+                        <button
+                            className={styles.btn}
+                            title="Sort this record's files into name order"
+                            onClick={handleSort}
+                        >
                             {formSettings.sortButton.label
                                 ? formSettings.sortButton.label
                                 : 'Sort'}
@@ -3977,6 +3996,7 @@ function Form({
 
                     <button
                         className={styles.saveBtn}
+                        title="Submit this form"
                         onClick={handleSubmit}
                         data-type="save"
                     >
@@ -3988,6 +4008,7 @@ function Form({
                     {formSettings.hasOwnProperty('saveExit') && (
                         <button
                             className={styles.btn}
+                            title="Save this form and leave this screen"
                             onClick={handleSubmit}
                             data-type="saveExit"
                         >
@@ -4014,6 +4035,8 @@ function Form({
                         </h1>
                         <button
                             className={styles.modal__close}
+                            title="Close this form without saving"
+                            aria-label="Close this form without saving"
                             onClick={closeModal}
                         >
                             <X strokeWidth={2} size={24} />
@@ -4108,6 +4131,7 @@ function Form({
                                             >
                                                 <button
                                                     className={styles.btnSecondary}
+                                                    title="Close without saving the changes you have made"
                                                     onClick={(e) => {
                                                         e.preventDefault();
                                                         guardedClose();
@@ -4119,6 +4143,7 @@ function Form({
                                                 </button>
                                                 <button
                                                     className={styles.btn}
+                                                    title="Save this form and close it"
                                                     onClick={handleSubmit}
                                                     data-type="save"
                                                 >
@@ -4129,6 +4154,7 @@ function Form({
                                                 ) && (
                                                     <button
                                                         className={styles.btn}
+                                                        title="Save this record and open a blank form for the next one"
                                                         onClick={handleSubmit}
                                                         data-type="saveAnother"
                                                     >
@@ -4140,6 +4166,7 @@ function Form({
                                                 ) && (
                                                     <button
                                                         className={styles.btn}
+                                                        title="Save this form and leave this screen"
                                                         onClick={handleSubmit}
                                                         data-type="saveExit"
                                                     >
@@ -4183,6 +4210,7 @@ function Form({
                                                 >
                                                     <button
                                                         className={styles.btnSecondary}
+                                                        title="Close without saving the changes you have made"
                                                         onClick={(e) => {
                                                             e.preventDefault();
                                                             guardedClose();
@@ -4194,6 +4222,7 @@ function Form({
                                                     </button>
                                                     <button
                                                         className={styles.btn}
+                                                        title="Save this form and close it"
                                                         onClick={handleSubmit}
                                                         data-type="save"
                                                     >
@@ -4204,6 +4233,12 @@ function Form({
                                                             className={
                                                                 styles.btn
                                                             }
+                                                            title={
+                                                                saveAnotherDisabled
+                                                                    ? saveAnotherDisableWhen?.message ||
+                                                                      'This action is currently unavailable.'
+                                                                    : 'Save this form and move straight on to the next step'
+                                                            }
                                                             onClick={
                                                                 handleSubmit
                                                             }
@@ -4234,6 +4269,7 @@ function Form({
                                                             className={
                                                                 styles.btn
                                                             }
+                                                            title="Save this form and leave this screen"
                                                             onClick={
                                                                 handleSubmit
                                                             }
@@ -4304,6 +4340,7 @@ function Form({
                                             >
                                                 <button
                                                     className={styles.btn}
+                                                    title="Submit this form"
                                                     onClick={handleSubmit}
                                                     data-type="save"
                                                 >