From 8e2f91759f9f2a078efcf199a808a8e0cce49b4b Mon Sep 17 00:00:00 2001
From: Skjalg Teig <skjalgepalg@gmail.com>
Date: Thu, 5 Jan 2023 15:30:52 +0100
Subject: [PATCH] docs(core-progress): Add section with native element testing
 results

---
 packages/core-progress/readme.md | 47 ++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/core-progress/readme.md b/packages/core-progress/readme.md
index a18bd9d0..5510c982 100644
--- a/packages/core-progress/readme.md
+++ b/packages/core-progress/readme.md
@@ -179,3 +179,50 @@ Property | Affects | Example
 `color` | Color of progress | <core-progress type="radial" style="width:30px;color:#00b9f2" value=".3"></core-progress>
 `stroke` | Color of track | <core-progress type="radial" style="width:30px;stroke:#ccc" value=".3"></core-progress>
 `stroke-width` | Percentage thickness | <core-progress type="radial" style="width:30px;stroke-width:100" value=".3"></core-progress>
+
+## Why not use native element?
+
+Our testing of 2023.01.03, results provided below, showed that the native `<progress>`-element is still not providing a good enough user experience across platforms, browsers and screen readers.
+
+### Results of testing 2023.01.03
+
+Basic example:
+```
+<progress value="20" max="50">
+```
+
+- MacOS 13.2 with VoiceOver - Safari og Chrome: Reads «40 % fremdriftsindikator»
+- MacOS 13.2 with VoiceOver - Firefox: Reads «opptatt framdriftsindikator
+- iOS 16.2 with VoiceOver - Safari, Chrome og Firefox: Reads «20.00»
+- Windows 10 with NVDA 2022.3.3 - Chrome og Edge: Reads «Framdriftsindikator 20»
+- Windows 10 with NVDA 2022.3.3 - Firefox: Reads «Framdriftsindikator 20 prosent»
+- Windows 10 with Jaws 22.11.7 latest - Chrome og Edge: Reads «20 framdriftsindikator»
+- Windows 10 with Jaws 22.11.7 - Firefox: Reads «40 prosent fremdriftsindikator
+- Windows 10 with Narrator - Chrome, Edge og Firefox: Reads «40 fremdriftsindikator»
+- Android 9 with Talkback - Chrome og Samsung Internett: Reads «20,0», pause, «20», pause, «fremdriftsindikator»
+
+Best supported example with ARIA:
+```
+<progress value="15" aria-valuetext="15 av 50" max="50">
+```
+
+- MacOS 13.2 with VoiceOver - Safari og Chrome: Reads «15 av 50 30 % framdriftsindikator»
+- MacOS 13.2 with VoiceOver - Firefox: Reads «opptatt framdriftsindikator
+- iOS 16.2 with VoiceOver - Safari, Chrome og Firefox: Reads «15 av 50»
+- Windows 10 with NVDA 2022.3.3 - Chrome, Edge og Firefox: Reads «Fremdriftsindikator 15 av 50»
+- Windows 10 with Jaws 22.11.7 - Chrome, Edge og Firefox: Reads «15 av 50 framdriftsindikator»
+- Windows 10 with Narrator - Chrome, Edge og Firefox: Reads «30 prosent fremdriftsindikator»
+- Android 9 with Talkback - Chrome og Samsung Internett: Reads «15 av 50 fremdriftsindikator
+
+Rendered example:
+```html
+<!--demo-->
+<div>
+  Basic example
+  <progress value="20" max="50">
+</div>
+<div>
+  Best supported example with ARIA
+  <progress value="15" aria-valuetext="15 av 50" max="50">
+</div>
+```