Revert "feat(collapse): add accessibility support (#161)" (#179)

This reverts commit 158f031.
Refinitiv · Jan 27, 2022 · 9a0ad70 · 9a0ad70
1 parent 158f031
commit 9a0ad70
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 115 deletions.
diff --git a/packages/elemental-theme/src/custom-elements/ef-collapse.less b/packages/elemental-theme/src/custom-elements/ef-collapse.less
@@ -4,10 +4,6 @@
 @import '../responsive';
 
 :host {
-  [part="header-toggle"] {
-    outline: none;
-  }
-
   [part="toggle"] {
     transition: @global-transition-duration @global-transition-easing;
     opacity: .5;

diff --git a/packages/elements/src/collapse/__snapshots__/Collapse.md b/packages/elements/src/collapse/__snapshots__/Collapse.md
@@ -6,22 +6,10 @@
 
 ```html
 <ef-header
-  aria-level="2"
   level="3"
   part="header"
-  role="heading"
 >
-  <div
-    aria-controls="content"
-    aria-expanded="false"
-    id="header-toggle"
-    part="header-toggle"
-    role="button"
-    tabindex="0"
-  >
-  </div>
   <ef-icon
-    aria-hidden="true"
     icon="right"
     part="toggle"
     slot="left"
@@ -38,14 +26,9 @@
   >
   </slot>
 </ef-header>
-<div
-  aria-labelledby="header-toggle"
-  id="content"
-  part="content"
-  role="region"
->
+<div part="content">
   <ef-panel transparent="">
-    <slot hidden="">
+    <slot>
     </slot>
   </ef-panel>
 </div>
@@ -56,22 +39,10 @@
 
 ```html
 <ef-header
-  aria-level="2"
   level="3"
   part="header"
-  role="heading"
 >
-  <div
-    aria-controls="content"
-    aria-expanded="false"
-    id="header-toggle"
-    part="header-toggle"
-    role="button"
-    tabindex="0"
-  >
-  </div>
   <ef-icon
-    aria-hidden="true"
     icon="right"
     part="toggle"
     slot="left"
@@ -88,14 +59,9 @@
   >
   </slot>
 </ef-header>
-<div
-  aria-labelledby="header-toggle"
-  id="content"
-  part="content"
-  role="region"
->
+<div part="content">
   <ef-panel transparent="">
-    <slot hidden="">
+    <slot>
     </slot>
   </ef-panel>
 </div>
@@ -106,23 +72,10 @@
 
 ```html
 <ef-header
-  aria-level="2"
   level="3"
   part="header"
-  role="heading"
 >
-  <div
-    aria-controls="content"
-    aria-expanded="false"
-    id="header-toggle"
-    part="header-toggle"
-    role="button"
-    tabindex="0"
-  >
-    Header
-  </div>
   <ef-icon
-    aria-hidden="true"
     icon="right"
     part="toggle"
     slot="left"
@@ -138,15 +91,11 @@
     slot="right"
   >
   </slot>
+  Header
 </ef-header>
-<div
-  aria-labelledby="header-toggle"
-  id="content"
-  part="content"
-  role="region"
->
+<div part="content">
   <ef-panel transparent="">
-    <slot hidden="">
+    <slot>
     </slot>
   </ef-panel>
 </div>
@@ -157,22 +106,10 @@
 
 ```html
 <ef-header
-  aria-level="2"
   level="1"
   part="header"
-  role="heading"
 >
-  <div
-    aria-controls="content"
-    aria-expanded="false"
-    id="header-toggle"
-    part="header-toggle"
-    role="button"
-    tabindex="0"
-  >
-  </div>
   <ef-icon
-    aria-hidden="true"
     icon="right"
     part="toggle"
     slot="left"
@@ -189,14 +126,9 @@
   >
   </slot>
 </ef-header>
-<div
-  aria-labelledby="header-toggle"
-  id="content"
-  part="content"
-  role="region"
->
+<div part="content">
   <ef-panel transparent="">
-    <slot hidden="">
+    <slot>
     </slot>
   </ef-panel>
 </div>
@@ -207,22 +139,10 @@
 
 ```html
 <ef-header
-  aria-level="2"
   level=""
   part="header"
-  role="heading"
 >
-  <div
-    aria-controls="content"
-    aria-expanded="false"
-    id="header-toggle"
-    part="header-toggle"
-    role="button"
-    tabindex="0"
-  >
-  </div>
   <ef-icon
-    aria-hidden="true"
     icon="right"
     part="toggle"
     slot="left"
@@ -239,14 +159,9 @@
   >
   </slot>
 </ef-header>
-<div
-  aria-labelledby="header-toggle"
-  id="content"
-  part="content"
-  role="region"
->
+<div part="content">
   <ef-panel transparent="">
-    <slot hidden="">
+    <slot>
     </slot>
   </ef-panel>
 </div>

diff --git a/packages/elements/src/collapse/index.ts b/packages/elements/src/collapse/index.ts
@@ -101,13 +101,6 @@ export class Collapse extends BasicElement {
   @query('ef-panel', true)
   private panel!: HTMLElement;
 
-  /**
-   * Hierarchical level of element
-   * @ignore
-   */
-  @property({ type: String, reflect: true, attribute: 'aria-level' })
-  public ariaLevel: '1'| '2'| '3' | '4' | '5' | '6' = '2';
-
   /**
    * Called once after the component is first rendered
    * @param changedProperties map of changed properties with old values
@@ -148,7 +141,7 @@ export class Collapse extends BasicElement {
    * @returns {boolean} true if target is ef-header
    */
   private static isHeader (element: HTMLElement): boolean {
-    return element.localName === 'ef-header' || element.getAttribute('part') === 'toggle' || element.getAttribute('part') === 'header-toggle';
+    return element.localName === 'ef-header' || element.getAttribute('part') === 'toggle';
   }
 
   /**
@@ -202,17 +195,15 @@ export class Collapse extends BasicElement {
    */
   protected render (): TemplateResult {
     return html`
-      <ef-header part="header" level="${this.level}" @tap=${this.handleTap} role="heading" aria-level=${this.ariaLevel}>
-        <div part="header-toggle" id="header-toggle" role="button" tabindex="0" aria-expanded="${this.expanded}" aria-controls="content">
-          ${this.header}
-        </div>
-        <ef-icon icon="right" slot="left" part="toggle" aria-hidden="true"></ef-icon>
+      <ef-header part="header" level="${this.level}" @tap="${this.handleTap}">
+        <ef-icon icon="right" slot="left" part="toggle"></ef-icon>
         <slot slot="left" name="header-left"></slot>
         <slot slot="right" name="header-right"></slot>
+        ${this.header}
       </ef-header>
-      <div id="content" part="content" role="region" aria-labelledby="header-toggle">
+      <div part="content">
         <ef-panel ?spacing="${this.spacing}" transparent>
-          <slot ?hidden=${!this.expanded}></slot>
+          <slot></slot>
         </ef-panel>
       </div>
     `;