v1.3.0 - added srDelay option and auto clear assistive text option

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.3.0] - 2021-03-07
+
+### Added
+
+-   `srDelay` option to specify the delay before custom screen reader announcements are made. This now defaults to 1400 milliseconds, instead of 400 as before.
+-   `srAssistiveTextAutoClear` option to allow the assistive text option to be removed when user input is detected, to decrease screen reader verbosity. The assistive text is re-associated with the generated input if its value is cleared.
+
+### Changed
+
+-   increased the default `srAutoClear` value to 10000 milliseconds.
+
 ## [1.2.3] - 2020-11-01
 
 ### Fixed
@@ -86,6 +97,7 @@ All notable changes to this project will be documented in this file.
 -   Issue when clicking on a single-select autocomplete with minLength of 0 with a current selection, which was correctly searching with an empty string, but the polling method was then triggering a search with the value afterwards.
 -   Screen reader announcements for results ignoring the number of results rendered
 
+[1.3.0]: https://github.com/mynamesleon/aria-autocomplete/compare/v1.2.3...v1.3.0
 [1.2.3]: https://github.com/mynamesleon/aria-autocomplete/compare/v1.2.0...v1.2.3
 [1.2.0]: https://github.com/mynamesleon/aria-autocomplete/compare/v1.1.4...v1.2.0
 [1.1.4]: https://github.com/mynamesleon/aria-autocomplete/compare/v1.1.3...v1.1.4

README.md

@@ -222,11 +222,18 @@ The full list of options, and their defaults:
      */
     wrapperClassName: string;
 
+    /**
+     * Set the delay (in milliseconds) before screen reader announcements are made.
+     * Note: if this is too short, some default announcements may interrupt it,
+     * particularly with screen readers that re-announce input values after a pause in typing.
+     */
+    srDelay: number = 1400;
+
     /**
      * Automatically clear the screen reader announcement element after the specified delay
-     * Number is in milliseconds. If true, defaults to 5000.
+     * Number is in milliseconds. If true, defaults to 10000.
      */
-    srAutoClear: boolean | number = 5000;
+    srAutoClear: boolean | number = 10000;
 
     /**
      * Screen reader text used in multiple mode for element deletion.
@@ -264,6 +271,13 @@ The full list of options, and their defaults:
         `When results are available use up and down arrows to review and ` +
         `enter to select. Touch device users, explore by touch or with swipe gestures.`;
 
+    /**
+     * Automatically remove the srAssistiveText once user input is detected,
+     * to reduce screen reader verbosity.
+     * The text is re-associated with the generated input if its value is emptied
+     */
+    srAssistiveTextAutoClear: boolean = true;
+
     /**
      * Screen reader announcement after results are rendered
      */

dist/index.d.ts

@@ -25,13 +25,15 @@ export interface IAriaAutocompleteOptions {
     listClassName?: string;
     inputClassName?: string;
     wrapperClassName?: string;
+    srDelay?: number;
     srAutoClear?: boolean | number;
     srDeleteText?: string;
     srDeletedText?: string;
     srShowAllText?: string;
     srSelectedText?: string;
     srListLabelText?: string;
     srAssistiveText?: string;
+    srAssistiveTextAutoClear?: boolean;
     srResultsText?(length: number): string | void;
     onSearch?(value: string): string | void;
     onAsyncPrep?(url: string, xhr: XMLHttpRequest, isFirstCall: boolean): string | void;

index.html

@@ -509,8 +509,13 @@ <h3>Styling / rendering options</h3>
                         <h3>Screen reader enhancements</h3>
                         <dl>
                             <div>
+                                <dt>srDelay: <code>number</code></dt>
+                                <dd>
+                                    Set the delay in milliseconds before screen reader announcements are made.<br>
+                                    Note: if this is too short, some default announcements may interrupt it.<br>
+                                    Default: <code>5000</code></dd>
                                 <dt>srAutoClear: <code>boolean | number</code></dt>
-                                <dd>Automatically clear the screen reader announcement element after the specified delay. Number is in milliseconds.<br>Default: <code>5000</code></dd>
+                                <dd>Automatically clear the screen reader announcement element after the specified delay. Number is in milliseconds.<br>Default: <code>10000</code></dd>
                                 <dt>srDeleteText: <code>string</code></dt>
                                 <dd>In multi mode, screen reader text used for element deletion - prepended to label<br>Default: <code>`delete`</code></dd>
                                 <dt>srDeletedText: <code>string</code></dt>
@@ -523,6 +528,11 @@ <h3>Screen reader enhancements</h3>
                                 <dd>Screen reader explainer added to the list element via aria-label attribute<br>Default: <code>`Search suggestions`</code></dd>
                                 <dt>srAssistiveText: <code>string</code></dt>
                                 <dd>Screen reader description used for main input when empty<br>Default: <code>`When results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.`</code></dd>
+                                <dt>srAssistiveTextAutoClear: <code>boolean</code></dt>
+                                <dd>
+                                    Automatically remove the srAssistiveText once user input is detected, to reduce screen reader verbosity.<br>
+                                    The text is re-associated with the generated input if its value is emptied.<br>
+                                    Default: <code>5000</code></dd>
                                 <dt>srResultsText: <code>Function</code></dt>
                                 <dd>Screen reader announcement after results are rendered<br>Default: <code>length => `${length} ${length === 1 ? 'result' : 'results'} available.`</code></dd>
                             </div>