diff --git a/README.md b/README.md index 801600a..b6f3163 100644 --- 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 index fddd43e..5c64097 100644 --- 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 index 5f6ac07..bafc426 100644 --- 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 index 25fac15..6ecd72c 100644 --- 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 index 57a67f1..7362774 100644 --- a/src/Email.tsx +++ b/src/Email.tsx @@ -60,8 +60,8 @@ export const Email = forwardRef( 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( 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 index a20198d..2d04d44 100644 --- 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') }) }) })