Fix accessibility issues related to the new dynamic participants table

We need to have a course with more than 20 students Log in as admin and go into the course Go to the participants page of the course Verify that there is no gap in the initials bar There used to be a gap between the letters 'M' and 'N', and also between 'All' and the letter 'A' Resize the browser window and decrease its width to the point that the initials bar breaks into 2 rows Verify that the break happened after the letters 'M', and 'N' is in the following line Verify that the surrounding box of the letter 'N' is exactly below the box of 'All' We only care about their left border. It's ok that the boxes have different sizes. Maximize the browser window or just resize it back so the initial bars are not wrapped into 2 rows Click on the letter 'C' of the 'first name' initials bar Verify that it is shown as active Verify that the letter 'C' is still tabbable by the keyboard Click on 'All' on the 'first name' initials bar Go to the second page of participants Verify that the second page in the pagination bar is shown as active Verify that the box of the second page is still tabbable by the keyboard