Skip to content
This repository has been archived by the owner on Sep 5, 2023. It is now read-only.

Improve the modal component #24

Open
6 of 10 tasks
JeremieLitzler opened this issue Mar 8, 2018 · 0 comments
Open
6 of 10 tasks

Improve the modal component #24

JeremieLitzler opened this issue Mar 8, 2018 · 0 comments

Comments

@JeremieLitzler
Copy link
Owner

JeremieLitzler commented Mar 8, 2018 •
edited by WebDevJL
Loading

CSS

The current problem is that the current component allows to view the content below the modal.

The solution is :

  • to set the position to fixed.
  • to set the width to 100vw for screens below 599px of width.
  • to set the height to 100vh for screens below 599px of width.
  • on screens where min-width is 600px:
    • add a overlay
    • set the modal width to 80vw
    • set the modal height to 80vh

JS

The current component has poor flexibility for handling click events and managing focus.

  • make sure the modal can be opened
  • make sure the user can exit the modal with the keyboard with no eternal keyboard traps
  • but make a keyboard trap as long as the user doesn't hit ESC key or Close button
  • make sure the drop-downs are accessible through UP and DOWN arrows.
@JeremieLitzler JeremieLitzler changed the title Improve the modal css component Improve the modal component Mar 8, 2018
WebDevJL pushed a commit that referenced this issue Mar 8, 2018
feat: implement first accessible point
e732c1a 
- update the modal component to work properly
- add skip-link to go to search

Cover: #20, #21, #24
WebDevJL pushed a commit that referenced this issue Mar 9, 2018
feat- make the modals accessible
ffca6a3 
- all the modals meets the requirements of #24
- the code is reusable
 covers : #24, #20 and #21
WebDevJL pushed a commit that referenced this issue Mar 13, 2018
feat- cover responsive and accessibility issues
ce8f55e 
- implements the responsive images on the details page
- update the image url construction to be used everywhere
- enable keyboard pseudo-scrolling on reviews using links
- update the headings to be semantically correct

- improve search modal to be able to select several options

Covers: #24, #18, #20, #21 and #19
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@JeremieLitzler