fix(NumberFormat): hide screen reader only text from being copied as …

…HTML (#2240)
dnbexperience · May 31, 2023 · c65fad1 · c65fad1
1 parent 931c553
commit c65fad1
Show file tree

Hide file tree

Showing 8 changed files with 371 additions and 190 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/number-format/Examples.tsx
@@ -31,7 +31,9 @@ export const NumberDefault = () => (
           -12345678.9
         </NumberFormat>
         <NumberFormat decimals={1}>-1234.54321</NumberFormat>
-        <NumberFormat decimals={2}>-1234</NumberFormat>
+        <NumberFormat decimals={2} copy_selection={false}>
+          -1234
+        </NumberFormat>
       </P>
     </ComponentBox>
   </Style>
@@ -67,6 +69,11 @@ export const NumberCurrency = () => (
           value={-12345678.9}
           currency_display="code"
         />
+        <NumberFormat
+          currency
+          value={-12345678.9}
+          currency_display={false}
+        />
       </P>
     </ComponentBox>
   </Style>

diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts b/packages/dnb-eufemia/src/components/number-format/NumberFormat.d.ts
@@ -56,7 +56,13 @@ export interface NumberFormatProps
   /**
    * Use either empty/false to hide the sign/name or use `code` (NOK), `name` (norske kroner) , `symbol` (kr) or `narrowSymbol` (for a shorter symbol variant). Defaults to `narrowSymbol` when the locale is `no` else we default to `code`.
    */
-  currency_display?: string;
+  currency_display?:
+    | 'code'
+    | 'name'
+    | 'symbol'
+    | 'narrowSymbol'
+    | ''
+    | false;
 
   /**
    * Use either `before` or `after` to change/define the position of the currency. Defaults to `auto` (Browser API defaults, but with an exception, if the locale is `nb-NO` or `no`, use after as the default position).

diff --git a/packages/dnb-eufemia/src/components/number-format/NumberFormat.js b/packages/dnb-eufemia/src/components/number-format/NumberFormat.js
@@ -15,6 +15,7 @@ import {
   convertJsxToString,
   extendPropsWithContextInClassComponent,
   extend,
+  detectOutsideClick,
 } from '../../shared/component-helper'
 import { hasSelectedText, IS_IOS } from '../../shared/helpers'
 import {
@@ -40,7 +41,10 @@ export default class NumberFormat extends React.PureComponent {
 
     // currency
     currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-    currency_display: PropTypes.string,
+    currency_display: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(['code', 'name', 'symbol', 'narrowSymbol', '']),
+    ]),
     currency_position: PropTypes.oneOf(['auto', 'before', 'after']),
 
     // shortens any number or currency including an abbreviation
@@ -180,12 +184,21 @@ export default class NumberFormat extends React.PureComponent {
     }
   }
 
+  componentWillUnmount() {
+    this.outsideClick?.remove()
+  }
+
   setFocus() {
     this.setState({ selected: true }, () => {
-      if (this._selectionRef.current) {
-        this._selectionRef.current.focus()
-      }
+      this._selectionRef.current?.focus()
       this.selectAll()
+
+      if (!isTrue(this.props.copy_selection)) {
+        this.outsideClick = detectOutsideClick(
+          this._ref.current,
+          this.onBlurHandler
+        )
+      }
     })
   }
 
@@ -394,11 +407,9 @@ export default class NumberFormat extends React.PureComponent {
     return (
       <Element lang={lang} {...attributes}>
         {srLabel && (
-          <span className="dnb-sr-only">
-            {srLabel}
-            {' '}
-          </span>
+          <span className="dnb-sr-only" data-text={srLabel + ' '} />
         )}
+
         <span
           className={classnames(
             'dnb-number-format__visible',
@@ -414,9 +425,8 @@ export default class NumberFormat extends React.PureComponent {
         <span
           id={this._id}
           className="dnb-number-format__sr-only dnb-sr-only"
-        >
-          {aria}
-        </span>
+          data-text={aria}
+        />
 
         {isTrue(copy_selection) && (
           <span
@@ -427,7 +437,7 @@ export default class NumberFormat extends React.PureComponent {
             onCopy={this.shortcutHandler}
             aria-hidden
           >
-            {cleanedValue}
+            {this.state.selected && cleanedValue}
           </span>
         )}