Reach-ui: <Image>

Created on 29 Aug 2018  路  2Comments  路  Source: reach/reach-ui

There are probably other low hanging fruit that would have greater impact but a great <Image> component would be rad. Up to about whether or not you want to do progressive loading. Regardless of that decision, I feel that the component should be able to be used everywhere (even when an image is a background):

<Image src="..." alt="..." />

// this should work as expected too
<Image src="..." alt="...">
  <div>This renders inside, on top of the image, just like RN</div>
</Image> 

The guts of the React Native Web <Image> component look pretty good from an accessibility perspective and ~100 loc for what I would consider to be features in Reach UI's scope.

https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Image/index.js

It uses a <div> plus background image but also has a hidden image for accessibilty / right click. CSS looks fairly straight forward.

Thoughts?

Most helpful comment

I should write something up to clarify the scope here, but basically if there's a WAI-ARIA role for a component, then Reach UI will provide one. (Maybe not things like button that already exist in html).

So that's basically all the things from https://www.w3.org/TR/wai-aria-practices-1.1/

3.1 Accordion (Sections With Show/Hide Functionality)
3.2 Alert
3.3 Alert and Message Dialogs
3.4 Breadcrumb
3.5 Button
3.6 Checkbox
3.7 Combo Box
3.8 Dialog (Modal)
3.9 Disclosure (Show/Hide)
3.10 Feed
3.11 Grids : Interactive Tabular Data and Layout Containers
3.12 Link
3.13 Listbox
3.14 Menu or Menu bar
3.15 Menu Button
3.16 Radio Group
3.17 Slider
3.18 Slider (Multi-Thumb)
3.19 Spinbutton
3.20 Table
3.21 Tabs
3.22 Toolbar
3.23 Tooltip Widget
3.24 Tree View
3.25 Treegrid
3.26 Window Splitter

Maybe when that's done we'll jump over into "here are some cool components that we can make generally better than what html provides"

All 2 comments

I should write something up to clarify the scope here, but basically if there's a WAI-ARIA role for a component, then Reach UI will provide one. (Maybe not things like button that already exist in html).

So that's basically all the things from https://www.w3.org/TR/wai-aria-practices-1.1/

3.1 Accordion (Sections With Show/Hide Functionality)
3.2 Alert
3.3 Alert and Message Dialogs
3.4 Breadcrumb
3.5 Button
3.6 Checkbox
3.7 Combo Box
3.8 Dialog (Modal)
3.9 Disclosure (Show/Hide)
3.10 Feed
3.11 Grids : Interactive Tabular Data and Layout Containers
3.12 Link
3.13 Listbox
3.14 Menu or Menu bar
3.15 Menu Button
3.16 Radio Group
3.17 Slider
3.18 Slider (Multi-Thumb)
3.19 Spinbutton
3.20 Table
3.21 Tabs
3.22 Toolbar
3.23 Tooltip Widget
3.24 Tree View
3.25 Treegrid
3.26 Window Splitter

Maybe when that's done we'll jump over into "here are some cool components that we can make generally better than what html provides"

Got it. Makes sense.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

coreybruyere picture coreybruyere  路  4Comments

CodebyOmar picture CodebyOmar  路  3Comments

fabien0102 picture fabien0102  路  3Comments

ryanflorence picture ryanflorence  路  4Comments

denkristoffer picture denkristoffer  路  5Comments