Update for accessability

Author: che-wf

README.md

@@ -12,6 +12,17 @@ React component for fancy number transitions.
 npm i -S che-react-number-easing
 ```
 
+
+## Accessibility
+
+`NumberEasing` uses the semantic `<output aria-live="polite">` element to display animated numbers. This ensures that screen readers announce changes to the value automatically.
+
+You can pass custom ARIA attributes (e.g., `aria-label`) to further improve accessibility for your use case:
+
+```jsx
+<NumberEasing value={1234} aria-label="Total sales" />
+```
+
 ## Usage
 
 ```jsx

che-react-number-easing-0.2.0.tgz

@@ -1,13 +1,94 @@
 .demo-card {
-  max-width: 400px;
+  max-width: 370px;
   margin: 3em auto 2em auto;
   background: #fff;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1.5px 6px rgba(0, 0, 0, 0.04);
-  border-radius: 16px;
-  padding: 2.5em 2em 2em 2em;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  padding: 2em 1.5em 1.5em 1.5em;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Lato', 'Proxima Nova', 'Lato', sans-serif;
+}
+.demo-title {
+  font-size: 1.35em;
+  font-weight: 700;
+  margin-bottom: 1.2em;
+  color: #222;
+  text-align: center;
+}
+.number-display {
+  font-size: 2.8em;
+  font-weight: 700;
+  color: #8cc34a;
+  margin-bottom: 1.2em;
+  text-align: center;
+}
+.controls {
+  width: 100%;
   display: flex;
   flex-direction: column;
+  gap: 1em;
+  margin-bottom: 1.2em;
+}
+.input-group {
+  display: flex;
   align-items: center;
+  gap: 0.5em;
+  justify-content: center;
+}
+label {
+  font-size: 1em;
+  color: #666;
+  margin-right: 0.2em;
+}
+.big {
+  font-size: 1.1em;
+  padding: 0.4em 0.7em;
+  border: 1px solid #e0e0e0;
+  border-radius: 7px;
+  background: #fafbfc;
+  width: 7em;
+}
+.primary-btn {
+  background: #8cc34a;
+  color: #fff;
+  border: none;
+  border-radius: 7px;
+  padding: 0.4em 1em;
+  font-size: 1em;
+  cursor: pointer;
+  box-shadow: 0 1px 4px rgba(140, 195, 74, 0.07);
+  transition: background 0.2s;
+}
+.primary-btn:hover {
+  background: #72a436;
+}
+.secondary-btn {
+  background: #e0e0e0;
+  color: #333;
+  border: none;
+  border-radius: 7px;
+  padding: 0.4em 1em;
+  font-size: 1em;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+.secondary-btn:hover {
+  background: #d0d0d0;
+}
+.demo-footer {
+  width: 100%;
+  text-align: center;
+  margin-top: 1.5em;
+  color: #aaa;
+  font-size: 0.92em;
+  line-height: 1.6;
+}
+.demo-footer a {
+  color: #aaa;
+  text-decoration: underline;
+  font-size: 0.92em;
 }
 .number-display {
   font-size: 3.5em;

gh-pages/dist/main.css

@@ -80,13 +80,17 @@ function NumberEasing({
 
   // eslint-disable-next-line react/jsx-props-no-spreading
   return (
-    <span {...other} className={classes}>
+    <output
+      {...other}
+      className={classes}
+      aria-live="polite"
+    >
       {useLocaleString
         ? parseFloat(displayValue).toLocaleString(locale, opts)
         : trail
           ? Number(displayValue).toFixed(precision > -1 ? precision : 0)
           : Number(displayValue).toString()}
-    </span>
+    </output>
   );
 }