diff --git a/src/components/ThumbnailCanvasGrouping.js b/src/components/ThumbnailCanvasGrouping.js index def9f3d17847c0253acc181c47563e8a18e89adb..d30751f39c5c7b4733fd85f40a09772b42856b6a 100644 --- a/src/components/ThumbnailCanvasGrouping.js +++ b/src/components/ThumbnailCanvasGrouping.js @@ -50,6 +50,8 @@ export class ThumbnailCanvasGrouping extends PureComponent { width: (Number.isInteger(style.width)) ? style.width - SPACING : null, }} className={ns('thumbnail-nav-container')} + role="gridcell" + aria-colindex={index + 1} > <div role="button" diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js index b8521e4747c6fb3f343632433b994d90ea336717..48accae8e21f7708b802ab5d503cea106392a211 100644 --- a/src/components/ThumbnailNavigation.js +++ b/src/components/ThumbnailNavigation.js @@ -204,25 +204,27 @@ export class ThumbnailNavigation extends Component { onKeyUp={this.handleKeyUp} role="grid" > - <AutoSizer - defaultHeight={100} - defaultWidth={400} - > - {({ height, width }) => ( - <List - direction={htmlDir} - height={this.areaHeight(height)} - itemCount={this.itemCount()} - itemSize={this.calculateScaledSize} - width={width} - layout={(position === 'far-bottom') ? 'horizontal' : 'vertical'} - itemData={itemData} - ref={this.gridRef} - > - {ThumbnailCanvasGrouping} - </List> - )} - </AutoSizer> + <div role="row" style={{ height: '100%', width: '100%' }}> + <AutoSizer + defaultHeight={100} + defaultWidth={400} + > + {({ height, width }) => ( + <List + direction={htmlDir} + height={this.areaHeight(height)} + itemCount={this.itemCount()} + itemSize={this.calculateScaledSize} + width={width} + layout={(position === 'far-bottom') ? 'horizontal' : 'vertical'} + itemData={itemData} + ref={this.gridRef} + > + {ThumbnailCanvasGrouping} + </List> + )} + </AutoSizer> + </div> </Paper> ); }