drop aria-selected from option elements

smastrom · Dec 10, 2023 · 8d42c4d · 8d42c4d
1 parent d68069a
commit 8d42c4d
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -200,7 +200,9 @@ Although you can target the pseudo classes `:hover` and `:focus`, it is recommen
   background-color: aliceblue;
 }
 
-.my-suggestion:focus {
+.my-suggestion:hover,
+.my-suggestion:focus,
+.my-suggestion:focus-visible {
   outline: none;
 }
 ```

diff --git a/app/Examples/BasicMode/styles.css b/app/Examples/BasicMode/styles.css
@@ -50,7 +50,9 @@
    cursor: pointer;
 }
 
-.basicSuggestion:focus {
+.basicSuggestion:hover,
+.basicSuggestion:focus,
+.basicSuggestion:focus-visible {
    outline: none;
 }
 

diff --git a/app/Examples/EventsChildren/styles.css b/app/Examples/EventsChildren/styles.css
@@ -62,7 +62,8 @@
 }
 
 .eventsSuggestion:hover,
-.eventsSuggestion:focus {
+.eventsSuggestion:focus,
+.eventsSuggestion:focus-visible {
    outline: none;
 }
 

diff --git a/app/Examples/RefineMode/styles.css b/app/Examples/RefineMode/styles.css
@@ -78,6 +78,12 @@
    outline: none;
 }
 
+.refineSuggestion:hover,
+.refineSuggestion:focus,
+.refineSuggestion:focus-visible {
+   outline: none;
+}
+
 .refineUsername {
    font-weight: 400;
    padding-right: 0.1em;

diff --git a/src/Email.tsx b/src/Email.tsx
@@ -60,8 +60,8 @@ export const Email = forwardRef<HTMLInputElement, EmailProps>(
       const [suggestions, setSuggestions] = useState(baseList)
 
       /**
-       * 'focusedIndex' is used to trigger suggestions focus and set
-       * 'aria-selected' to 'true', it can only be set by keyboard events.
+       * 'focusedIndex' is used to trigger suggestions focus
+       * and can only be set by keyboard events.
        *
        * 'hoveredIndex' is used to keep track of both focused/hovered
        * suggestion in order to set 'data-active-email="true"'.
@@ -421,7 +421,6 @@ export const Email = forwardRef<HTMLInputElement, EmailProps>(
                         key={domain}
                         aria-posinset={i + 1}
                         aria-setsize={suggestions.length}
-                        aria-selected={i === activeSuggestion.focusedIndex}
                         tabIndex={-1}
                         {...getClasses(Elements.Suggestion)}
                         {...{

diff --git a/tests/Email.cy.tsx b/tests/Email.cy.tsx
@@ -191,7 +191,7 @@ it('Should update input value on suggestion keydown', () => {
          cy.get('li').then((list) => {
             const randomIndex = getRandomIndex(list.length)
             cy.downArrow(randomIndex + 1)
-            cy.get('li').eq(randomIndex).should('have.focus').and('have.attr', 'aria-selected', 'true').type('{enter}')
+            cy.get('li').eq(randomIndex).should('have.focus').type('{enter}')
             cy.get('input').should('have.value', list[randomIndex].textContent).clear()
          })
       })
@@ -206,7 +206,7 @@ it('Should keyboard-navigate trough suggestions and input', () => {
       cy.get('li').then((list) => {
          const randomIndex = getRandomIndex(list.length)
          cy.downArrow(randomIndex + 1)
-         cy.get('li').eq(randomIndex).should('have.focus').and('have.attr', 'aria-selected', 'true')
+         cy.get('li').eq(randomIndex).should('have.focus')
          cy.upArrow(randomIndex + 1)
          cy.get('input').should('have.focus')
       })
@@ -230,7 +230,6 @@ it('Should set previous focused suggestion by resuming from hovered one', () =>
          cy.get('li')
             .eq(randomIndex - 1)
             .should('have.focus')
-            .and('have.attr', 'aria-selected', 'true')
       })
    })
 })
@@ -242,10 +241,10 @@ it('Should update focused suggestion by resuming from hovered one', () => {
       cy.get('input').type('myusername@g')
 
       cy.downArrow(1) // Focus 1st suggestion
-      cy.get('li').eq(0).should('have.focus').and('have.attr', 'aria-selected', 'true')
+      cy.get('li').eq(0).should('have.focus')
       cy.get('li').eq(3).realMouseMove(10, 10) // Hover 4th suggestion
       cy.upArrow(1)
-      cy.get('li').eq(2).should('have.focus').and('have.attr', 'aria-selected', 'true')
+      cy.get('li').eq(2).should('have.focus')
    })
 })
 
@@ -257,7 +256,7 @@ it('Should focus first suggestion if pressing arrow down on last one', () => {
       cy.downArrow(1)
       cy.get('li').then((list) => {
          cy.downArrow(list.length)
-         cy.get('li').eq(0).should('have.focus').and('have.attr', 'aria-selected', 'true')
+         cy.get('li').eq(0).should('have.focus')
       })
    })
 })