Layout changes accessibility review

.eslintrc

@@ -1,17 +1,22 @@
 {
   "parser": "babel-eslint",
   "plugins": [
-    "react"
+    "react",
+    "css-modules"
   ],
   "extends": [
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:css-modules/recommended"
   ],
   "env": {
     "browser": true,
     "jest": true
   },
   "rules": {
+    "no-unused-expressions": "error",
     "no-trailing-spaces": "error",
+    "no-nested-ternary": "error",
+    "space-infix-ops": "error",
     "indent": ["warn", 2],
     "arrow-spacing": ["error", { "before": true, "after": true }],
     "space-in-parens": [ 0, "never" ],
@@ -40,6 +45,7 @@
     "camelcase": [ 1 ],
     "no-underscore-dangle" : [0, "always"],
     "keyword-spacing": ["error", { "before": true, "after": true }],
+    "key-spacing": ["error", { "afterColon": true }],
     "newline-before-return": "error",
     "space-before-blocks": "error",
     "no-unused-vars": "error",

.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "indentation": 2,
+    "string-quotes": "single",
+    "color-named": "always-where-possible",
+    "selector-combinator-space-after": "always",
+    "selector-attribute-quotes": "always",
+    "selector-attribute-operator-space-before": "always",
+    "selector-attribute-operator-space-after": "always",
+    "declaration-colon-space-before": "never",
+    "declaration-colon-space-after": "always",
+    "rule-empty-line-before": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-colon-space-after": "always"
+  }
+}

README.md

@@ -60,14 +60,18 @@ npm install @bbc/react-transcript-editor
 ```js
 import { TranscriptEditor } from '@bbc/react-transcript-editor';
 
-<TranscriptEditor
-    transcriptData=// Transcript json
-    mediaUrl=// string url to media file - audio or video
-    isEditable={true}// se to true if you want to be able to edit the text
-    sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
-    fileName={ this.state.fileName }// optional*
-/>
-```
+  <TranscriptEditor
+     transcriptData=// Transcript json
+     mediaUrl=// string url to media file - audio or video 
+     isEditable={true}// se to true if you want to be able to edit the text
+     sttJsonType={ 'bbckaldi' }// the type of STT Json transcript supported.
+     handleAnalyticsEvents={ this.handleAnalyticsEvents } // optional - if you want to collect analytics events.
+     fileName=// optional - used for saving and retrieving local storage blob files 
+     title=// optional - defaults to ''
+     ref= // optional - if you want to have access to internal functions such as retrieving content from the editor. eg to save to a server/db.
+   />
+```
+See [`./src/index.js` demo](./src/index.js) as a more detailed example usage of the component.
 
 _Note: `fileName` it is optional but it's needed if working with user uploaded local media in the browser, to be able to save and retrieve from local storage. For instance if you are passing a blob url to `mediaUrl` using `createObjectURL` this url is randomly re-generated on every page refresh so you wouldn't be able to restore a session, as `mediaUrl` is used as the local storage key. See demo app for more detail example of this[`./src/index.js`](./src/index.js)_