Fix poster a11y (google#924)

* poster -> button * updated to current three.js methods * addressing feedback * Swap tabindex logic
bejado · Dec 13, 2019 · 796e8e4 · 796e8e4
1 parent 735020d
commit 796e8e4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/src/features/loading.ts b/src/features/loading.ts
@@ -342,7 +342,7 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
       const posterContainerOpacity =
           parseFloat(self.getComputedStyle(posterContainerElement).opacity!);
 
-      defaultPosterElement.tabIndex = 1;
+      defaultPosterElement.removeAttribute('tabindex');
       defaultPosterElement.removeAttribute('aria-hidden');
       posterContainerElement.classList.add('show');
 
@@ -380,7 +380,7 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
             // Ensure that the poster is no longer focusable or visible to
             // screen readers
             defaultPosterElement.setAttribute('aria-hidden', 'true');
-            defaultPosterElement.removeAttribute('tabindex');
+            defaultPosterElement.tabIndex = -1;
           });
         }, {once: true});
       }

diff --git a/src/template.ts b/src/template.ts
@@ -108,6 +108,8 @@ canvas.show {
   width: 100%;
   height: 100%;
   position: absolute;
+  border: none;
+  padding: 0;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
@@ -262,7 +264,7 @@ canvas.show {
         will have their <slot> elements removed by ShadyCSS -->
   <div class="slot poster">
     <slot name="poster">
-      <div id="default-poster" aria-hidden="true" aria-label="Activate to view in 3D!"></div>
+      <button type="button" id="default-poster" aria-hidden="true" aria-label="Activate to view in 3D!"></button>
     </slot>
   </div>
 

diff --git a/src/three-components/EnvironmentScene.ts b/src/three-components/EnvironmentScene.ts
@@ -22,7 +22,7 @@ export default class EnvironmentScene extends Scene {
     this.position.y = -3.5;
 
     const geometry = new BoxBufferGeometry();
-    geometry.removeAttribute('uv');
+    geometry.deleteAttribute('uv');
 
     const roomMaterial =
         new MeshStandardMaterial({metalness: 0, side: BackSide});

diff --git a/src/three-components/ModelScene.ts b/src/three-components/ModelScene.ts
@@ -261,8 +261,8 @@ export class ModelScene extends Scene {
 
   createSkyboxMesh(): Mesh {
     const geometry = new BoxBufferGeometry(1, 1, 1);
-    geometry.removeAttribute('normal');
-    geometry.removeAttribute('uv');
+    geometry.deleteAttribute('normal');
+    geometry.deleteAttribute('uv');
     const material = new ShaderMaterial({
       uniforms: {envMap: {value: null}, opacity: {value: 1.0}},
       vertexShader: ShaderLib.cube.vertexShader,

diff --git a/src/three-components/PMREMGenerator.ts b/src/three-components/PMREMGenerator.ts
@@ -137,10 +137,10 @@ export class PMREMGenerator {
         faceIndex.set(fill, faceIndexSize * vertices * face);
       }
       const planes = new BufferGeometry();
-      planes.addAttribute(
+      planes.setAttribute(
           'position', new BufferAttribute(position, positionSize));
-      planes.addAttribute('uv', new BufferAttribute(uv, uvSize));
-      planes.addAttribute(
+      planes.setAttribute('uv', new BufferAttribute(uv, uvSize));
+      planes.setAttribute(
           'faceIndex', new BufferAttribute(faceIndex, faceIndexSize));
       this[$lodPlanes].push(planes);