AccessibilitySpec.js 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. describe("Accessibility Tests", function() {
  2. var sliderA;
  3. var sliderB;
  4. it("Should have the slider role", function() {
  5. sliderA = $('#accessibilitySliderA').slider();
  6. sliderB = $('#accessibilitySliderB').slider();
  7. var $sliderElementA = $(sliderA.slider('getElement'));
  8. var $sliderElementB = $(sliderB.slider('getElement'));
  9. expect($sliderElementA.find('.min-slider-handle').attr('role')).toBe('slider');
  10. expect($sliderElementB.find('.min-slider-handle').attr('role')).toBe('slider');
  11. expect($sliderElementB.find('.max-slider-handle').attr('role')).toBe('slider');
  12. expect($sliderElementA.find('.tooltip-main').attr('role')).toBe('presentation');
  13. expect($sliderElementA.find('.tooltip-min').attr('role')).toBe('presentation');
  14. expect($sliderElementA.find('.tooltip-max').attr('role')).toBe('presentation');
  15. });
  16. it('Should have an aria-labelledby attribute', function() {
  17. sliderA = $('#accessibilitySliderA').slider();
  18. sliderB = $('#accessibilitySliderB').slider();
  19. expect($(sliderA.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
  20. expect($(sliderB.slider('getElement')).find('.min-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelA');
  21. expect($(sliderB.slider('getElement')).find('.max-slider-handle').attr('aria-labelledby')).toBe('accessibilitySliderLabelB');
  22. });
  23. it('Should have an aria-valuemax and aria-valuemin value', function() {
  24. sliderA = $('#accessibilitySliderA').slider({ min: 5, max: 10 });
  25. sliderB = $('#accessibilitySliderB').slider({ min: 5, max: 10 });
  26. var $sliderElementA = $(sliderA.slider('getElement'));
  27. var $sliderElementB = $(sliderB.slider('getElement'));
  28. expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
  29. expect($sliderElementA.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
  30. expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemin')).toBe('5');
  31. expect($sliderElementB.find('.min-slider-handle').attr('aria-valuemax')).toBe('10');
  32. expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemin')).toBe('5');
  33. expect($sliderElementB.find('.max-slider-handle').attr('aria-valuemax')).toBe('10');
  34. });
  35. it('Should have an aria-valuenow with the current value', function() {
  36. sliderA = $('#accessibilitySliderA').slider({ min: 5, value: 7 });
  37. sliderB = $('#accessibilitySliderB').slider({ min: 5, value: [2, 8] });
  38. var $sliderElementA = $(sliderA.slider('getElement'));
  39. var $sliderElementB = $(sliderB.slider('getElement'));
  40. expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('7');
  41. expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
  42. expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('8');
  43. // Change the value and check if aria-valuenow is still the same
  44. sliderA.slider('setValue', 1);
  45. sliderB.slider('setValue', [4, 9]);
  46. expect($sliderElementA.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
  47. expect($sliderElementB.find('.min-slider-handle').attr('aria-valuenow')).toBe('5');
  48. expect($sliderElementB.find('.max-slider-handle').attr('aria-valuenow')).toBe('9');
  49. });
  50. afterEach(function() {
  51. if(sliderA) { sliderA.slider('destroy'); }
  52. if(sliderB) { sliderB.slider('destroy'); }
  53. });
  54. });