@fluid-topics/ft-wc-utils 1.2.67 → 1.2.69

package/build/SearchPlaceConverter.d.ts

@@ -29,6 +29,7 @@ export declare class SearchPlaceConverter {
     serialize(request: EnrichedFtSearchRequest, searchPage?: string): string;
     serializeToCurrentPageIfPossible(request: EnrichedFtSearchRequest, searchPage?: string): string;
     toURLSearchParams(request: EnrichedFtSearchRequest, omitContentLocaleIfDefault?: boolean): string;
+    private encodeQueryString;
     parse(url: string): EnrichedFtSearchRequest;
     fromURLSearchParams(strParams: string): EnrichedFtSearchRequest;
     private parseCompatFilters;

package/build/SearchPlaceConverter.js

@@ -112,8 +112,19 @@ export class SearchPlaceConverter {
         for (let key in otherQueryParams) {
             params.append(key, otherQueryParams[key]);
         }
+        // Use encodeURIComponent instead of URLSearchParams.toString() to encode the result
+        // encodeURIComponent encodes everything but characters - _ . ! ~ * ' ( )
+        // To be compliant with the expected "application/x-www-form-urlencoded" we must also replace spaces by "+" (instead of %20)
+        const result = new Array();
+        params.forEach((value, key) => {
+            result.push(this.encodeQueryString(key) + "=" + this.encodeQueryString(value));
+        });
         // GWT needs the query string to be encoded twice 🙄
-        return encodeURI(params.toString()).replace(/#/g, "%23");
+        return encodeURI(result.join("&")).replace(/#/g, "%23");
+    }
+    encodeQueryString(value) {
+        return encodeURIComponent(value)
+            .replace(/%20/g, "+");
     }
     parse(url) {
         var _a;

package/build/accessibility.styles.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Invisible Content Just for Screen Reader Users
+ * See more:
+ * - https://webaim.org/techniques/css/invisiblecontent/
+ * - https://webaim.org/techniques/skipnav/
+ *
+ * The following are the recommended styles for visually hiding content
+ * that will be read by a screen reader.
+ *
+ * The .sr-only CSS class should then be referenced in the tag of the
+ * element being hidden, as shown:
+ * <div class="sr-only">This text is hidden.</div>
+ *
+ * Sighted users will not see the hidden content at all—it will be hidden well
+ * to the left of the visible browser window. Because it is still part of the
+ * page content, screen readers will read it.
+ *
+ * Skip navigation links are useful to give screen reader and keyboard users the
+ * capability of navigating directly to the main content.
+ *
+ * To address the concerns that a visible skip link can be intrusive, but
+ * still create a skip link that is useful for sighted keyboard users, we
+ * recommend creating a link that is hidden until to the user navigates to it
+ * with a keyboard.
+ *
+ * This technique uses two style definitions—one to visually hide the link, and
+ * another using the a:focus pseudo-class to visually reveal the link while it has focus.
+ *
+ * These styles should then be applied to the "skip" link:
+ * <div id="skip"><a href="#content">Skip to Main Content</a></div>
+ */
+export declare const screenReaderStyles: import("lit").CSSResult;

package/build/accessibility.styles.js

@@ -0,0 +1,57 @@
+import { css } from "lit";
+/**
+ * Invisible Content Just for Screen Reader Users
+ * See more:
+ * - https://webaim.org/techniques/css/invisiblecontent/
+ * - https://webaim.org/techniques/skipnav/
+ *
+ * The following are the recommended styles for visually hiding content
+ * that will be read by a screen reader.
+ *
+ * The .sr-only CSS class should then be referenced in the tag of the
+ * element being hidden, as shown:
+ * <div class="sr-only">This text is hidden.</div>
+ *
+ * Sighted users will not see the hidden content at all—it will be hidden well
+ * to the left of the visible browser window. Because it is still part of the
+ * page content, screen readers will read it.
+ *
+ * Skip navigation links are useful to give screen reader and keyboard users the
+ * capability of navigating directly to the main content.
+ *
+ * To address the concerns that a visible skip link can be intrusive, but
+ * still create a skip link that is useful for sighted keyboard users, we
+ * recommend creating a link that is hidden until to the user navigates to it
+ * with a keyboard.
+ *
+ * This technique uses two style definitions—one to visually hide the link, and
+ * another using the a:focus pseudo-class to visually reveal the link while it has focus.
+ *
+ * These styles should then be applied to the "skip" link:
+ * <div id="skip"><a href="#content">Skip to Main Content</a></div>
+ */
+export const screenReaderStyles = css `
+    .sr-only {
+        position:absolute;
+        left:-10000px;
+        top:auto;
+        width:1px;
+        height:1px;
+        overflow:hidden;
+    }
+
+    #skip a {
+        position:absolute;
+        left:-10000px;
+        top:auto;
+        width:1px;
+        height:1px;
+        overflow:hidden;
+    }
+
+    #skip a:focus {
+        position:static;
+        width:auto;
+        height:auto;
+    }
+`;