fix: address a11y issues raised by updating our dependencies

adobe · Jan 20, 2021 · 4f06477 · 4f06477
1 parent f0d06bf
commit 4f06477
Show file tree

Hide file tree

Showing 9 changed files with 2,593 additions and 3,845 deletions.
diff --git a/documentation/src/components/code-example.ts b/documentation/src/components/code-example.ts
@@ -141,15 +141,11 @@ export class CodeExample extends FocusVisiblePolyfillMixin(LitElement) {
             ${this.showDemo
                 ? html`
                       <div class="demo-example">
-                          <slot name="demo">
-                              ${renderedCode}
-                          </slot>
+                          <slot name="demo">${renderedCode}</slot>
                       </div>
                   `
                 : undefined}
-            <bdo id="markup" dir="ltr">
-                ${highlightedCode}
-            </bdo>
+            <bdo id="markup" dir="ltr">${highlightedCode}</bdo>
         `;
     }
 

diff --git a/documentation/src/components/component.ts b/documentation/src/components/component.ts
@@ -90,9 +90,7 @@ function buildTable(
                 <tr>
                     ${headings.map(
                         (heading) => html`
-                            <th class="spectrum-Table-headCell">
-                                ${heading}
-                            </th>
+                            <th class="spectrum-Table-headCell">${heading}</th>
                         `
                     )}
                 </tr>

diff --git a/packages/bar-loader/test/bar-loader.test.ts b/packages/bar-loader/test/bar-loader.test.ts
@@ -19,7 +19,7 @@ describe('BarLoader', () => {
     it('loads default bar-loader accessibly', async () => {
         const el = await fixture<BarLoader>(
             html`
-                <sp-bar-loader></sp-bar-loader>
+                <sp-bar-loader label="Loading"></sp-bar-loader>
             `
         );
 
@@ -55,7 +55,7 @@ describe('BarLoader', () => {
     });
     it('loads - [indeterminate]', async () => {
         const el = await fixture<BarLoader>(html`
-            <sp-bar-loader indeterminate></sp-bar-loader>
+            <sp-bar-loader indeterminate label="Loading"></sp-bar-loader>
         `);
 
         await elementUpdated(el);

diff --git a/packages/circle-loader/test/circleloader.test.ts b/packages/circle-loader/test/circleloader.test.ts
@@ -17,7 +17,7 @@ import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
 describe('Circle Loader', () => {
     it('loads', async () => {
         const el = await fixture<CircleLoader>(html`
-            <sp-circle-loader></sp-circle-loader>
+            <sp-circle-loader label="Loading"></sp-circle-loader>
         `);
 
         await elementUpdated(el);
@@ -27,7 +27,7 @@ describe('Circle Loader', () => {
     });
     it('loads - [indeterminate]', async () => {
         const el = await fixture<CircleLoader>(html`
-            <sp-circle-loader indeterminate></sp-circle-loader>
+            <sp-circle-loader indeterminate label="Loading"></sp-circle-loader>
         `);
 
         await elementUpdated(el);

diff --git a/packages/menu/src/MenuGroup.ts b/packages/menu/src/MenuGroup.ts
@@ -46,7 +46,7 @@ export class MenuGroup extends SpectrumElement {
             <span class="header" id=${labelledby} aria-hidden="true">
                 <slot name="header"></slot>
             </span>
-            <div aria-labelledby=${labelledby} role="presentation">
+            <div role="presentation">
                 <slot></slot>
             </div>
         `;

diff --git a/packages/menu/test/menu-group.test.ts b/packages/menu/test/menu-group.test.ts
@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
 import '../sp-menu-group.js';
 import '../sp-menu.js';
 import '../sp-menu-item.js';
-import { MenuGroup, Menu } from '../';
+import { Menu } from '../';
 import { fixture, elementUpdated, html, expect } from '@open-wc/testing';
 
 describe('Menu group', () => {
@@ -21,64 +21,23 @@ describe('Menu group', () => {
             html`
                 <sp-menu>
                     <sp-menu-group>
-                        <span slot="header">
-                            Section Heading
-                        </span>
-                        <sp-menu-item>
-                            Action 1
-                        </sp-menu-item>
-                        <sp-menu-item>
-                            Action 2
-                        </sp-menu-item>
-                        <sp-menu-item>
-                            Action 3
-                        </sp-menu-item>
+                        <span slot="header">Section Heading</span>
+                        <sp-menu-item>Action 1</sp-menu-item>
+                        <sp-menu-item>Action 2</sp-menu-item>
+                        <sp-menu-item>Action 3</sp-menu-item>
                     </sp-menu-group>
                     <sp-menu-divider></sp-menu-divider>
                     <sp-menu-group>
-                        <span slot="header">
-                            Section Heading
-                        </span>
-                        <sp-menu-item>
-                            Save
-                        </sp-menu-item>
-                        <sp-menu-item disabled>
-                            Download
-                        </sp-menu-item>
+                        <span slot="header">Section Heading</span>
+                        <sp-menu-item>Save</sp-menu-item>
+                        <sp-menu-item disabled>Download</sp-menu-item>
                     </sp-menu-group>
                 </sp-menu>
             `
         );
 
         await elementUpdated(el);
 
-        const firstGroup = el.querySelector(
-            'sp-menu-group:nth-of-type(1)'
-        ) as MenuGroup;
-        const secondGroup = el.querySelector(
-            'sp-menu-group:nth-of-type(2)'
-        ) as MenuGroup;
-        const firstLabelledByEl = firstGroup.shadowRoot
-            ? (firstGroup.shadowRoot.querySelector(
-                  '[aria-labelledby]'
-              ) as HTMLDivElement)
-            : null;
-        const secondLabelledByEl = secondGroup.shadowRoot
-            ? (secondGroup.shadowRoot.querySelector(
-                  '[aria-labelledby]'
-              ) as HTMLDivElement)
-            : null;
-        const firstLabelledById = firstLabelledByEl
-            ? (firstLabelledByEl.getAttribute('aria-labelledby') as string)
-            : null;
-        const secondLabelledById = secondLabelledByEl
-            ? (secondLabelledByEl.getAttribute('aria-labelledby') as string)
-            : null;
-
-        expect(firstLabelledById).to.not.be.null;
-        expect(secondLabelledById).to.not.be.null;
-        expect(firstLabelledById).to.not.equal(secondLabelledById);
-
         await expect(el).to.be.accessible();
     });
 });
diff --git a/packages/meter/test/meter.test.ts b/packages/meter/test/meter.test.ts
@@ -19,7 +19,7 @@ describe('Meter', () => {
     it('loads default meter accessibly', async () => {
         const el = await fixture<Meter>(
             html`
-                <sp-meter></sp-meter>
+                <sp-meter label="Loading"></sp-meter>
             `
         );
 

diff --git a/packages/modal/src/spectrum-modal-wrapper.css b/packages/modal/src/spectrum-modal-wrapper.css
@@ -22,7 +22,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     width: 100vw;
     height: 100vh;
     height: -webkit-fill-available;
-    height: -webkit-stretch;
     height: -moz-available;
     height: fill-available;
     visibility: hidden;