fix: add aria-hidden

README.md

@@ -1,71 +1,67 @@
-# [WIP] rc-image
+# rc-image
+
 ---
 
 React Image
 
-[![NPM version][npm-image]][npm-url]
-[![build status][travis-image]][travis-url]
-[![Test coverage][coveralls-image]][coveralls-url]
-[![gemnasium deps][gemnasium-image]][gemnasium-url]
-[![npm download][download-image]][download-url]
-
-[npm-image]: http://img.shields.io/npm/v/rc-img.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-img
-[travis-image]: https://img.shields.io/travis/react-component/img.svg?style=flat-square
-[travis-url]: https://travis-ci.org/react-component/img
-[coveralls-image]: https://img.shields.io/coveralls/react-component/img.svg?style=flat-square
+[![NPM version][npm-image]][npm-url] [![build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![npm download][download-image]][download-url]
+
+[npm-image]: http://img.shields.io/npm/v/rc-image.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-image
+[travis-image]: https://img.shields.io/travis/react-component/image.svg?style=flat-square
+[travis-url]: https://travis-ci.org/react-component/image
+[coveralls-image]: https://img.shields.io/coveralls/react-component/image.svg?style=flat-square
 [coveralls-url]: https://coveralls.io/r/react-component/img?branch=master
 [gemnasium-image]: http://img.shields.io/gemnasium/react-component/img.svg?style=flat-square
 [gemnasium-url]: https://gemnasium.com/react-component/img
 [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
 [node-url]: http://nodejs.org/download/
-[download-image]: https://img.shields.io/npm/dm/rc-img.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-img
-
-## Screenshots
-
+[download-image]: https://img.shields.io/npm/dm/rc-image.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-image
 
 ## Feature
-- [x] Error image display
-- [x] Responsive
-- [ ] PreviewImage
-- [ ] Placeholder
-- [ ] rotate
-- [ ] cropping
-- [ ] filter
-
 
+- [x] Placeholder
+- [x] Preview
+- [x] Rotate
+- [x] Zoom
+- [x] Fallback
 
 ### Keyboard
 
-
 ## install
 
+[![rc-image](https://nodei.co/npm/rc-image.png)](https://npmjs.org/package/rc-image)
 
 ## Usage
 
-### basic use
-
-
-## API
+```bash
+npm install
+npm start
+```
 
-### Image props
+```jsx
+const Image = require('rc-image');
 
-### Methods
+ReactDOM.render(
+  <Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
+), document.getElementById('root'));
+```
 
-## Development
+## API
 
-```
-npm install
-npm start
-```
+| Name           | Type        | Default  | Description             |
+| -------------- | ----------- | -------- | ----------------------- |
+| preview        | boolean     | true     | Whether to show preview |
+| prefixCls      | string      | rc-image | Classname prefix        |
+| placeholder    | ReactNode   | -        | Loading placeholder     |
+| fallback       | string      | -        | Load failed src         |
+| onPreviewClose | function(e) | -        | Preview close callback  |
 
 ## Example
 
 http://localhost:8003/examples/
 
-online example: http://react-component.github.io/image/examples/
-
 ## Test Case
 
 ```
@@ -78,7 +74,6 @@ npm test
 npm run coverage
 ```
 
-
 ## License
 
 rc-image is released under the MIT license.

src/Image.tsx

@@ -116,9 +116,14 @@ const ImageInternal: React.FC<ImageProps> = ({
         <img {...imgCommonProps} onLoad={onLoad} onError={onError} src={src} />
       )}
 
-      {status === 'loading' && <div className={`${prefixCls}-placeholder`}>{placeholder}</div>}
+      {status === 'loading' && (
+        <div aria-hidden="true" className={`${prefixCls}-placeholder`}>
+          {placeholder}
+        </div>
+      )}
       {preview && !isError && (
         <Preview
+          aria-hidden={!isShowPreview}
           visible={isShowPreview}
           prefixCls={`${prefixCls}-preview`}
           onClose={onPreviewClose}

tests/__snapshots__/basic.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`Basic snapshot 1`] = `
       src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
     />
     <Preview
+      aria-hidden={true}
       mousePosition={null}
       onClose={[Function]}
       prefixCls="rc-image-preview"
@@ -30,6 +31,7 @@ exports[`Basic snapshot 1`] = `
     >
       <Component
         afterClose={[Function]}
+        aria-hidden={true}
         closable={false}
         keyboard={true}
         maskTransitionName="fade"